API tools faq
paste
hermionemessi

About Me 01 v2

hermionemessi
Sep 9th, 2021 (edited)
514
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <!--Eudamia Page Pack: About Me 01 Arenza (with FAQ) 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. <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
  40.  
  41. <style type="text/css">
  42.  
  43. /*Customise stuff here*/
  44.  
  45. :root {
  46.  
  47. /*font size*/
  48. --fontsize:18px;
  49.  
  50. /*accent colours*/
  51. --accent: #53759b;
  52. --highlight: #cfe9f6;
  53.  
  54. /*accent colours with opacity*/
  55.  
  56. /*
  57. convert the accent & highlight hex codes to RGB values using the following website:
  58.  
  59. https://www.rapidtables.com/convert/color/hex-to-rgb.html
  60.  
  61. */
  62.  
  63. --accentalpha: 83, 117, 155;
  64. --highlightalpha: 207, 233, 246;
  65.  
  66. /* available blend modes:
  67.  
  68. - Normal
  69. - Multiply
  70. - Scren
  71. - Color Burn
  72. - Color Dodge
  73. - Overlay
  74. - Soft Light
  75. - Hard Light
  76. - Hue
  77. - Color
  78.  
  79.  
  80. */
  81.  
  82. --abtblend:multiply;
  83. --faqblend:multiply;
  84.  
  85.  
  86.  
  87. }
  88.  
  89. /*Available body fonts:
  90.  
  91. - Fira Sans
  92. - Open Sans
  93. - Karla
  94. - Source Sans Pro
  95.  
  96. */
  97.  
  98. body {
  99. font-family:'Fira Sans',sans-serif;
  100. }
  101.  
  102. /*Available heading fonts:
  103.  
  104. - Playfair Display
  105. - Elsie
  106. - Unna
  107. - Libre Baskerville
  108.  
  109. */
  110.  
  111. h1, h2, .tilter__title {font-family:'Playfair Display',serif;}
  112.  
  113. /*FAQ background*/
  114. article.faqbg {
  115. background-image: url('https://64.media.tumblr.com/7c29a2e824b9521c05054c115361f86f/4e8a6883106985ad-1d/s2048x3072/7a35f4e0e60ed72f6bdc469df7a3dfc53d9db1d0.jpg');
  116. }
  117.  
  118.  
  119.  
  120. </style>
  121.  
  122. <!--the rest of the CSS stylesheet-->
  123. <link rel="stylesheet" href="https://static.tumblr.com/hqib8pd/orEr5hqe4/eudamia-main-v2.css">
  124.  
  125. </head>
  126.  
  127. <!--How to use different theme modes: in the body tag below
  128.  
  129. Light theme: day-mode
  130. Dark theme: night-mode
  131. Alternating theme: remove day-mode / night-mode from the classname and uncomment the script at the end of the HTML
  132.  
  133. -->
  134. <body class="animsition day-mode">
  135.  
  136. <div class="topbar">
  137. <div class="topbar__inner">
  138.  
  139. <!--If you want to change the title, just replace the 3 "{Title}" below to your desired heading title-->
  140. <h1><a class="a-link tbrefresh" href="/">{Title}
  141. <span class="tbletters" data-letters="{Title}"></span>
  142. <span class="tbletters" data-letters="{Title}"></span>
  143. </a></h1>
  144.  
  145.  
  146. </div>
  147. </div>
  148.  
  149.  
  150. <main class="smooth">
  151. <div id="wrapper">
  152. <!--Posts and hero image-->
  153. <section class="tabs" id="tab1">
  154.  
  155. <div class="abt_cont">
  156. <article class="abtstuff hoverbox">
  157.  
  158. <a class="tilter tilter--4">
  159. <figure class="tilter__figure">
  160. <div class="abtimg">
  161.  
  162.  
  163.  
  164. <!--About Me section image-->
  165. <img class="tilter__image" src="https://64.media.tumblr.com/e97a64470998fd16b116b17f67fbab4c/4e8a6883106985ad-75/s2048x3072/38b3b295a1dde5bff3c30e2896ef1f2d847147ed.png"data-focus-x=".5" data-focus-y="0" />
  166. <!--/About Me section image-->
  167.  
  168.  
  169. </div>
  170. <div class="tilter__deco tilter__deco--shine"><div></div></div>
  171. <div class="tilter__deco tilter__deco--overlay"></div>
  172. <figcaption class="tilter__caption">
  173. <!--Name-->
  174. <h3 class="tilter__title">Name</h3>
  175. <!--/Name-->
  176.  
  177. <!--Short info-->
  178. <p class="tilter__description">some info here</p>
  179. <!--/Short info-->
  180.  
  181. </figcaption>
  182. <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415">
  183. <path d="M20.5,20.5h260v375h-260V20.5z" />
  184. </svg>
  185. </figure>
  186. </a>
  187.  
  188.  
  189.  
  190.  
  191. </article>
  192.  
  193. <article class="abtstuff biography">
  194. <h1>About Me</h1>
  195.  
  196. <!--Write your bio here-->
  197. <p>
  198. 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.
  199. </p>
  200.  
  201.  
  202. <!--Add bio quote if you want-->
  203. <p class="abtqt">
  204. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  205. </p>
  206.  
  207. <!--to add more paragraphs: add one more set of <p></p> to add one moreline of quote <p class="abtqt"></p> -->
  208.  
  209. <!--/to here -->
  210.  
  211. <nav class="abtlinks">
  212.  
  213. <!--About Me Link-->
  214. <a href="/" title="Link">
  215. <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>
  216. </a>
  217. <!--/About Me Link-->
  218.  
  219. <!--About Me Link-->
  220. <a href="/" title="Link">
  221. <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>
  222. </a>
  223. <!--/About Me Link-->
  224.  
  225. <!--About Me Link-->
  226. <a href="/" title="Link">
  227. <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>
  228. </a>
  229. <!--/About Me Link-->
  230.  
  231. </nav>
  232.  
  233. </article>
  234. </div>
  235.  
  236. <div class="faq_cont">
  237. <article class="faqstuff fask">
  238. <h1>FAQ</h1>
  239.  
  240. <div>
  241.  
  242. <!--Question + Answer 1-->
  243. <p class="tabq">This is a question?</p>
  244.  
  245. <p class="taba">This is an answer.</p>
  246.  
  247. <!--Question + Answer 2-->
  248. <p class="tabq">This is a question?</p>
  249.  
  250. <p class="taba">This is an answer.</p>
  251.  
  252. <!--Question + Answer 3-->
  253. <p class="tabq">This is a question?</p>
  254.  
  255. <p class="taba">This is an answer.</p>
  256.  
  257. <h2>{AskLabel}</h2>
  258. <p>
  259.  
  260. <iframe frameborder="0" scrolling="no" width="100%" height="320px" src="https://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="askbox"></iframe>
  261.  
  262. </p>
  263. </div>
  264.  
  265. </article>
  266. <article class="faqstuff faqbg"></article>
  267. </div>
  268.  
  269. <footer>
  270. <div>Theme by <a href="https://antoniosvivaldi.tumblr.com" class="a-link">antoniosvivaldi</a></div>
  271. </footer>
  272.  
  273. </section>
  274. <!--/Posts and hero image-->
  275.  
  276.  
  277.  
  278.  
  279.  
  280. </div>
  281. </main>
  282.  
  283.  
  284. <!--Please do not alter the credit!-->
  285. <div id="athena_wrapper">
  286. <a class="a-link" href="https://antoniosvivaldi.tumblr.com"><span>thm</span></a>
  287. </div>
  288. <!--/credit-->
  289.  
  290. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  291. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>
  292. <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
  293.  
  294. <script>
  295. /**
  296. * main.js
  297. * http://www.codrops.com
  298. *
  299. * Licensed under the MIT license.
  300. * http://www.opensource.org/licenses/mit-license.php
  301. *
  302. * Copyright 2016, Codrops
  303. * http://www.codrops.com
  304. */
  305. ;(function(window) {
  306.  
  307. 'use strict';
  308.  
  309. // Helper vars and functions.
  310. function extend( a, b ) {
  311. for( var key in b ) {
  312. if( b.hasOwnProperty( key ) ) {
  313. a[key] = b[key];
  314. }
  315. }
  316. return a;
  317. }
  318.  
  319. // from http://www.quirksmode.org/js/events_properties.html#position
  320. function getMousePos(e) {
  321. var posx = 0, posy = 0;
  322. if (!e) var e = window.event;
  323. if (e.pageX || e.pageY) {
  324. posx = e.pageX;
  325. posy = e.pageY;
  326. }
  327. else if (e.clientX || e.clientY) {
  328. posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  329. posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
  330. }
  331. return { x : posx, y : posy }
  332. }
  333.  
  334. /**
  335. * TiltFx obj.
  336. */
  337. function TiltFx(el, options) {
  338. this.DOM = {};
  339. this.DOM.el = el;
  340. this.options = extend({}, this.options);
  341. extend(this.options, options);
  342. this._init();
  343. }
  344.  
  345. TiltFx.prototype.options = {
  346. movement: {
  347. imgWrapper : {
  348. translation : {x: 0, y: 0, z: 0},
  349. rotation : {x: -5, y: 5, z: 0},
  350. reverseAnimation : {
  351. duration : 1200,
  352. easing : 'easeOutElastic',
  353. elasticity : 600
  354. }
  355. },
  356. lines : {
  357. translation : {x: 10, y: 10, z: [0,10]},
  358. reverseAnimation : {
  359. duration : 1000,
  360. easing : 'easeOutExpo',
  361. elasticity : 600
  362. }
  363. },
  364. caption : {
  365. translation : {x: 20, y: 20, z: 0},
  366. rotation : {x: 0, y: 0, z: 0},
  367. reverseAnimation : {
  368. duration : 1500,
  369. easing : 'easeOutElastic',
  370. elasticity : 600
  371. }
  372. },
  373. /*
  374. overlay : {
  375. translation : {x: 10, y: 10, z: [0,50]},
  376. reverseAnimation : {
  377. duration : 500,
  378. easing : 'easeOutExpo'
  379. }
  380. },
  381. */
  382. shine : {
  383. translation : {x: 50, y: 50, z: 0},
  384. reverseAnimation : {
  385. duration : 1200,
  386. easing : 'easeOutElastic',
  387. elasticity: 600
  388. }
  389. }
  390. }
  391. };
  392.  
  393. /**
  394. * Init.
  395. */
  396. TiltFx.prototype._init = function() {
  397. this.DOM.animatable = {};
  398. this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.tilter__figure');
  399. this.DOM.animatable.lines = this.DOM.el.querySelector('.tilter__deco--lines');
  400. this.DOM.animatable.caption = this.DOM.el.querySelector('.tilter__caption');
  401. this.DOM.animatable.overlay = this.DOM.el.querySelector('.tilter__deco--overlay');
  402. this.DOM.animatable.shine = this.DOM.el.querySelector('.tilter__deco--shine > div');
  403. this._initEvents();
  404. };
  405.  
  406. /**
  407. * Init/Bind events.
  408. */
  409. TiltFx.prototype._initEvents = function() {
  410. var self = this;
  411.  
  412. this.mouseenterFn = function() {
  413. for(var key in self.DOM.animatable) {
  414. anime.remove(self.DOM.animatable[key]);
  415. }
  416. };
  417.  
  418. this.mousemoveFn = function(ev) {
  419. requestAnimationFrame(function() { self._layout(ev); });
  420. };
  421.  
  422. this.mouseleaveFn = function(ev) {
  423. requestAnimationFrame(function() {
  424. for(var key in self.DOM.animatable) {
  425. if( self.options.movement[key] == undefined ) {continue;}
  426. anime({
  427. targets: self.DOM.animatable[key],
  428. duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1,
  429. easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear',
  430. elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null,
  431. scaleX: 1,
  432. scaleY: 1,
  433. scaleZ: 1,
  434. translateX: 0,
  435. translateY: 0,
  436. translateZ: 0,
  437. rotateX: 0,
  438. rotateY: 0,
  439. rotateZ: 0
  440. });
  441. }
  442. });
  443. };
  444.  
  445. this.DOM.el.addEventListener('mousemove', this.mousemoveFn);
  446. this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
  447. this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
  448. };
  449.  
  450. TiltFx.prototype._layout = function(ev) {
  451. // Mouse position relative to the document.
  452. var mousepos = getMousePos(ev),
  453. // Document scrolls.
  454. docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop},
  455. bounds = this.DOM.el.getBoundingClientRect(),
  456. // Mouse position relative to the main element (this.DOM.el).
  457. relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top };
  458.  
  459. // Movement settings for the animatable elements.
  460. for(var key in this.DOM.animatable) {
  461. if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) {
  462. continue;
  463. }
  464. var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  465. r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0},
  466. setRange = function (obj) {
  467. for(var k in obj) {
  468. if( obj[k] == undefined ) {
  469. obj[k] = [0,0];
  470. }
  471. else if( typeof obj[k] === 'number' ) {
  472. obj[k] = [-1*obj[k],obj[k]];
  473. }
  474. }
  475. };
  476.  
  477. setRange(t);
  478. setRange(r);
  479.  
  480. var transforms = {
  481. translation : {
  482. x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0],
  483. y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0],
  484. z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0],
  485. },
  486. rotation : {
  487. x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
  488. y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
  489. z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
  490. }
  491. };
  492.  
  493. 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)';
  494. }
  495. };
  496.  
  497. window.TiltFx = TiltFx;
  498.  
  499. })(window);
  500. </script>
  501. <script>
  502. (function() {
  503. var tiltSettings = [
  504. {
  505. movement: {
  506. imgWrapper : {
  507. rotation : {x: -5, y: 10, z: 0},
  508. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  509. },
  510. caption : {
  511. translation : {x: 20, y: 20, z: 0},
  512. reverseAnimation : {duration : 200, easing : 'easeOutQuad'}
  513. },
  514. overlay : {
  515. translation : {x: 5, y: -5, z: 0},
  516. rotation : {x: 0, y: 0, z: 6},
  517. reverseAnimation : {duration : 1000, easing : 'easeOutQuad'}
  518. },
  519. shine : {
  520. translation : {x: 50, y: 50, z: 0},
  521. reverseAnimation : {duration : 50, easing : 'easeOutQuad'}
  522. }
  523. }
  524. },{}];
  525.  
  526. function init() {
  527. var idx = 0;
  528. [].slice.call(document.querySelectorAll('a.tilter')).forEach(function(el, pos) {
  529. idx = pos%2 === 0 ? idx+1 : idx;
  530. new TiltFx(el, tiltSettings[idx-1]);
  531. });
  532. }
  533.  
  534. // Preload all images.
  535. imagesLoaded(document.querySelector('main'), function() {
  536. document.body.classList.remove('loading');
  537. init();
  538. });
  539.  
  540.  
  541. })();
  542. </script>
  543.  
  544.  
  545.  
  546. <!-- animsition.js -->
  547. <script src="https://cdnjs.cloudflare.com/ajax/libs/animsition/4.0.1/js/animsition.min.js"></script>
  548.  
  549.  
  550. <script>
  551. $(document).ready(function() {
  552.  
  553. $(".animsition").animsition({
  554. inClass: 'fade-in',
  555. outClass: 'fade-out',
  556. inDuration: 1500,
  557. outDuration: 800,
  558. linkElement: '.a-link',
  559. loading: true,
  560. loadingParentElement: 'body',
  561. loadingClass: 'animsition-loading',
  562. loadingInner: '',
  563. timeout: true,
  564. timeoutCountdown: 3000,
  565. onLoadEvent: true,
  566. browser: [ 'animation-duration', '-webkit-animation-duration'],
  567. overlay : false,
  568. overlayClass : 'animsition-overlay-slide',
  569. overlayParentElement : 'body',
  570. transition: function(url){ window.location.href = url; }
  571. });
  572.  
  573.  
  574. });
  575.  
  576. </script>
  577.  
  578.  
  579. <script>
  580. (function ( $ ) {
  581. $.fn.responsify = function() {
  582. return this.each(function() {
  583. var owdith, oheight,
  584. twidth, theight,
  585. fx, fy,
  586. width, height, top, left;
  587.  
  588. owidth = $('img', this).width();
  589. oheight = $('img', this).height();
  590. twidth = $(this).width();
  591. theight = $(this).height();
  592. fx = $('img', this).attr('data-focus-x');
  593. fy = $('img', this).attr('data-focus-y');
  594.  
  595. if( owidth/oheight > twidth/theight ) {
  596. height = theight;
  597. width = theight*owidth/oheight;
  598. var fleft = Number(fx) * width;
  599. var fright = width - Number(fx) * width;
  600. if (fleft < twidth/2) {
  601. left = 0;
  602. }
  603. else if (fleft >= twidth/2 && fright >= twidth/2) {
  604. left = twidth/2 - fleft;
  605. }
  606. else if (fleft >= twidth/2 && fright < twidth/2) {
  607. left = twidth - width;
  608. }
  609. top = 0;
  610. }
  611. else if( owidth/oheight <= twidth/theight ) {
  612. width = twidth;
  613. height = twidth*oheight/owidth;
  614. var ftop = Number(fy) * height;
  615. var fbottom = height - Number(fy) * height;
  616. if (ftop < theight/2) {
  617. top = 0;
  618. }
  619. else if (ftop >= theight/2 && fbottom >= theight/2) {
  620. top = theight/2 - ftop;
  621. }
  622. else if (ftop >= theight/2 && fbottom < theight/2) {
  623. top = theight - height;
  624. }
  625. left = 0;
  626. }
  627. $(this).css({
  628. "overflow": "hidden"
  629. })
  630. $('img', this).css({
  631. "position": "relative",
  632. "height": height,
  633. "width": width,
  634. "left": left,
  635. "top": top
  636. })
  637. });
  638. };
  639. }( jQuery ));
  640.  
  641.  
  642. $(window).resize(function(){
  643. $('.abtimg').responsify();
  644. })
  645.  
  646. $(document).ready(function(){
  647. $(window).load(function() {
  648. $('.abtimg').responsify();
  649. });
  650. });
  651.  
  652.  
  653. </script>
  654.  
  655.  
  656.  
  657.  
  658. <!-- Uncomment this if you want to use alternating theme colours
  659.  
  660. <script>
  661.  
  662. (function($) {
  663.  
  664. var url, hour = new Date().getHours();
  665. if (hour > 18 || hour < 8) {
  666. jQuery('body').addClass('night-mode');
  667. } else {
  668. jQuery('body').addClass('day-mode');
  669. }
  670.  
  671. }(jQuery));
  672.  
  673.  
  674. </script>
  675.  
  676. -->
  677.  
  678. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  679.  
  680. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script><script>
  681. jQuery.noConflict();
  682. (function($){
  683.  
  684. $(document).ready(function(){
  685.  
  686. $("a[title],img[title],[title]").style_my_tooltips({
  687.  
  688. tip_follows_cursor:true,
  689.  
  690. tip_delay_time:30,
  691.  
  692. tip_fade_speed:300,
  693.  
  694. attribute:"title"
  695.  
  696. });
  697.  
  698. });
  699.  
  700. })(jQuery);
  701. </script>
  702.  
  703. </body>
  704. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
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!