API tools faq
paste
Advertisement
hermionemessi

About Me 01 v1

hermionemessi
Sep 9th, 2021 (edited)
1,482
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 21.22 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Eudamia Page Pack: About Me 01 Arenza by antoniosvivaldi / athenathms
  4.  
  5. antoniosvivaldi © 2021
  6.  
  7. Note:
  8.  
  9. - Optimised for modern browsers e.g. Google Chrome / Opera
  10. - Optimised for computer monitor sizes 13in. ~ 15in.
  11. - Common terms of use apply
  12. - Feel free to tweak the layout as long as the credit stays intact
  13.  
  14. -->
  15. <head>
  16.  
  17. <meta charset="UTF-8" />
  18. <meta https-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20. <link rel="shortcut icon" href="{Favicon}">
  21.  
  22. <title>{Title}</title>
  23.  
  24.  
  25.  
  26.  
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
  30. <link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700" rel="stylesheet">
  32.  
  33. <link href="https://fonts.googleapis.com/css?family=Playfair+Display:700" rel="stylesheet">
  34. <link href="https://fonts.googleapis.com/css?family=Elsie:900" rel="stylesheet">
  35. <link href="https://fonts.googleapis.com/css?family=Unna:700" rel="stylesheet">
  36. <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:700" rel="stylesheet">
  37.  
  38. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  39.  
  40. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  41.  
  42. <style type="text/css">
  43.  
  44. /*Customise stuff here*/
  45.  
  46. :root {
  47.  
  48. /*font size*/
  49. --fontsize:18px;
  50.  
  51. /*accent colours*/
  52. --accent: #53759b;
  53. --highlight: #cfe9f6;
  54.  
  55. /*accent colours with opacity*/
  56.  
  57. /*
  58. convert the accent & highlight hex codes to RGB values using the following website:
  59.  
  60. https://www.rapidtables.com/convert/color/hex-to-rgb.html
  61.  
  62. */
  63.  
  64. --accentalpha: 83, 117, 155;
  65. --highlightalpha: 207, 233, 246;
  66.  
  67. /* available blend modes:
  68.  
  69. - Normal
  70. - Multiply
  71. - Scren
  72. - Color Burn
  73. - Color Dodge
  74. - Overlay
  75. - Soft Light
  76. - Hard Light
  77. - Hue
  78. - Color
  79.  
  80.  
  81. */
  82.  
  83. --abtblend:multiply;
  84. --faqblend:multiply;
  85.  
  86.  
  87.  
  88. }
  89.  
  90. /*Available body fonts:
  91.  
  92. - Fira Sans
  93. - Open Sans
  94. - Karla
  95. - Source Sans Pro
  96.  
  97. */
  98.  
  99. body {
  100. font-family:'Fira Sans',sans-serif;
  101. }
  102.  
  103. /*Available heading fonts:
  104.  
  105. - Playfair Display
  106. - Elsie
  107. - Unna
  108. - Libre Baskerville
  109.  
  110. */
  111.  
  112. h1, h2, .tilter__title {font-family:'Playfair Display',serif;}
  113.  
  114.  
  115. </style>
  116.  
  117. <!--the rest of the CSS stylesheet-->
  118. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">
  119.  
  120. </head>
  121.  
  122. <!--How to use different theme modes: in the body tag below
  123.  
  124. Light theme: day-mode
  125. Dark theme: night-mode
  126. Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML
  127.  
  128. -->
  129. <body class="animsition day-mode">
  130.  
  131. <div class="topbar">
  132. <div class="topbar__inner">
  133.  
  134. <!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
  135. <h1><a class="a-link tbrefresh" href="/">{Title}
  136. <span class="tbletters" data-letters="{Title}"></span>
  137. <span class="tbletters" data-letters="{Title}"></span>
  138. </a></h1>
  139.  
  140.  
  141. </div>
  142. </div>
  143.  
  144.  
  145. <main class="smooth">
  146. <div id="wrapper">
  147. <!--Posts and hero image-->
  148. <section class="tabs" id="tab1">
  149.  
  150. <div class="abt_cont">
  151. <article class="abtstuff hoverbox">
  152.  
  153. <a class="tilter tilter--4">
  154. <figure class="tilter__figure">
  155. <div class="abtimg">
  156.  
  157.  
  158.  
  159. <!--About Me section image-->
  160. <img class="tilter__image" src="https://64.media.tumblr.com/e97a64470998fd16b116b17f67fbab4c/4e8a6883106985ad-75/s2048x3072/38b3b295a1dde5bff3c30e2896ef1f2d847147ed.png"data-focus-x=".5" data-focus-y="0" />
  161. <!--/About Me section image-->
  162.  
  163.  
  164. </div>
  165. <div class="tilter__deco tilter__deco--shine"><div></div></div>
  166. <div class="tilter__deco tilter__deco--overlay"></div>
  167. <figcaption class="tilter__caption">
  168. <!--Name-->
  169. <h3 class="tilter__title">Name</h3>
  170. <!--/Name-->
  171.  
  172. <!--Short info-->
  173. <p class="tilter__description">some info here</p>
  174. <!--/Short info-->
  175.  
  176. </figcaption>
  177. <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
  178. <path d="M20.5,20.5h260v375h-260V20.5z" />
  179. </svg>
  180. </figure>
  181. </a>
  182.  
  183.  
  184.  
  185.  
  186. </article>
  187.  
  188. <article class="abtstuff biography">
  189. <h1>About Me</h1>
  190.  
  191. <!--Write your bio here-->
  192. <p>
  193. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  194. </p>
  195.  
  196.  
  197. <!--Add bio quote if you want-->
  198. <p class="abtqt">
  199. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  200. </p>
  201.  
  202. <!--to add more paragraphs: add one more set of <p></p> to add one moreline of quote <p class="abtqt"></p> -->
  203.  
  204. <!--/to here -->
  205.  
  206. <nav class="abtlinks">
  207.  
  208. <!--About Me Link-->
  209. <a href="/" title="Link">
  210. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M15 1c-.38 0-.692.184-.963.416-.27.232-.518.534-.766.883-.493.697-.98 1.596-1.456 2.518-.475.923-.94 1.868-1.357 2.625-.418.758-.85 1.338-.998 1.444-.15.105-.853.328-1.722.482-.868.153-1.93.292-2.976.448-1.046.157-2.072.33-2.903.573-.416.122-.783.258-1.092.438-.31.18-.59.413-.71.776-.122.362-.035.717.108 1.042.143.326.36.648.623.985.526.675 1.25 1.407 2.003 2.134.752.726 1.53 1.446 2.14 2.068.608.622 1.042 1.21 1.096 1.37.053.163.055.883-.063 1.735-.118.853-.314 1.88-.485 2.9-.17 1.02-.317 2.028-.337 2.878-.01.425.01.81.09 1.156.08.347.224.683.535.903.31.22.67.247 1.03.215.356-.032.734-.13 1.143-.27.82-.282 1.754-.73 2.694-1.204.94-.473 1.883-.97 2.677-1.344.795-.374 1.497-.6 1.686-.6.19 0 .89.226 1.686.6.794.374 1.737.87 2.677 1.344.94.473 1.875.922 2.694 1.203.41.14.787.24 1.144.27.36.033.72.006 1.03-.214.31-.22.455-.556.536-.902.08-.345.1-.73.09-1.155-.02-.85-.168-1.858-.338-2.877-.17-1.02-.367-2.048-.485-2.9-.118-.853-.116-1.573-.062-1.735.055-.162.49-.75 1.098-1.37.61-.623 1.387-1.343 2.14-2.07.75-.726 1.476-1.458 2.003-2.132.265-.336.48-.658.624-.984.143-.325.23-.68.11-1.042-.12-.363-.402-.596-.712-.776-.31-.18-.676-.316-1.09-.437-.832-.242-1.858-.415-2.904-.572-1.045-.156-2.108-.295-2.976-.45-.87-.153-1.572-.376-1.72-.48-.15-.107-.58-.687-1-1.445-.417-.757-.88-1.702-1.356-2.625-.476-.922-.963-1.82-1.457-2.52-.25-.348-.496-.65-.767-.882C15.693 1.184 15.38 1 15 1zm.313 1.176c.17.146.38.39.6.7.436.617.914 1.49 1.384 2.4.47.91.933 1.858 1.37 2.65.435.79.786 1.417 1.294 1.777.51.36 1.223.49 2.128.65.905.16 1.97.3 3.002.454 1.032.154 2.032.33 2.77.545.37.107.674.227.87.34.31.138.27.384.188.552-.09.203-.26.473-.494.772-.467.597-1.17 1.312-1.912 2.03-.742.716-1.523 1.438-2.158 2.087-.636.65-1.136 1.162-1.333 1.754-.196.592-.1 1.298.023 2.19.124.89.32 1.922.488 2.927.17 1.005.307 1.987.325 2.736.01.375-.012.692-.062.906-.083.354-.293.354-.502.346-.228-.02-.545-.096-.91-.22-.727-.25-1.64-.684-2.567-1.15-.928-.468-1.873-.97-2.702-1.358-.827-.39-1.487-.694-2.11-.694-.623 0-1.283.304-2.11.694-.83.39-1.775.89-2.703 1.357-.927.468-1.84.902-2.568 1.15-.365.126-.682.202-.91.222-.315.008-.433-.11-.503-.346-.05-.214-.072-.53-.062-.906.018-.75.156-1.73.324-2.736.167-1.005.363-2.037.487-2.928.124-.89.22-1.597.022-2.19-.198-.59-.698-1.104-1.334-1.753-.635-.65-1.416-1.37-2.158-2.088-.74-.717-1.445-1.432-1.912-2.03-.233-.298-.405-.568-.494-.77-.127-.245.017-.453.188-.552.196-.114.5-.234.87-.34.738-.217 1.738-.392 2.77-.546 1.032-.155 2.097-.293 3.002-.453.905-.16 1.62-.29 2.127-.65.507-.36.858-.987 1.294-1.778.436-.792.9-1.74 1.37-2.65.47-.91.947-1.783 1.384-2.4.22-.31.428-.554.6-.7.312-.26.452-.176.624 0z"/></svg>
  211. </a>
  212. <!--/About Me Link-->
  213.  
  214. <!--About Me Link-->
  215. <a href="/" title="Link">
  216. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M19.5 7c-.657 0-.657 1 0 1H22c3.887 0 7 3.113 7 7s-3.113 7-7 7h-2c-3.887 0-7-3.113-7-7v-.5c0-.672-1-.648-1 0v.5c0 4.423 3.577 8 8 8h2c4.423 0 8-3.577 8-8s-3.577-8-8-8zM8 7c-4.423 0-8 3.577-8 8s3.577 8 8 8h2.5c.665 0 .66-1 0-1H8c-3.887 0-7-3.113-7-7s3.113-7 7-7h2c3.887 0 7 3.113 7 7v.5c0 .676 1 .656 1 0V15c0-4.423-3.577-8-8-8z"/></svg>
  217. </a>
  218. <!--/About Me Link-->
  219.  
  220. <!--About Me Link-->
  221. <a href="/" title="Link">
  222. <svg height="30" viewBox="0 0 30 30" width="30" xmlns="http://www.w3.org/2000/svg"><path d="M7.975 2c-2.235.116-4.365 1.203-5.82 2.89C.7 6.57 0 8.786 0 11c0 1.938.697 3.816 1.646 5.46.95 1.644 2.19 3.077 3.5 4.394 2.824 2.833 6.08 5.232 9.622 7.09.145.076.32.076.464 0 3.543-1.858 6.798-4.257 9.622-7.09 1.31-1.317 2.55-2.75 3.5-4.393C29.304 14.817 30 12.94 30 11c0-2.22-.7-4.428-2.154-6.11C26.39 3.202 24.26 2.115 22.026 2c-1.516-.078-3.045.286-4.362 1.04-1.097.626-1.975 1.558-2.664 2.614-.69-1.056-1.567-1.988-2.664-2.615C11.02 2.285 9.49 1.92 7.976 2zm.05 1c1.32-.068 2.665.25 3.813.906 1.148.656 2.107 1.652 2.72 2.824.186.36.698.36.885 0 .612-1.172 1.57-2.168 2.72-2.824 1.147-.656 2.49-.974 3.812-.906 1.942.1 3.837 1.062 5.115 2.54C28.37 7.023 29 9 29 11c0 1.73-.628 3.43-1.512 4.96-.885 1.535-2.064 2.904-3.342 4.186-2.686 2.697-5.788 4.975-9.146 6.766-3.358-1.79-6.46-4.07-9.146-6.766-1.278-1.282-2.457-2.65-3.342-4.185C1.628 14.43 1 12.73 1 11c0-2 .63-3.978 1.91-5.46C4.188 4.063 6.083 3.1 8.025 3z"/></svg>
  223. </a>
  224. <!--/About Me Link-->
  225.  
  226. </nav>
  227.  
  228. </article>
  229. </div>
  230.  
  231. <footer>
  232. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  233. </footer>
  234.  
  235. </section>
  236. <!--/Posts and hero image-->
  237.  
  238.  
  239.  
  240.  
  241.  
  242. </div>
  243. </main>
  244.  
  245.  
  246. <!--Please do not alter the credit!-->
  247. <div id="athena_wrapper">
  248. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  249. </div>
  250. <!--/credit-->
  251.  
  252. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  253. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  254. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  255.  
  256. <script>
  257. /**
  258. * main.js
  259. * http://www.codrops.com
  260. *
  261. * Licensed under the MIT license.
  262. * http://www.opensource.org/licenses/mit-license.php
  263. *
  264. * Copyright 2016, Codrops
  265. * http://www.codrops.com
  266. */
  267. ;(function(window) {
  268.  
  269. 'use strict';
  270.  
  271. // Helper vars and functions.
  272. function extend( a, b ) {
  273. for( var key in b ) {
  274. if( b.hasOwnProperty( key ) ) {
  275. a[key] = b[key];
  276. }
  277. }
  278. return a;
  279. }
  280.  
  281. // from http://www.quirksmode.org/js/events_properties.html#position
  282. function getMousePos(e) {
  283. var posx = 0, posy = 0;
  284. if (!e) var e = window.event;
  285. if (e.pageX || e.pageY) {
  286. posx = e.pageX;
  287. posy = e.pageY;
  288. }
  289. else if (e.clientX || e.clientY) {
  290. posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  291. posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  292. }
  293. return { x : posx, y : posy }
  294. }
  295.  
  296. /**
  297. * TiltFx obj.
  298. */
  299. function TiltFx(el, options) {
  300. this.DOM = {};
  301. this.DOM.el = el;
  302. this.options = extend({}, this.options);
  303. extend(this.options, options);
  304. this._init();
  305. }
  306.  
  307. TiltFx.prototype.options = {
  308. movement: {
  309. imgWrapper : {
  310. translation : {x: 0, y: 0, z: 0},
  311. rotation : {x: -5, y: 5, z: 0},
  312. reverseAnimation : {
  313. duration : 1200,
  314. easing : 'easeOutElastic',
  315. elasticity : 600
  316. }
  317. },
  318. lines : {
  319. translation : {x: 10, y: 10, z: [0,10]},
  320. reverseAnimation : {
  321. duration : 1000,
  322. easing : 'easeOutExpo',
  323. elasticity : 600
  324. }
  325. },
  326. caption : {
  327. translation : {x: 20, y: 20, z: 0},
  328. rotation : {x: 0, y: 0, z: 0},
  329. reverseAnimation : {
  330. duration : 1500,
  331. easing : 'easeOutElastic',
  332. elasticity : 600
  333. }
  334. },
  335. /*
  336. overlay : {
  337. translation : {x: 10, y: 10, z: [0,50]},
  338. reverseAnimation : {
  339. duration : 500,
  340. easing : 'easeOutExpo'
  341. }
  342. },
  343. */
  344. shine : {
  345. translation : {x: 50, y: 50, z: 0},
  346. reverseAnimation : {
  347. duration : 1200,
  348. easing : 'easeOutElastic',
  349. elasticity: 600
  350. }
  351. }
  352. }
  353. };
  354.  
  355. /**
  356. * Init.
  357. */
  358. TiltFx.prototype._init = function() {
  359. this.DOM.animatable = {};
  360. this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.tilter__figure');
  361. this.DOM.animatable.lines = this.DOM.el.querySelector('.tilter__deco--lines');
  362. this.DOM.animatable.caption = this.DOM.el.querySelector('.tilter__caption');
  363. this.DOM.animatable.overlay = this.DOM.el.querySelector('.tilter__deco--overlay');
  364. this.DOM.animatable.shine = this.DOM.el.querySelector('.tilter__deco--shine > div');
  365. this._initEvents();
  366. };
  367.  
  368. /**
  369. * Init/Bind events.
  370. */
  371. TiltFx.prototype._initEvents = function() {
  372. var self = this;
  373.  
  374. this.mouseenterFn = function() {
  375. for(var key in self.DOM.animatable) {
  376. anime.remove(self.DOM.animatable[key]);
  377. }
  378. };
  379.  
  380. this.mousemoveFn = function(ev) {
  381. requestAnimationFrame(function() { self._layout(ev); });
  382. };
  383.  
  384. this.mouseleaveFn = function(ev) {
  385. requestAnimationFrame(function() {
  386. for(var key in self.DOM.animatable) {
  387. if( self.options.movement[key] == undefined ) {continue;}
  388. anime({
  389. targets: self.DOM.animatable[key],
  390. duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1,
  391. easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear',
  392. elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null,
  393. scaleX: 1,
  394. scaleY: 1,
  395. scaleZ: 1,
  396. translateX: 0,
  397. translateY: 0,
  398. translateZ: 0,
  399. rotateX: 0,
  400. rotateY: 0,
  401. rotateZ: 0
  402. });
  403. }
  404. });
  405. };
  406.  
  407. this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
  408. this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
  409. this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
  410. };
  411.  
  412. TiltFx.prototype._layout = function(ev) {
  413. // Mouse position relative to the document.
  414. var mousepos = getMousePos(ev),
  415. // Document scrolls.
  416. docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
  417. bounds = this.DOM.el.getBoundingClientRect(),
  418. // Mouse position relative to the main element (this.DOM.el).
  419. relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
  420.  
  421. // Movement settings for the animatable elements.
  422. for(var key in this.DOM.animatable) {
  423. if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) {
  424. continue;
  425. }
  426. var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  427. r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  428. setRange = function (obj) {
  429. for(var k in obj) {
  430. if( obj[k] == undefined ) {
  431. obj[k] = [0,0];
  432. }
  433. else if( typeof obj[k] === 'number' ) {
  434. obj[k] = [-1*obj[k],obj[k]];
  435. }
  436. }
  437. };
  438.  
  439. setRange(t);
  440. setRange(r);
  441.  
  442. var transforms = {
  443. translation : {
  444. x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0],
  445. y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0],
  446. z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0],
  447. },
  448. rotation : {
  449. x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
  450. y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
  451. z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
  452. }
  453. };
  454.  
  455. this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)';
  456. }
  457. };
  458.  
  459. window.TiltFx = TiltFx;
  460.  
  461. })(window);
  462. </script>
  463. <script>
  464. (function() {
  465. var tiltSettings = [
  466. {
  467. movement: {
  468. imgWrapper : {
  469. rotation : {x: -5, y: 10, z: 0},
  470. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  471. },
  472. caption : {
  473. translation : {x: 20, y: 20, z: 0},
  474. reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  475. },
  476. overlay : {
  477. translation : {x: 5, y: -5, z: 0},
  478. rotation : {x: 0, y: 0, z: 6},
  479. reverseAnimation : {duration : 1000, easing : 'easeOutQuad'}
  480. },
  481. shine : {
  482. translation : {x: 50, y: 50, z: 0},
  483. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  484. }
  485. }
  486. },{}];
  487.  
  488. function init() {
  489. var idx = 0;
  490. [].slice.call(document.querySelectorAll('a.tilter')).forEach(function(el, pos) {
  491. idx = pos%2 === 0 ? idx+1 : idx;
  492. new TiltFx(el, tiltSettings[idx-1]);
  493. });
  494. }
  495.  
  496. // Preload all images.
  497. imagesLoaded(document.querySelector('main'), function() {
  498. document.body.classList.remove('loading');
  499. init();
  500. });
  501.  
  502.  
  503. })();
  504. </script>
  505.  
  506.  
  507.  
  508. <!-- animsition.js -->
  509. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  510.  
  511.  
  512. <script>
  513. $(document).ready(function() {
  514.  
  515. $(".animsition").animsition({
  516. inClass: 'fade-in',
  517. outClass: 'fade-out',
  518. inDuration: 1500,
  519. outDuration: 800,
  520. linkElement: '.a-link',
  521. loading: true,
  522. loadingParentElement: 'body',
  523. loadingClass: 'animsition-loading',
  524. loadingInner: '',
  525. timeout: true,
  526. timeoutCountdown: 3000,
  527. onLoadEvent: true,
  528. browser: [ 'animation-duration', '-webkit-animation-duration'],
  529. overlay : false,
  530. overlayClass : 'animsition-overlay-slide',
  531. overlayParentElement : 'body',
  532. transition: function(url){ window.location.href = url; }
  533. });
  534.  
  535.  
  536. });
  537.  
  538. </script>
  539.  
  540.  
  541. <script>
  542. (function ( $ ) {
  543. $.fn.responsify = function() {
  544. return this.each(function() {
  545. var owdith, oheight,
  546. twidth, theight,
  547. fx, fy,
  548. width, height, top, left;
  549.  
  550. owidth = $('img', this).width();
  551. oheight = $('img', this).height();
  552. twidth = $(this).width();
  553. theight = $(this).height();
  554. fx = $('img', this).attr('data-focus-x');
  555. fy = $('img', this).attr('data-focus-y');
  556.  
  557. if( owidth/oheight > twidth/theight ) {
  558. height = theight;
  559. width = theight*owidth/oheight;
  560. var fleft = Number(fx) * width;
  561. var fright = width - Number(fx) * width;
  562. if (fleft < twidth/2) {
  563. left = 0;
  564. }
  565. else if (fleft >= twidth/2 && fright >= twidth/2) {
  566. left = twidth/2 - fleft;
  567. }
  568. else if (fleft >= twidth/2 && fright < twidth/2) {
  569. left = twidth - width;
  570. }
  571. top = 0;
  572. }
  573. else if( owidth/oheight <= twidth/theight ) {
  574. width = twidth;
  575. height = twidth*oheight/owidth;
  576. var ftop = Number(fy) * height;
  577. var fbottom = height - Number(fy) * height;
  578. if (ftop < theight/2) {
  579. top = 0;
  580. }
  581. else if (ftop >= theight/2 && fbottom >= theight/2) {
  582. top = theight/2 - ftop;
  583. }
  584. else if (ftop >= theight/2 && fbottom < theight/2) {
  585. top = theight - height;
  586. }
  587. left = 0;
  588. }
  589. $(this).css({
  590. "overflow": "hidden"
  591. })
  592. $('img', this).css({
  593. "position": "relative",
  594. "height": height,
  595. "width": width,
  596. "left": left,
  597. "top": top
  598. })
  599. });
  600. };
  601. }( jQuery ));
  602.  
  603.  
  604. $(window).resize(function(){
  605. $('.abtimg').responsify();
  606. })
  607.  
  608. $(document).ready(function(){
  609. $(window).load(function() {
  610. $('.abtimg').responsify();
  611. });
  612. });
  613.  
  614.  
  615. </script>
  616.  
  617.  
  618. <!-- Uncomment this if you want to use alternating theme colours
  619.  
  620. <script>
  621.  
  622. (function($) {
  623.  
  624. var url, hour = new Date().getHours();
  625. if (hour > 18 || hour < 8) {
  626. jQuery('body').addClass('night-mode');
  627. } else {
  628. jQuery('body').addClass('day-mode');
  629. }
  630.  
  631. }(jQuery));
  632.  
  633.  
  634. </script>
  635.  
  636. -->
  637.  
  638. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  639.  
  640. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  641. jQuery.noConflict();
  642. (function($){
  643.  
  644. $(document).ready(function(){
  645.  
  646. $("a[title],img[title],[title]").style_my_tooltips({
  647.  
  648. tip_follows_cursor:true,
  649.  
  650. tip_delay_time:30,
  651.  
  652. tip_fade_speed:300,
  653.  
  654. attribute:"title"
  655.  
  656. });
  657.  
  658. });
  659.  
  660. })(jQuery);
  661. </script>
  662.  
  663. </body>
  664. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!