mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-10-28 07:41:22 +00:00
first commit
This commit is contained in:
commit
882f91ebf6
335 files changed
+34705
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TD - Drear</title>
|
||||
<meta name="description" content="Website for horror movie - DREAR." />
|
||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
||||
<meta name="author" content="Tomas Dvorak" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
||||
</head>
|
||||
<body class="loading">
|
||||
<main>
|
||||
<div class="frame">
|
||||
<div class="frame__title-wrap">
|
||||
</div>
|
||||
<div class="frame__indicator"></div>
|
||||
</div>
|
||||
<div class="strip-outer">
|
||||
<div class="strip-inner">
|
||||
<div class="draggable"></div>
|
||||
<div class="strip">
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-cover">
|
||||
<h2 class="strip-cover__title">DREAR</h2>
|
||||
<span class="strip-cover__subtitle">coming in 2028</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Assemblage</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Wherewithal</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Surreptitious</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Nemesis</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Penumbra</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Propinquity</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Lissome</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Moiety</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Mondegreen</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Gambol</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Forbearance</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Evanescent</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Embrocation</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Bucolic</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Eloquence</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="cursor">
|
||||
<div class="cursor__inner cursor__inner--circle">
|
||||
<div class="cursor__side cursor__side--left"></div>
|
||||
<div class="cursor__side cursor__side--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/TweenMax.min.js"></script>
|
||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script>
|
||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>TD - Chmur</title>
|
||||
<meta name="description" content="Stránka pro horrorový film - CHMUR." />
|
||||
<meta name="keywords" content="horror, movie, drear, chmur, td, tomas dvorak" />
|
||||
<meta name="author" content="Tomas Dvorak" />
|
||||
<link rel="stylesheet" type="text/css" href="style.css" />
|
||||
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
|
||||
</head>
|
||||
<body class="loading">
|
||||
<main>
|
||||
<div class="frame">
|
||||
<div class="frame__title-wrap">
|
||||
</div>
|
||||
<div class="frame__indicator"></div>
|
||||
</div>
|
||||
<div class="strip-outer">
|
||||
<div class="strip-inner">
|
||||
<div class="draggable"></div>
|
||||
<div class="strip">
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
<div class="strip__item">
|
||||
<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/placeholder.png');"></div></div>
|
||||
<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="strip-cover">
|
||||
<h2 class="strip-cover__title">CHMUR</h2>
|
||||
<span class="strip-cover__subtitle">v kinech 2028</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Assemblage</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Wherewithal</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Surreptitious</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Onomatopoeia</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Nemesis</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Penumbra</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Propinquity</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Lissome</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Moiety</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Mondegreen</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Gambol</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Forbearance</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Evanescent</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Embrocation</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Bucolic</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Eloquence</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="content__item">
|
||||
<div class="img-outer img-outer--content">
|
||||
<div class="img-inner img-inner--content" style="background-image: url(img/placeholder.png);"></div>
|
||||
</div>
|
||||
<div class="content__item-copy">
|
||||
<h2 class="content__item-title">Cathedral</h2>
|
||||
<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
|
||||
</div>
|
||||
</article>
|
||||
<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"/></svg></svg></button>
|
||||
</div>
|
||||
</main>
|
||||
<div class="cursor">
|
||||
<div class="cursor__inner cursor__inner--circle">
|
||||
<div class="cursor__side cursor__side--left"></div>
|
||||
<div class="cursor__side cursor__side--right"></div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="js/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="js/TweenMax.min.js"></script>
|
||||
<script src="js/draggabilly.pkgd.min.js"></script>
|
||||
<script src="js/demo.js"></script>
|
||||
<script>
|
||||
imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
+17
@@ -0,0 +1,17 @@
|
||||
/*!
|
||||
* VERSION: 2.1.2
|
||||
* DATE: 2019-03-01
|
||||
* UPDATES AND DOCS AT: http://greensock.com
|
||||
*
|
||||
* Includes all of the following: TweenLite, TweenMax, TimelineLite, TimelineMax, EasePack, CSSPlugin, RoundPropsPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin
|
||||
*
|
||||
* @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
|
||||
* This work is subject to the terms at http://greensock.com/standard-license or for
|
||||
* Club GreenSock members, the software agreement that was issued with your membership.
|
||||
*
|
||||
* @author: Jack Doyle, [email protected]
|
||||
**/
|
||||
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("TweenMax",["core.Animation","core.SimpleTimeline","TweenLite"],function(a,b,c){var d=function(a){var b,c=[],d=a.length;for(b=0;b!==d;c.push(a[b++]));return c},e=function(a,b,c){var d,e,f=a.cycle;for(d in f)e=f[d],a[d]="function"==typeof e?e(c,b[c],b):e[c%e.length];delete a.cycle},f=function(a){if("function"==typeof a)return a;var b="object"==typeof a?a:{each:a},c=b.ease,d=b.from||0,e=b.base||0,f={},g=isNaN(d),h=b.axis,i={center:.5,end:1}[d]||0;return function(a,j,k){var l,m,n,o,p,q,r,s,t,u=(k||b).length,v=f[u];if(!v){if(t="auto"===b.grid?0:(b.grid||[1/0])[0],!t){for(r=-(1/0);r<(r=k[t++].getBoundingClientRect().left)&&u>t;);t--}for(v=f[u]=[],l=g?Math.min(t,u)*i-.5:d%t,m=g?u*i/t-.5:d/t|0,r=0,s=1/0,q=0;u>q;q++)n=q%t-l,o=m-(q/t|0),v[q]=p=h?Math.abs("y"===h?o:n):Math.sqrt(n*n+o*o),p>r&&(r=p),s>p&&(s=p);v.max=r-s,v.min=s,v.v=u=b.amount||b.each*(t>u?u:h?"y"===h?u/t:t:Math.max(t,u/t))||0,v.b=0>u?e-u:e}return u=(v[a]-v.min)/v.max,v.b+(c?c.getRatio(u):u)*v.v}},g=function(a,b,d){c.call(this,a,b,d),this._cycle=0,this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._repeat&&this._uncache(!0),this.render=g.prototype.render},h=1e-8,i=c._internals,j=i.isSelector,k=i.isArray,l=g.prototype=c.to({},.1,{}),m=[];g.version="2.1.2",l.constructor=g,l.kill()._gc=!1,g.killTweensOf=g.killDelayedCallsTo=c.killTweensOf,g.getTweensOf=c.getTweensOf,g.lagSmoothing=c.lagSmoothing,g.ticker=c.ticker,g.render=c.render,g.distribute=f,l.invalidate=function(){return this._yoyo=this.vars.yoyo===!0||!!this.vars.yoyoEase,this._repeat=this.vars.repeat||0,this._repeatDelay=this.vars.repeatDelay||0,this._yoyoEase=null,this._uncache(!0),c.prototype.invalidate.call(this)},l.updateTo=function(a,b){var d,e=this,f=e.ratio,g=e.vars.immediateRender||a.immediateRender;b&&e._startTime<e._timeline._time&&(e._startTime=e._timeline._time,e._uncache(!1),e._gc?e._enabled(!0,!1):e._timeline.insert(e,e._startTime-e._delay));for(d in a)e.vars[d]=a[d];if(e._initted||g)if(b)e._initted=!1,g&&e.render(0,!0,!0);else if(e._gc&&e._enabled(!0,!1),e._notifyPluginsOfEnabled&&e._firstPT&&c._onPluginEvent("_onDisable",e),e._time/e._duration>.998){var h=e._totalTime;e.render(0,!0,!1),e._initted=!1,e.render(h,!0,!1)}else if(e._initted=!1,e._init(),e._time>0||g)for(var i,j=1/(1-f),k=e._firstPT;k;)i=k.s+k.c,k.c*=j,k.s=i-k.c,k=k._next;return e},l.render=function(a,b,d){this._initted||0===this._duration&&this.vars.repeat&&this.invalidate();var e,f,g,j,k,l,m,n,o,p=this,q=p._dirty?p.totalDuration():p._totalDuration,r=p._time,s=p._totalTime,t=p._cycle,u=p._duration,v=p._rawPrevTime;if(a>=q-h&&a>=0?(p._totalTime=q,p._cycle=p._repeat,p._yoyo&&0!==(1&p._cycle)?(p._time=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0):(p._time=u,p.ratio=p._ease._calcEnd?p._ease.getRatio(1):1),p._reversed||(e=!0,f="onComplete",d=d||p._timeline.autoRemoveChildren),0===u&&(p._initted||!p.vars.lazy||d)&&(p._startTime===p._timeline._duration&&(a=0),(0>v||0>=a&&a>=-h||v===h&&"isPause"!==p.data)&&v!==a&&(d=!0,v>h&&(f="onReverseComplete")),p._rawPrevTime=n=!b||a||v===a?a:h)):h>a?(p._totalTime=p._time=p._cycle=0,p.ratio=p._ease._calcEnd?p._ease.getRatio(0):0,(0!==s||0===u&&v>0)&&(f="onReverseComplete",e=p._reversed),a>-h?a=0:0>a&&(p._active=!1,0===u&&(p._initted||!p.vars.lazy||d)&&(v>=0&&(d=!0),p._rawPrevTime=n=!b||a||v===a?a:h)),p._initted||(d=!0)):(p._totalTime=p._time=a,0!==p._repeat&&(j=u+p._repeatDelay,p._cycle=p._totalTime/j>>0,0!==p._cycle&&p._cycle===p._totalTime/j&&a>=s&&p._cycle--,p._time=p._totalTime-p._cycle*j,p._yoyo&&0!==(1&p._cycle)&&(p._time=u-p._time,o=p._yoyoEase||p.vars.yoyoEase,o&&(p._yoyoEase||(o!==!0||p._initted?p._yoyoEase=o=o===!0?p._ease:o instanceof Ease?o:Ease.map[o]:(o=p.vars.ease,p._yoyoEase=o=o?o instanceof Ease?o:"function"==typeof o?new Ease(o,p.vars.easeParams):Ease.map[o]||c.defaultEase:c.defaultEase)),p.ratio=o?1-o.getRatio((u-p._time)/u):0)),p._time>u?p._time=u:p._time<0&&(p._time=0)),p._easeType&&!o?(k=p._time/u,l=p._easeType,m=p._easePower,(1===l||3===l&&k>=.5)&&(k=1-k),3===l&&(k*=2),1===m?k*=k:2===m?k*=k*k:3===m?k*=k*k*k:4===m&&(k*=k*k*k*k),p.ratio=1===l?1-k:2===l?k:p._time/u<.5?k/2:1-k/2):o||(p.ratio=p._ease.getRatio(p._time/u))),r===p._time&&!d&&t===p._cycle)return void(s!==p._totalTime&&p._onUpdate&&(b||p._callback("onUpdate")));if(!p._initted){if(p._init(),!p._initted||p._gc)return;if(!d&&p._firstPT&&(p.vars.lazy!==!1&&p._duration||p.vars.lazy&&!p._duration))return p._time=r,p._totalTime=s,p._rawPrevTime=v,p._cycle=t,i.lazyTweens.push(p),void(p._lazy=[a,b]);!p._time||e||o?e&&this._ease._calcEnd&&!o&&(p.ratio=p._ease.getRatio(0===p._time?0:1)):p.ratio=p._ease.getRatio(p._time/u)}for(p._lazy!==!1&&(p._lazy=!1),p._active||!p._paused&&p._time!==r&&a>=0&&(p._active=!0),0===s&&(2===p._initted&&a>0&&p._init(Line truncated
|
||||
}for(n=w.length,q=g?4:1;--n>-1;)o=w[n],p=v[o],j(p,f,g,i,e[o]),t&&(p.splice(0,q),p.splice(p.length-q,q));return v},m=function(a,b,c){b=b||"soft";var d,e,f,h,i,j,k,l,m,n,o,p={},q="cubic"===b?3:2,r="soft"===b,s=[];if(r&&c&&(a=[c].concat(a)),null==a||a.length<q+1)throw"invalid Bezier data";for(m in a[0])s.push(m);for(j=s.length;--j>-1;){for(m=s[j],p[m]=i=[],n=0,l=a.length,k=0;l>k;k++)d=null==c?a[k][m]:"string"==typeof(o=a[k][m])&&"="===o.charAt(1)?c[m]+Number(o.charAt(0)+o.substr(2)):Number(o),r&&k>1&&l-1>k&&(i[n++]=(d+i[n-2])/2),i[n++]=d;for(l=n-q+1,n=0,k=0;l>k;k+=q)d=i[k],e=i[k+1],f=i[k+2],h=2===q?0:i[k+3],i[n++]=o=3===q?new g(d,e,f,h):new g(d,(2*e+d)/3,(2*e+f)/3,f);i.length=n}return p},n=function(a,b,c){for(var d,e,f,g,h,i,j,k,l,m,n,o=1/c,p=a.length;--p>-1;)for(m=a[p],f=m.a,g=m.d-f,h=m.c-f,i=m.b-f,d=e=0,k=1;c>=k;k++)j=o*k,l=1-j,d=e-(e=(j*j*g+3*l*(j*h+l*i))*j),n=p*c+k-1,b[n]=(b[n]||0)+d*d},o=function(a,b){b=b>>0||6;var c,d,e,f,g=[],h=[],i=0,j=0,k=b-1,l=[],m=[];for(c in a)n(a[c],g,b);for(e=g.length,d=0;e>d;d++)i+=Math.sqrt(g[d]),f=d%b,m[f]=i,f===k&&(j+=i,f=d/b>>0,l[f]=m,h[f]=j,i=0,m=[]);return{length:j,lengths:h,segments:l}},p=_gsScope._gsDefine.plugin({propName:"bezier",priority:-1,version:"1.3.8",API:2,global:!0,init:function(a,b,c){this._target=a,b instanceof Array&&(b={values:b}),this._func={},this._mod={},this._props=[],this._timeRes=null==b.timeResolution?6:parseInt(b.timeResolution,10);var d,e,f,g,h,i=b.values||[],j={},k=i[0],n=b.autoRotate||c.vars.orientToBezier;this._autoRotate=n?n instanceof Array?n:[["x","y","rotation",n===!0?0:Number(n)||0]]:null;for(d in k)this._props.push(d);for(f=this._props.length;--f>-1;)d=this._props[f],this._overwriteProps.push(d),e=this._func[d]="function"==typeof a[d],j[d]=e?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]():parseFloat(a[d]),h||j[d]!==i[0][d]&&(h=j);if(this._beziers="cubic"!==b.type&&"quadratic"!==b.type&&"soft"!==b.type?l(i,isNaN(b.curviness)?1:b.curviness,!1,"thruBasic"===b.type,b.correlate,h):m(i,b.type,j),this._segCount=this._beziers[d].length,this._timeRes){var p=o(this._beziers,this._timeRes);this._length=p.length,this._lengths=p.lengths,this._segments=p.segments,this._l1=this._li=this._s1=this._si=0,this._l2=this._lengths[0],this._curSeg=this._segments[0],this._s2=this._curSeg[0],this._prec=1/this._curSeg.length}if(n=this._autoRotate)for(this._initialRotations=[],n[0]instanceof Array||(this._autoRotate=n=[n]),f=n.length;--f>-1;){for(g=0;3>g;g++)d=n[f][g],this._func[d]="function"==typeof a[d]?a[d.indexOf("set")||"function"!=typeof a["get"+d.substr(3)]?d:"get"+d.substr(3)]:!1;d=n[f][2],this._initialRotations[f]=(this._func[d]?this._func[d].call(this._target):this._target[d])||0,this._overwriteProps.push(d)}return this._startRatio=c.vars.runBackwards?1:0,!0},set:function(b){var c,d,e,f,g,h,i,j,k,l,m=this._segCount,n=this._func,o=this._target,p=b!==this._startRatio;if(this._timeRes){if(k=this._lengths,l=this._curSeg,b*=this._length,e=this._li,b>this._l2&&m-1>e){for(j=m-1;j>e&&(this._l2=k[++e])<=b;);this._l1=k[e-1],this._li=e,this._curSeg=l=this._segments[e],this._s2=l[this._s1=this._si=0]}else if(b<this._l1&&e>0){for(;e>0&&(this._l1=k[--e])>=b;);0===e&&b<this._l1?this._l1=0:e++,this._l2=k[e],this._li=e,this._curSeg=l=this._segments[e],this._s1=l[(this._si=l.length-1)-1]||0,this._s2=l[this._si]}if(c=e,b-=this._l1,e=this._si,b>this._s2&&e<l.length-1){for(j=l.length-1;j>e&&(this._s2=l[++e])<=b;);this._s1=l[e-1],this._si=e}else if(b<this._s1&&e>0){for(;e>0&&(this._s1=l[--e])>=b;);0===e&&b<this._s1?this._s1=0:e++,this._s2=l[e],this._si=e}h=(e+(b-this._s1)/(this._s2-this._s1))*this._prec||0}else c=0>b?0:b>=1?m-1:m*b>>0,h=(b-c*(1/m))*m;for(d=1-h,e=this._props.length;--e>-1;)f=this._props[e],g=this._beziers[f][c],i=(h*h*g.da+3*d*(h*g.ca+d*g.ba))*h+g.a,this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i;if(this._autoRotate){var q,r,s,t,u,v,w,x=this._autoRotate;for(e=x.length;--e>-1;)f=x[e][2],v=x[e][3]||0,w=x[e][4]===!0?1:a,g=this._beziers[x[e][0]],q=this._beziers[x[e][1]],g&&q&&(g=g[c],q=q[c],r=g.a+(g.b-g.a)*h,t=g.b+(g.c-g.b)*h,r+=(t-r)*h,t+=(g.c+(g.d-g.c)*h-t)*h,s=q.a+(q.b-q.a)*h,u=q.b+(q.c-q.b)*h,s+=(u-s)*h,u+=(q.c+(q.d-q.c)*h-u)*h,i=p?Math.atan2(u-s,t-r)*w+v:this._initialRotations[e],this._mod[f]&&(i=this._mod[f](i,o)),n[f]?o[f](i):o[f]=i)}}}),q=p.prototype;p.bezierThrough=l,p.cubicToQuadratic=i,p._autoCSS=!0,p.quadraticToCubic=function(a,b,c){return new g(a,(2*b+a)/3,(2*b+c)/3,c)},p._cssRegister=function(){var a=f.CSSPlugin;if(a){var b=a._internals,c=b._parseToProxy,d=b._setPluginRatio,e=b.CSSPropTween;b._registerComplexSpecialProp("bezier",{parser:function(a,b,f,g,h,i){b instanceof Array&&(b={values:b}),i=new p;var j,k,l,m=b.values,n=m.length-1,o=[],q={};if(0>n)return h;for(j=0;n>=j;j++)l=c(a,m[j],g,h,i,n!==j),o[j]=l.end;for(k in b)q[k]=b[k];return q.values=o,h=new e(a,"bezier",0,0,l.pt,2),h.data=l,h.plugin=i,h.setRatio=d,0===q.autoRotate&&(q.autoRotate=!0),!q.autoRotate||q.autoRotate instanceof Array||(j=q.autoRotate==Line truncated
|
||||
j.scaleX=j.scaleY=j.scaleZ=1,za("transform,scale,scaleX,scaleY,scaleZ,x,y,z,rotation,rotationX,rotationY,rotationZ,skewX,skewY,shortRotation,shortRotationX,shortRotationY,shortRotationZ,transformOrigin,svgOrigin,transformPerspective,directionalRotation,parseTransform,force3D,skewType,xPercent,yPercent,smoothOrigin",{parser:function(a,b,c,d,f,h,i){if(d._lastParsedTransform===i)return f;d._lastParsedTransform=i;var j=i.scale&&"function"==typeof i.scale?i.scale:0;j&&(i.scale=j(r,a));var k,l,m,n,o,p,s,t,u,v=a._gsTransform,w=a.style,x=1e-6,y=Ca.length,z=i,A={},B="transformOrigin",C=Sa(a,e,!0,z.parseTransform),D=z.transform&&("function"==typeof z.transform?z.transform(r,q):z.transform);if(C.skewType=z.skewType||C.skewType||g.defaultSkewType,d._transform=C,"rotationZ"in z&&(z.rotation=z.rotationZ),D&&"string"==typeof D&&Da)l=Q.style,l[Da]=D,l.display="block",l.position="absolute",-1!==D.indexOf("%")&&(l.width=aa(a,"width"),l.height=aa(a,"height")),O.body.appendChild(Q),k=Sa(Q,null,!1),"simple"===C.skewType&&(k.scaleY*=Math.cos(k.skewX*K)),C.svg&&(p=C.xOrigin,s=C.yOrigin,k.x-=C.xOffset,k.y-=C.yOffset,(z.transformOrigin||z.svgOrigin)&&(D={},Ma(a,ia(z.transformOrigin),D,z.svgOrigin,z.smoothOrigin,!0),p=D.xOrigin,s=D.yOrigin,k.x-=D.xOffset-C.xOffset,k.y-=D.yOffset-C.yOffset),(p||s)&&(t=Ra(Q,!0),k.x-=p-(p*t[0]+s*t[2]),k.y-=s-(p*t[1]+s*t[3]))),O.body.removeChild(Q),k.perspective||(k.perspective=C.perspective),null!=z.xPercent&&(k.xPercent=ka(z.xPercent,C.xPercent)),null!=z.yPercent&&(k.yPercent=ka(z.yPercent,C.yPercent));else if("object"==typeof z){if(k={scaleX:ka(null!=z.scaleX?z.scaleX:z.scale,C.scaleX),scaleY:ka(null!=z.scaleY?z.scaleY:z.scale,C.scaleY),scaleZ:ka(z.scaleZ,C.scaleZ),x:ka(z.x,C.x),y:ka(z.y,C.y),z:ka(z.z,C.z),xPercent:ka(z.xPercent,C.xPercent),yPercent:ka(z.yPercent,C.yPercent),perspective:ka(z.transformPerspective,C.perspective)},o=z.directionalRotation,null!=o)if("object"==typeof o)for(l in o)z[l]=o[l];else z.rotation=o;"string"==typeof z.x&&-1!==z.x.indexOf("%")&&(k.x=0,k.xPercent=ka(z.x,C.xPercent)),"string"==typeof z.y&&-1!==z.y.indexOf("%")&&(k.y=0,k.yPercent=ka(z.y,C.yPercent)),k.rotation=la("rotation"in z?z.rotation:"shortRotation"in z?z.shortRotation+"_short":C.rotation,C.rotation,"rotation",A),Ga&&(k.rotationX=la("rotationX"in z?z.rotationX:"shortRotationX"in z?z.shortRotationX+"_short":C.rotationX||0,C.rotationX,"rotationX",A),k.rotationY=la("rotationY"in z?z.rotationY:"shortRotationY"in z?z.shortRotationY+"_short":C.rotationY||0,C.rotationY,"rotationY",A)),k.skewX=la(z.skewX,C.skewX),k.skewY=la(z.skewY,C.skewY)}for(Ga&&null!=z.force3D&&(C.force3D=z.force3D,n=!0),m=C.force3D||C.z||C.rotationX||C.rotationY||k.z||k.rotationX||k.rotationY||k.perspective,m||null==z.scale||(k.scaleZ=1);--y>-1;)u=Ca[y],D=k[u]-C[u],(D>x||-x>D||null!=z[u]||null!=M[u])&&(n=!0,f=new ua(C,u,C[u],D,f),u in A&&(f.e=A[u]),f.xs0=0,f.plugin=h,d._overwriteProps.push(f.n));return D="function"==typeof z.transformOrigin?z.transformOrigin(r,q):z.transformOrigin,C.svg&&(D||z.svgOrigin)&&(p=C.xOffset,s=C.yOffset,Ma(a,ia(D),k,z.svgOrigin,z.smoothOrigin),f=va(C,"xOrigin",(v?C:k).xOrigin,k.xOrigin,f,B),f=va(C,"yOrigin",(v?C:k).yOrigin,k.yOrigin,f,B),(p!==C.xOffset||s!==C.yOffset)&&(f=va(C,"xOffset",v?p:C.xOffset,C.xOffset,f,B),f=va(C,"yOffset",v?s:C.yOffset,C.yOffset,f,B)),D="0px 0px"),(D||Ga&&m&&C.zOrigin)&&(Da?(n=!0,u=Fa,D||(D=(aa(a,u,e,!1,"50% 50%")+"").split(" "),D=D[0]+" "+D[1]+" "+C.zOrigin+"px"),D+="",f=new ua(w,u,0,0,f,-1,B),f.b=w[u],f.plugin=h,Ga?(l=C.zOrigin,D=D.split(" "),C.zOrigin=(D.length>2?parseFloat(D[2]):l)||0,f.xs0=f.e=D[0]+" "+(D[1]||"50%")+" 0px",f=new ua(C,"zOrigin",0,0,f,-1,f.n),f.b=l,f.xs0=f.e=C.zOrigin):f.xs0=f.e=D):ia(D+"",C)),n&&(d._transformType=C.svg&&Ba||!m&&3!==this._transformType?2:3),j&&(i.scale=j),f},allowFunc:!0,prefix:!0}),za("boxShadow",{defaultValue:"0px 0px 0px 0px #999",prefix:!0,color:!0,multi:!0,keyword:"inset"}),za("clipPath",{defaultValue:"inset(0px)",prefix:!0,multi:!0,formatter:ra("inset(0px 0px 0px 0px)",!1,!0)}),za("borderRadius",{defaultValue:"0px",parser:function(a,b,c,f,g,h){b=this.format(b);var i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y=["borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius"],z=a.style;for(q=parseFloat(a.offsetWidth),r=parseFloat(a.offsetHeight),i=b.split(" "),j=0;j<y.length;j++)this.p.indexOf("border")&&(y[j]=Z(y[j])),m=l=aa(a,y[j],e,!1,"0px"),-1!==m.indexOf(" ")&&(l=m.split(" "),m=l[0],l=l[1]),n=k=i[j],o=parseFloat(m),t=m.substr((o+"").length),u="="===n.charAt(1),u?(p=parseInt(n.charAt(0)+"1",10),n=n.substr(2),p*=parseFloat(n),s=n.substr((p+"").length-(0>p?1:0))||""):(p=parseFloat(n),s=n.substr((p+"").length)),""===s&&(s=d[c]||t),s!==t&&(v=ba(a,"borderLeft",o,t),w=ba(a,"borderTop",o,t),"%"===s?(m=v/q*100+"%",l=w/r*100+"%"):"em"===s?(x=ba(a,"borderLeft",1,"em"),m=v/x+"em",l=w/x+"em"):(m=v+"px",l=w+"px"),u&&(n=parseFloat(m)+p+s,k=parseFloat(l)+p+s)),g=wa(z,y[j],m+" "+l,n+" "+k,!1,"0px",g);return g},prefix:!0,formatter:ra("0px 0px 0px 0Line truncated
|
||||
},i.startTime=function(a){return arguments.length?(a!==this._startTime&&(this._startTime=a,this.timeline&&this.timeline._sortChildren&&this.timeline.add(this,a-this._delay)),this):this._startTime},i.endTime=function(a){return this._startTime+(0!=a?this.totalDuration():this.duration())/this._timeScale},i.timeScale=function(a){if(!arguments.length)return this._timeScale;var b,c;for(a=a||n,this._timeline&&this._timeline.smoothChildTiming&&(b=this._pauseTime,c=b||0===b?b:this._timeline.totalTime(),this._startTime=c-(c-this._startTime)*this._timeScale/a),this._timeScale=a,c=this.timeline;c&&c.timeline;)c._dirty=!0,c.totalDuration(),c=c.timeline;return this},i.reversed=function(a){return arguments.length?(a!=this._reversed&&(this._reversed=a,this.totalTime(this._timeline&&!this._timeline.smoothChildTiming?this.totalDuration()-this._totalTime:this._totalTime,!0)),this):this._reversed},i.paused=function(a){if(!arguments.length)return this._paused;var b,c,d=this._timeline;return a!=this._paused&&d&&(k||a||j.wake(),b=d.rawTime(),c=b-this._pauseTime,!a&&d.smoothChildTiming&&(this._startTime+=c,this._uncache(!1)),this._pauseTime=a?b:null,this._paused=a,this._active=this.isActive(),!a&&0!==c&&this._initted&&this.duration()&&(b=d.smoothChildTiming?this._totalTime:(b-this._startTime)/this._timeScale,this.render(b,b===this._totalTime,!0))),this._gc&&!a&&this._enabled(!0,!1),this};var G=u("core.SimpleTimeline",function(a){E.call(this,0,a),this.autoRemoveChildren=this.smoothChildTiming=!0});i=G.prototype=new E,i.constructor=G,i.kill()._gc=!1,i._first=i._last=i._recent=null,i._sortChildren=!1,i.add=i.insert=function(a,b,c,d){var e,f;if(a._startTime=Number(b||0)+a._delay,a._paused&&this!==a._timeline&&(a._pauseTime=this.rawTime()-(a._timeline.rawTime()-a._pauseTime)),a.timeline&&a.timeline._remove(a,!0),a.timeline=a._timeline=this,a._gc&&a._enabled(!0,!0),e=this._last,this._sortChildren)for(f=a._startTime;e&&e._startTime>f;)e=e._prev;return e?(a._next=e._next,e._next=a):(a._next=this._first,this._first=a),a._next?a._next._prev=a:this._last=a,a._prev=e,this._recent=a,this._timeline&&this._uncache(!0),this},i._remove=function(a,b){return a.timeline===this&&(b||a._enabled(!1,!0),a._prev?a._prev._next=a._next:this._first===a&&(this._first=a._next),a._next?a._next._prev=a._prev:this._last===a&&(this._last=a._prev),a._next=a._prev=a.timeline=null,a===this._recent&&(this._recent=this._last),this._timeline&&this._uncache(!0)),this},i.render=function(a,b,c){var d,e=this._first;for(this._totalTime=this._time=this._rawPrevTime=a;e;)d=e._next,(e._active||a>=e._startTime&&!e._paused&&!e._gc)&&(e._reversed?e.render((e._dirty?e.totalDuration():e._totalDuration)-(a-e._startTime)*e._timeScale,b,c):e.render((a-e._startTime)*e._timeScale,b,c)),e=d},i.rawTime=function(){return k||j.wake(),this._totalTime};var H=u("TweenLite",function(b,c,d){if(E.call(this,c,d),this.render=H.prototype.render,null==b)throw"Cannot tween a null target.";this.target=b="string"!=typeof b?b:H.selector(b)||b;var e,f,g,h=b.jquery||b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType),i=this.vars.overwrite;if(this._overwrite=i=null==i?X[H.defaultOverwrite]:"number"==typeof i?i>>0:X[i],(h||b instanceof Array||b.push&&q(b))&&"number"!=typeof b[0])for(this._targets=g=o(b),this._propLookup=[],this._siblings=[],e=0;e<g.length;e++)f=g[e],f?"string"!=typeof f?f.length&&f!==a&&f[0]&&(f[0]===a||f[0].nodeType&&f[0].style&&!f.nodeType)?(g.splice(e--,1),this._targets=g=g.concat(o(f))):(this._siblings[e]=aa(f,this,!1),1===i&&this._siblings[e].length>1&&ca(f,this,null,1,this._siblings[e])):(f=g[e--]=H.selector(f),"string"==typeof f&&g.splice(e+1,1)):g.splice(e--,1);else this._propLookup={},this._siblings=aa(b,this,!1),1===i&&this._siblings.length>1&&ca(b,this,null,1,this._siblings);(this.vars.immediateRender||0===c&&0===this._delay&&this.vars.immediateRender!==!1)&&(this._time=-n,this.render(Math.min(0,-this._delay)))},!0),I=function(b){return b&&b.length&&b!==a&&b[0]&&(b[0]===a||b[0].nodeType&&b[0].style&&!b.nodeType)},J=function(a,b){var c,d={};for(c in a)W[c]||c in b&&"transform"!==c&&"x"!==c&&"y"!==c&&"width"!==c&&"height"!==c&&"className"!==c&&"border"!==c||!(!T[c]||T[c]&&T[c]._autoCSS)||(d[c]=a[c],delete a[c]);a.css=d};i=H.prototype=new E,i.constructor=H,i.kill()._gc=!1,i.ratio=0,i._firstPT=i._targets=i._overwrittenProps=i._startAt=null,i._notifyPluginsOfEnabled=i._lazy=!1,H.version="2.1.2",H.defaultEase=i._ease=new w(null,null,1,1),H.defaultOverwrite="auto",H.ticker=j,H.autoSleep=120,H.lagSmoothing=function(a,b){j.lagSmoothing(a,b)},H.selector=a.$||a.jQuery||function(b){var c=a.$||a.jQuery;return c?(H.selector=c,c(b)):(d||(d=a.document),d?d.querySelectorAll?d.querySelectorAll(b):d.getElementById("#"===b.charAt(0)?b.substr(1):b):b)};var K=[],L={},M=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,N=/[\+-]=-?[\.\d]/,O=function(a){for(var b,c=this._firstPT,d=1e-6;c;)b=c.blob?1===a&&null!=this.end?this.end:a?this.join(""):this.start:c.c*a+c.s,c.m?b=c.m.call(this.Line truncated
|
||||
@@ -0,0 +1,425 @@
|
||||
/**
|
||||
* demo.js
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2019, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
{
|
||||
const body = document.body;
|
||||
|
||||
const MathUtils = {
|
||||
lineEq: (y2, y1, x2, x1, currentVal) => {
|
||||
// y = mx + b
|
||||
var m = (y2 - y1) / (x2 - x1), b = y1 - m * x1;
|
||||
return m * currentVal + b;
|
||||
},
|
||||
lerp: (a, b, n) => (1 - n) * a + n * b,
|
||||
getRandomFloat: (min, max) => (Math.random() * (max - min) + min).toFixed(2)
|
||||
};
|
||||
|
||||
const getMousePos = (e) => {
|
||||
let posx = 0;
|
||||
let posy = 0;
|
||||
if (!e) e = window.event;
|
||||
if (e.pageX || e.pageY) {
|
||||
posx = e.pageX;
|
||||
posy = e.pageY;
|
||||
}
|
||||
else if (e.clientX || e.clientY) {
|
||||
posx = e.clientX + body.scrollLeft + document.documentElement.scrollLeft;
|
||||
posy = e.clientY + body.scrollTop + document.documentElement.scrollTop;
|
||||
}
|
||||
return { x : posx, y : posy }
|
||||
};
|
||||
|
||||
let winsize;
|
||||
const calcWinsize = () => winsize = {width: window.innerWidth, height: window.innerHeight};
|
||||
calcWinsize();
|
||||
window.addEventListener('resize', calcWinsize);
|
||||
|
||||
let mousepos = {x: winsize.width/2, y: winsize.height/2};
|
||||
window.addEventListener('mousemove', ev => mousepos = getMousePos(ev));
|
||||
|
||||
// Custom cursor
|
||||
class Cursor {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.circle = this.DOM.el.querySelector('.cursor__inner--circle');
|
||||
this.DOM.arrows = {
|
||||
right: this.DOM.el.querySelector('.cursor__side--right'),
|
||||
left: this.DOM.el.querySelector('.cursor__side--left')
|
||||
};
|
||||
this.bounds = this.DOM.circle.getBoundingClientRect();
|
||||
this.lastMousePos = {x:0, y:0};
|
||||
this.scale = 1;
|
||||
this.lastScale = 1;
|
||||
requestAnimationFrame(() => this.render());
|
||||
}
|
||||
render() {
|
||||
this.lastMousePos.x = MathUtils.lerp(this.lastMousePos.x, mousepos.x - this.bounds.width/2, 0.2);
|
||||
this.lastMousePos.y = MathUtils.lerp(this.lastMousePos.y, mousepos.y - this.bounds.height/2, 0.2);
|
||||
this.lastScale = MathUtils.lerp(this.lastScale, this.scale, 0.15);
|
||||
this.DOM.circle.style.transform = `translateX(${(this.lastMousePos.x)}px) translateY(${this.lastMousePos.y}px) scale(${this.lastScale})`;
|
||||
requestAnimationFrame(() => this.render());
|
||||
}
|
||||
enter() {
|
||||
this.scale = 1.9;
|
||||
}
|
||||
leave() {
|
||||
this.scale = 1;
|
||||
}
|
||||
click() {
|
||||
this.lastScale = .4;
|
||||
}
|
||||
showArrows() {
|
||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
||||
ease: Expo.easeOut,
|
||||
startAt: {x: i => i ? 10 : -10 },
|
||||
opacity: 1,
|
||||
x: 0
|
||||
});
|
||||
}
|
||||
hideArrows() {
|
||||
TweenMax.to(Object.values(this.DOM.arrows), 1, {
|
||||
ease: Expo.easeOut,
|
||||
x: i => i ? 10 : -10,
|
||||
opacity: 0
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Strip Item
|
||||
class StripItem {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.image = this.DOM.el.querySelector('.img-inner');
|
||||
this.DOM.number = this.DOM.el.querySelector('.strip__item-link');
|
||||
|
||||
this.initEvents();
|
||||
}
|
||||
initEvents() {
|
||||
// Hovering the number makes it slide out/in
|
||||
this.DOM.number.addEventListener('mouseenter', () => {
|
||||
const inner = this.DOM.number.querySelector('span');
|
||||
new TimelineMax()
|
||||
.to(inner, 0.2, {
|
||||
ease: Quad.easeOut,
|
||||
y: '-100%',
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(inner, 0.5, {
|
||||
ease: Expo.easeOut,
|
||||
startAt: {y: '100%', opacity: 0, scale: 1.3},
|
||||
y: '0%',
|
||||
opacity: 1
|
||||
}, 0.2)
|
||||
});
|
||||
|
||||
this.DOM.number.addEventListener('mouseleave', () => {
|
||||
const inner = this.DOM.number.querySelector('span');
|
||||
TweenMax.killTweensOf(inner);
|
||||
TweenMax.set(inner, {
|
||||
scale: 1,
|
||||
y: '0%',
|
||||
opacity: 1
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Content Item
|
||||
class ContentItem {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.image = this.DOM.el.querySelector('.img-outer');
|
||||
this.DOM.title = this.DOM.el.querySelector('.content__item-title');
|
||||
this.DOM.text = this.DOM.el.querySelector('.content__item-text');
|
||||
}
|
||||
}
|
||||
|
||||
// Images strip
|
||||
class Strip {
|
||||
constructor(el) {
|
||||
this.DOM = {el: el};
|
||||
this.DOM.strip = this.DOM.el.querySelector('.strip');
|
||||
this.items = [];
|
||||
[...this.DOM.strip.querySelectorAll('.strip__item')].forEach(item => this.items.push(new StripItem(item)));
|
||||
// The draggable container
|
||||
this.DOM.draggable = this.DOM.el.querySelector('.draggable');
|
||||
// the extra indicator element (scales down when we start dragging)
|
||||
this.DOM.indicator = document.querySelector('.frame__indicator');
|
||||
// the cover (name + year elements) that appear when we start to drag
|
||||
this.DOM.cover = this.DOM.el.querySelector('.strip-cover');
|
||||
// The width of the draggable container (also the strip container)
|
||||
this.draggableWidth = this.DOM.draggable.offsetWidth;
|
||||
// The total amount that we can drag the draggable container, so that both the first and last image stay next to the viewport boundary (left and right respectively)
|
||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
||||
// The current amount (in pixels) that was dragged
|
||||
this.dragPosition = 0;
|
||||
// Initialize the Draggabilly
|
||||
this.draggie = new Draggabilly(this.DOM.draggable, { axis: 'x' });
|
||||
|
||||
this.init();
|
||||
this.initEvents();
|
||||
}
|
||||
init() {
|
||||
this.renderedStyles = {
|
||||
position: {previous: 0, current: this.dragPosition},
|
||||
scale: {previous: 1, current: 1},
|
||||
imgScale: {previous: 1, current: 1},
|
||||
opacity: {previous: 1, current: 1},
|
||||
coverScale: {previous: 0.75, current: 0.75},
|
||||
coverOpacity: {previous: 0, current: 0},
|
||||
indicatorScale: {previous: 1, current: 1},
|
||||
};
|
||||
|
||||
this.render = () => {
|
||||
this.renderId = undefined;
|
||||
|
||||
for (const key in this.renderedStyles ) {
|
||||
this.renderedStyles[key].previous = MathUtils.lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, 0.1);
|
||||
}
|
||||
|
||||
TweenMax.set(this.DOM.strip, {x: this.renderedStyles.position.previous});
|
||||
for (const item of this.items) {
|
||||
TweenMax.set(item.DOM.el, {scale: this.renderedStyles.scale.previous, opacity: this.renderedStyles.opacity.previous});
|
||||
TweenMax.set(item.DOM.image, {scale: this.renderedStyles.imgScale.previous});
|
||||
}
|
||||
TweenMax.set(this.DOM.cover, {scale: this.renderedStyles.coverScale.previous, opacity: this.renderedStyles.coverOpacity.previous});
|
||||
TweenMax.set(this.DOM.indicator, {scaleX: this.renderedStyles.indicatorScale.previous});
|
||||
|
||||
if ( !this.renderId ) {
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
};
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
initEvents() {
|
||||
this.onDragStart = () => {
|
||||
this.renderedStyles.scale.current = 0.8;
|
||||
this.renderedStyles.imgScale.current = 1.6;
|
||||
this.renderedStyles.opacity.current = 0.3;
|
||||
this.renderedStyles.coverScale.current = 1;
|
||||
this.renderedStyles.coverOpacity.current = 1;
|
||||
this.renderedStyles.indicatorScale.current = 0;
|
||||
|
||||
cursor.scale = 1.5;
|
||||
cursor.showArrows();
|
||||
};
|
||||
|
||||
this.onDragMove = (event, pointer, moveVector) => {
|
||||
// The possible range for the drag is draggie.position.x = [-maxDrag,0 ]
|
||||
if ( this.draggie.position.x >= 0 ) {
|
||||
// the max we will be able to drag is winsize.width/2
|
||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, winsize.width, 0, this.draggie.position.x);
|
||||
}
|
||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
||||
// the max we will be able to drag is winsize.width/2
|
||||
this.dragPosition = MathUtils.lineEq(0.5*winsize.width,0, this.maxDrag+winsize.width, this.maxDrag, this.draggie.position.x);
|
||||
}
|
||||
else {
|
||||
this.dragPosition = this.draggie.position.x;
|
||||
}
|
||||
this.renderedStyles.position.current = this.dragPosition;
|
||||
|
||||
mousepos = getMousePos(event);
|
||||
};
|
||||
|
||||
this.onDragEnd = () => {
|
||||
// reset draggable if out of bounds.
|
||||
if ( this.draggie.position.x > 0 ) {
|
||||
this.dragPosition = 0;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
else if ( this.draggie.position.x < -1*this.maxDrag ) {
|
||||
this.dragPosition = -1*this.maxDrag;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
this.renderedStyles.position.current = this.dragPosition;
|
||||
this.renderedStyles.scale.current = 1;
|
||||
this.renderedStyles.imgScale.current = 1;
|
||||
this.renderedStyles.opacity.current = 1;
|
||||
this.renderedStyles.coverScale.current = 0.75;
|
||||
this.renderedStyles.coverOpacity.current = 0;
|
||||
this.renderedStyles.indicatorScale.current = 1;
|
||||
|
||||
cursor.scale = 1;
|
||||
cursor.hideArrows();
|
||||
};
|
||||
|
||||
this.draggie.on('pointerDown', this.onDragStart);
|
||||
this.draggie.on('dragMove', this.onDragMove);
|
||||
this.draggie.on('pointerUp', this.onDragEnd);
|
||||
|
||||
for (const item of this.items) {
|
||||
item.DOM.number.addEventListener('click', (ev) => {
|
||||
ev.preventDefault();
|
||||
this.showItem(item);
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
this.maxDrag = this.draggableWidth < winsize.width ? 0 : this.draggableWidth - winsize.width;
|
||||
if ( Math.abs(this.dragPosition) + winsize.width > this.draggableWidth ) {
|
||||
const diff = Math.abs(this.dragPosition) + winsize.width - this.draggableWidth;
|
||||
// reset dragPosition
|
||||
this.dragPosition = this.dragPosition+diff;
|
||||
this.draggie.setPosition(this.dragPosition, this.draggie.position.y);
|
||||
}
|
||||
});
|
||||
}
|
||||
showItem(item) {
|
||||
if ( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( this.renderId ) {
|
||||
window.cancelAnimationFrame(this.renderId);
|
||||
this.renderId = undefined;
|
||||
}
|
||||
|
||||
this.isAnimating = true;
|
||||
|
||||
this.current = this.items.indexOf(item);
|
||||
const contentItem = contentItems[this.current];
|
||||
contentItem.DOM.el.classList.add('content__item--current');
|
||||
|
||||
// Fix for mobile (make sure the cover is not visible when clicking the numbers)
|
||||
TweenMax.set(this.DOM.cover, {scale: 0, opacity: 0});
|
||||
|
||||
this.contentToggleTimeline = new TimelineMax({
|
||||
onComplete: () => this.isAnimating = false
|
||||
})
|
||||
.set([contentItem.DOM.image, contentItem.DOM.title, contentItem.DOM.text, closeContentCtrl], {
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(this.items.map(item => item.DOM.el), 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scale: 0.8,
|
||||
opacity: 0.4
|
||||
}, 0)
|
||||
.to(this.items.map(item => item.DOM.image), 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scale: 1.6
|
||||
}, 0)
|
||||
.to(this.DOM.indicator, 0.8, {
|
||||
ease: Cubic.easeOut,
|
||||
scaleX: 0
|
||||
}, 0);
|
||||
|
||||
for (const item of this.items) {
|
||||
this.contentToggleTimeline.to(item.DOM.el, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
y: winsize.height*-1
|
||||
}, MathUtils.getRandomFloat(0.2,0.4));
|
||||
}
|
||||
|
||||
this.contentToggleTimeline
|
||||
.to(contentItem.DOM.image, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
startAt: {y: winsize.height*1.3, opacity: 1},
|
||||
y: 0
|
||||
}, 0.6)
|
||||
.to(contentItem.DOM.title, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 100},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1)
|
||||
.to(contentItem.DOM.text, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 200},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1)
|
||||
.to(closeContentCtrl, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
startAt: {y: 50},
|
||||
y: 0,
|
||||
opacity: 1
|
||||
}, 1);
|
||||
}
|
||||
closeContent() {
|
||||
if ( this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
const contentItem = contentItems[this.current];
|
||||
this.contentToggleTimeline = new TimelineMax({
|
||||
onComplete: () => {
|
||||
contentItem.DOM.el.classList.remove('content__item--current');
|
||||
this.isAnimating = false
|
||||
this.renderId = requestAnimationFrame(() => this.render());
|
||||
}
|
||||
})
|
||||
.set(this.items.map(item => item.DOM.el), {
|
||||
scale: 1,
|
||||
opacity: 1
|
||||
}, 0)
|
||||
.set(this.items.map(item => item.DOM.image), {
|
||||
scale: 1
|
||||
}, 0)
|
||||
.to(contentItem.DOM.text, 0.8, {
|
||||
ease: Quint.easeIn,
|
||||
y: 200,
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(contentItem.DOM.title, 0.8, {
|
||||
ease: Quint.easeIn,
|
||||
y: 100,
|
||||
opacity: 0
|
||||
}, 0)
|
||||
.to(closeContentCtrl, 0.8, {
|
||||
ease: Quint.easeOut,
|
||||
y: 50,
|
||||
opacity: 0
|
||||
}, 0.2)
|
||||
.to(contentItem.DOM.image, 1, {
|
||||
ease: Expo.easeInOut,
|
||||
y: winsize.height*1.3,
|
||||
opacity: 1
|
||||
}, 0.2);
|
||||
|
||||
for (const item of this.items) {
|
||||
this.contentToggleTimeline.to(item.DOM.el, MathUtils.getRandomFloat(0.6,0.9), {
|
||||
ease: Expo.easeInOut,
|
||||
y: 0
|
||||
}, MathUtils.getRandomFloat(0.4,0.6));
|
||||
}
|
||||
|
||||
this.contentToggleTimeline
|
||||
.to(this.DOM.indicator, 1.2, {
|
||||
ease: Expo.easeOut,
|
||||
scaleX: 1
|
||||
}, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
// The images strip
|
||||
const strip = new Strip(document.querySelector('.strip-outer'));
|
||||
|
||||
// Custom mouse cursor
|
||||
const cursor = new Cursor(document.querySelector('.cursor'));
|
||||
|
||||
// The content elements
|
||||
const contentItems = [];
|
||||
[...document.querySelectorAll('.content__item')].forEach(item => contentItems.push(new ContentItem(item)));
|
||||
|
||||
// The close content ctrl
|
||||
const closeContentCtrl = document.querySelector('.content__close');
|
||||
// On click, close the content view
|
||||
closeContentCtrl.addEventListener('click', () => {
|
||||
strip.closeContent();
|
||||
});
|
||||
|
||||
// Activate the enter/leave/click methods of the custom cursor when hovering in/out on every <a> (and the close content ctrl)
|
||||
[...document.querySelectorAll('a'), closeContentCtrl].forEach((link) => {
|
||||
link.addEventListener('mouseenter', () => cursor.enter());
|
||||
link.addEventListener('mouseleave', () => cursor.leave());
|
||||
});
|
||||
}
|
||||
Vendored
+8
@@ -0,0 +1,8 @@
|
||||
/*!
|
||||
* Draggabilly PACKAGED v2.2.0
|
||||
* Make that shiz draggable
|
||||
* https://draggabilly.desandro.com
|
||||
* MIT license
|
||||
*/
|
||||
|
||||
!function(i,e){"function"==typeof define&&define.amd?define("jquery-bridget/jquery-bridget",["jquery"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("jquery")):i.jQueryBridget=e(i,i.jQuery)}(window,function(t,i){"use strict";var c=Array.prototype.slice,e=t.console,p=void 0===e?function(){}:function(t){e.error(t)};function n(d,o,u){(u=u||i||t.jQuery)&&(o.prototype.option||(o.prototype.option=function(t){u.isPlainObject(t)&&(this.options=u.extend(!0,this.options,t))}),u.fn[d]=function(t){if("string"==typeof t){var i=c.call(arguments,1);return s=i,a="$()."+d+'("'+(r=t)+'")',(e=this).each(function(t,i){var e=u.data(i,d);if(e){var n=e[r];if(n&&"_"!=r.charAt(0)){var o=n.apply(e,s);h=void 0===h?o:h}else p(a+" is not a valid method")}else p(d+" not initialized. Cannot call methods, i.e. "+a)}),void 0!==h?h:e}var e,r,s,h,a,n;return n=t,this.each(function(t,i){var e=u.data(i,d);e?(e.option(n),e._init()):(e=new o(i,n),u.data(i,d,e))}),this},r(u))}function r(t){!t||t&&t.bridget||(t.bridget=n)}return r(i||t.jQuery),n}),function(t,i){"use strict";"function"==typeof define&&define.amd?define("get-size/get-size",[],function(){return i()}):"object"==typeof module&&module.exports?module.exports=i():t.getSize=i()}(window,function(){"use strict";function m(t){var i=parseFloat(t);return-1==t.indexOf("%")&&!isNaN(i)&&i}var e="undefined"==typeof console?function(){}:function(t){console.error(t)},y=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","borderLeftWidth","borderRightWidth","borderTopWidth","borderBottomWidth"],b=y.length;function E(t){var i=getComputedStyle(t);return i||e("Style returned "+i+". Are you running this code in a hidden iframe on Firefox? See http://bit.ly/getsizebug1"),i}var _,x=!1;function P(t){if(function(){if(!x){x=!0;var t=document.createElement("div");t.style.width="200px",t.style.padding="1px 2px 3px 4px",t.style.borderStyle="solid",t.style.borderWidth="1px 2px 3px 4px",t.style.boxSizing="border-box";var i=document.body||document.documentElement;i.appendChild(t);var e=E(t);P.isBoxSizeOuter=_=200==m(e.width),i.removeChild(t)}}(),"string"==typeof t&&(t=document.querySelector(t)),t&&"object"==typeof t&&t.nodeType){var i=E(t);if("none"==i.display)return function(){for(var t={width:0,height:0,innerWidth:0,innerHeight:0,outerWidth:0,outerHeight:0},i=0;i<b;i++)t[y[i]]=0;return t}();var e={};e.width=t.offsetWidth,e.height=t.offsetHeight;for(var n=e.isBorderBox="border-box"==i.boxSizing,o=0;o<b;o++){var r=y[o],s=i[r],h=parseFloat(s);e[r]=isNaN(h)?0:h}var a=e.paddingLeft+e.paddingRight,d=e.paddingTop+e.paddingBottom,u=e.marginLeft+e.marginRight,c=e.marginTop+e.marginBottom,p=e.borderLeftWidth+e.borderRightWidth,f=e.borderTopWidth+e.borderBottomWidth,g=n&&_,l=m(i.width);!1!==l&&(e.width=l+(g?0:a+p));var v=m(i.height);return!1!==v&&(e.height=v+(g?0:d+f)),e.innerWidth=e.width-(a+p),e.innerHeight=e.height-(d+f),e.outerWidth=e.width+u,e.outerHeight=e.height+c,e}}return P}),function(t,i){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",i):"object"==typeof module&&module.exports?module.exports=i():t.EvEmitter=i()}("undefined"!=typeof window?window:this,function(){function t(){}var i=t.prototype;return i.on=function(t,i){if(t&&i){var e=this._events=this._events||{},n=e[t]=e[t]||[];return-1==n.indexOf(i)&&n.push(i),this}},i.once=function(t,i){if(t&&i){this.on(t,i);var e=this._onceEvents=this._onceEvents||{};return(e[t]=e[t]||{})[i]=!0,this}},i.off=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){var n=e.indexOf(i);return-1!=n&&e.splice(n,1),this}},i.emitEvent=function(t,i){var e=this._events&&this._events[t];if(e&&e.length){e=e.slice(0),i=i||[];for(var n=this._onceEvents&&this._onceEvents[t],o=0;o<e.length;o++){var r=e[o];n&&n[r]&&(this.off(t,r),delete n[r]),r.apply(this,i)}return this}},i.allOff=function(){delete this._events,delete this._onceEvents},t}),function(i,e){"function"==typeof define&&define.amd?define("unipointer/unipointer",["ev-emitter/ev-emitter"],function(t){return e(i,t)}):"object"==typeof module&&module.exports?module.exports=e(i,require("ev-emitter")):i.Unipointer=e(i,i.EvEmitter)}(window,function(o,t){function i(){}var e=i.prototype=Object.create(t.prototype);e.bindStartEvent=function(t){this._bindStartEvent(t,!0)},e.unbindStartEvent=function(t){this._bindStartEvent(t,!1)},e._bindStartEvent=function(t,i){var e=(i=void 0===i||i)?"addEventListener":"removeEventListener",n="mousedown";o.PointerEvent?n="pointerdown":"ontouchstart"in o&&(n="touchstart"),t[e](n,this)},e.handleEvent=function(t){var i="on"+t.type;this[i]&&this[i](t)},e.getTouch=function(t){for(var i=0;i<t.length;i++){var e=t[i];if(e.identifier==this.pointerIdentifier)return e}},e.onmousedown=function(t){var i=t.button;i&&0!==i&&1!==i||this._pointerDown(t,t)},e.ontouchstart=function(t){this._pointerDown(t,t.changedTouches[0])},e.onpointerdown=function(t){this._pointerDown(t,t)},e._pointerDown=fuLine truncated
|
||||
Vendored
+7
@@ -0,0 +1,7 @@
|
||||
/*!
|
||||
* imagesLoaded PACKAGED v4.1.1
|
||||
* JavaScript is all like "You images are done yet or what?"
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
!function(t,e){"function"==typeof define&&define.amd?define("ev-emitter/ev-emitter",e):"object"==typeof module&&module.exports?module.exports=e():t.EvEmitter=e()}("undefined"!=typeof window?window:this,function(){function t(){}var e=t.prototype;return e.on=function(t,e){if(t&&e){var i=this._events=this._events||{},n=i[t]=i[t]||[];return-1==n.indexOf(e)&&n.push(e),this}},e.once=function(t,e){if(t&&e){this.on(t,e);var i=this._onceEvents=this._onceEvents||{},n=i[t]=i[t]||{};return n[e]=!0,this}},e.off=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=i.indexOf(e);return-1!=n&&i.splice(n,1),this}},e.emitEvent=function(t,e){var i=this._events&&this._events[t];if(i&&i.length){var n=0,o=i[n];e=e||[];for(var r=this._onceEvents&&this._onceEvents[t];o;){var s=r&&r[o];s&&(this.off(t,o),delete r[o]),o.apply(this,e),n+=s?0:1,o=i[n]}return this}},t}),function(t,e){"use strict";"function"==typeof define&&define.amd?define(["ev-emitter/ev-emitter"],function(i){return e(t,i)}):"object"==typeof module&&module.exports?module.exports=e(t,require("ev-emitter")):t.imagesLoaded=e(t,t.EvEmitter)}(window,function(t,e){function i(t,e){for(var i in e)t[i]=e[i];return t}function n(t){var e=[];if(Array.isArray(t))e=t;else if("number"==typeof t.length)for(var i=0;i<t.length;i++)e.push(t[i]);else e.push(t);return e}function o(t,e,r){return this instanceof o?("string"==typeof t&&(t=document.querySelectorAll(t)),this.elements=n(t),this.options=i({},this.options),"function"==typeof e?r=e:i(this.options,e),r&&this.on("always",r),this.getImages(),h&&(this.jqDeferred=new h.Deferred),void setTimeout(function(){this.check()}.bind(this))):new o(t,e,r)}function r(t){this.img=t}function s(t,e){this.url=t,this.element=e,this.img=new Image}var h=t.jQuery,a=t.console;o.prototype=Object.create(e.prototype),o.prototype.options={},o.prototype.getImages=function(){this.images=[],this.elements.forEach(this.addElementImages,this)},o.prototype.addElementImages=function(t){"IMG"==t.nodeName&&this.addImage(t),this.options.background===!0&&this.addElementBackgroundImages(t);var e=t.nodeType;if(e&&d[e]){for(var i=t.querySelectorAll("img"),n=0;n<i.length;n++){var o=i[n];this.addImage(o)}if("string"==typeof this.options.background){var r=t.querySelectorAll(this.options.background);for(n=0;n<r.length;n++){var s=r[n];this.addElementBackgroundImages(s)}}}};var d={1:!0,9:!0,11:!0};return o.prototype.addElementBackgroundImages=function(t){var e=getComputedStyle(t);if(e)for(var i=/url\((['"])?(.*?)\1\)/gi,n=i.exec(e.backgroundImage);null!==n;){var o=n&&n[2];o&&this.addBackground(o,t),n=i.exec(e.backgroundImage)}},o.prototype.addImage=function(t){var e=new r(t);this.images.push(e)},o.prototype.addBackground=function(t,e){var i=new s(t,e);this.images.push(i)},o.prototype.check=function(){function t(t,i,n){setTimeout(function(){e.progress(t,i,n)})}var e=this;return this.progressedCount=0,this.hasAnyBroken=!1,this.images.length?void this.images.forEach(function(e){e.once("progress",t),e.check()}):void this.complete()},o.prototype.progress=function(t,e,i){this.progressedCount++,this.hasAnyBroken=this.hasAnyBroken||!t.isLoaded,this.emitEvent("progress",[this,t,e]),this.jqDeferred&&this.jqDeferred.notify&&this.jqDeferred.notify(this,t),this.progressedCount==this.images.length&&this.complete(),this.options.debug&&a&&a.log("progress: "+i,t,e)},o.prototype.complete=function(){var t=this.hasAnyBroken?"fail":"done";if(this.isComplete=!0,this.emitEvent(t,[this]),this.emitEvent("always",[this]),this.jqDeferred){var e=this.hasAnyBroken?"reject":"resolve";this.jqDeferred[e](this)}},r.prototype=Object.create(e.prototype),r.prototype.check=function(){var t=this.getIsImageComplete();return t?void this.confirm(0!==this.img.naturalWidth,"naturalWidth"):(this.proxyImage=new Image,this.proxyImage.addEventListener("load",this),this.proxyImage.addEventListener("error",this),this.img.addEventListener("load",this),this.img.addEventListener("error",this),void(this.proxyImage.src=this.img.src))},r.prototype.getIsImageComplete=function(){return this.img.complete&&void 0!==this.img.naturalWidth},r.prototype.confirm=function(t,e){this.isLoaded=t,this.emitEvent("progress",[this,this.img,e])},r.prototype.handleEvent=function(t){var e="on"+t.type;this[e]&&this[e](t)},r.prototype.onload=function(){this.confirm(!0,"onload"),this.unbindEvents()},r.prototype.onerror=function(){this.confirm(!1,"onerror"),this.unbindEvents()},r.prototype.unbindEvents=function(){this.proxyImage.removeEventListener("load",this),this.proxyImage.removeEventListener("error",this),this.img.removeEventListener("load",this),this.img.removeEventListener("error",this)},s.prototype=Object.create(r.prototype),s.prototype.check=function(){this.img.addEventListener("load",this),this.img.addEventListener("error",this),this.img.src=this.url;var t=this.getIsImageComplete();t&&(this.confirm(0!==this.img.naturalWidth,"naturalWidth"),this.unbindEvents())},s.prototype.unbindEvents=function(){this.img.removeEventListener("loaLine truncated
|
||||
+574
@@ -0,0 +1,574 @@
|
||||
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Fredoka:[email protected]&display=swap');
|
||||
|
||||
:root {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
body {
|
||||
--color-text: #e7e7e7;
|
||||
--color-bg: #090909;
|
||||
--color-link: #ff0000;
|
||||
--color-link-hover: #fff;
|
||||
--color-cover: #ff0000;
|
||||
--color-copy: #e7e7e7;
|
||||
--color-content-title: #ff0000;
|
||||
--color-indicator: #1b1b1b;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg);
|
||||
font-family: ff-more-web-pro, serif;
|
||||
margin: 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Page Loader */
|
||||
.js .loading::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
.js .loading::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
top: calc(50% - 30px);
|
||||
left: calc(50% - 25px);
|
||||
width: 50px;
|
||||
height: 60px;
|
||||
pointer-events: none;
|
||||
opacity: 0.4;
|
||||
background: var(--color-link);
|
||||
animation: loaderAnim 0.7s linear infinite alternate forwards;
|
||||
}
|
||||
|
||||
@keyframes loaderAnim {
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(0.5,0.5,1);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--color-link);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--color-link-hover);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
main {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message {
|
||||
background: var(--color-text);
|
||||
color: var(--color-bg);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.frame {
|
||||
padding: 1.5rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame a {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.frame__title {
|
||||
font-size: 1rem;
|
||||
margin: 0 0 0.5rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.frame__links {
|
||||
display: flex;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.frame__links a {
|
||||
margin: 0 0.35rem;
|
||||
padding: 0 0.35rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.frame__links a:first-child {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.frame__links a:not(:last-child)::after {
|
||||
content: '';
|
||||
width: 1px;
|
||||
height: 1rem;
|
||||
background: var(--color-link);
|
||||
position: absolute;
|
||||
left: calc(100% + 0.35rem);
|
||||
top: calc(50% - 0.5rem);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.frame__indicator {
|
||||
background: var(--color-indicator);
|
||||
width: 3rem;
|
||||
height: 0.5rem;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
|
||||
.strip-outer {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
min-height: 750px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.strip-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
height: 500px;
|
||||
top: calc(50% - 250px);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.draggable:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.strip {
|
||||
height: 100%;
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
align-items: start;
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.strip__item {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
font-family: "helpme";
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
.img-outer {
|
||||
--imgheight: 450px;
|
||||
height: var(--imgheight);
|
||||
width: calc(var(--imgheight) * 0.7);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.img-outer--size-s {
|
||||
--imgheight: 300px;
|
||||
}
|
||||
|
||||
.img-outer--size-m {
|
||||
--imgheight: 360px;
|
||||
}
|
||||
|
||||
.img-outer--size-l {
|
||||
--imgheight: 390px;
|
||||
}
|
||||
|
||||
.img-outer--size-xl {
|
||||
--imgheight: 420px;
|
||||
}
|
||||
|
||||
.img-inner {
|
||||
width: calc(100% + 40px);
|
||||
height: calc(100% + 40px);
|
||||
left: -20px;
|
||||
top: -20px;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.strip__item-number {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5rem;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.strip__item-link {
|
||||
pointer-events: auto;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.strip__item-link::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 160%;
|
||||
height: 120%;
|
||||
left: -30%;
|
||||
top: -10%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.strip__item-link span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.strip__item-plus {
|
||||
display: none;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='13' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 6h6v1H7v6H6V7H0V6h6V0h1v6z' fill='%23505050'/%3e%3c/svg%3e");
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.strip__item-link:hover + .strip__item-plus {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.strip-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--color-cover);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.strip-cover__title {
|
||||
font-family: fleisch-wolf, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 25vw;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
-webkit-text-stroke: 1px var(--color-cover);
|
||||
text-stroke: 1px var(--color-cover);
|
||||
-webkit-text-fill-color: transparent;
|
||||
text-fill-color: transparent;
|
||||
color: transparent;
|
||||
filter: drop-shadow(0 0 100px #ff0000);
|
||||
text-shadow: -18px -10px 0 #ff0000;
|
||||
}
|
||||
|
||||
.strip-cover__subtitle {
|
||||
font-size: 5vw;
|
||||
margin: 0;
|
||||
font-family: "helpme";
|
||||
color: #fff;
|
||||
letter-spacing: 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
top: 0;
|
||||
position: absolute;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.js .content {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.content__item {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-rows: 50% 40% 10%;
|
||||
grid-column-gap: 0;
|
||||
grid-template-areas: 'content-img' 'content-copy' '...';
|
||||
display: none;
|
||||
}
|
||||
|
||||
.js .content__item {
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.js .content__item--current {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
top: 0;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.img-outer--content {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
grid-area: content-img;
|
||||
}
|
||||
|
||||
.img-inner--content {
|
||||
background-position: 50% 35%;
|
||||
}
|
||||
|
||||
.content__item-title {
|
||||
font-weight: normal;
|
||||
color: var(--color-content-title);
|
||||
font-family: "helpme";
|
||||
}
|
||||
|
||||
.content__item-copy {
|
||||
grid-area: content-copy;
|
||||
padding: 1.5rem 2rem;
|
||||
color: var(--color-copy);
|
||||
}
|
||||
|
||||
.content__item-text {
|
||||
margin: 0;
|
||||
font-family: "freedoka";
|
||||
}
|
||||
|
||||
.content__close {
|
||||
display: block;
|
||||
background: none;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 3rem;
|
||||
}
|
||||
|
||||
.content__item--current ~ .content__close {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.content__close svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.content__close:focus,
|
||||
.content__close:hover {
|
||||
outline: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Will-change */
|
||||
.strip,
|
||||
.strip__item,
|
||||
.cursor__side,
|
||||
.content__close,
|
||||
.content__item-title,
|
||||
.content__item-copy {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 53em) {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
.frame {
|
||||
position: fixed;
|
||||
text-align: left;
|
||||
z-index: 10000;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
height: 100vh;
|
||||
padding: 1.25rem 3rem;
|
||||
pointer-events: none;
|
||||
grid-template-columns: 80% 20%;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas: 'page-title links'
|
||||
'... ...'
|
||||
'indicator sub-title';
|
||||
}
|
||||
.frame__title-wrap{
|
||||
grid-area: page-title;
|
||||
display: flex;
|
||||
}
|
||||
.frame__title {
|
||||
margin: 0;
|
||||
}
|
||||
.frame__subtitle {
|
||||
grid-area: sub-title;
|
||||
justify-self: end;
|
||||
margin: 0;
|
||||
}
|
||||
.frame__links {
|
||||
padding: 0;
|
||||
margin: 0 0 0 2rem;
|
||||
}
|
||||
.frame__indicator {
|
||||
grid-area: indicator;
|
||||
margin: 0;
|
||||
}
|
||||
.content__item {
|
||||
top: 0;
|
||||
grid-template-columns: 40% 45% 15%;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-areas: 'content-copy content-img ... ';
|
||||
}
|
||||
.content__item-copy {
|
||||
max-width: 240px;
|
||||
justify-self: end;
|
||||
align-self: end;
|
||||
text-align: right;
|
||||
}
|
||||
.strip-cover__title {
|
||||
font-size: 15vw;
|
||||
-webkit-text-stroke: 2px var(--color-cover);
|
||||
text-stroke: 2px var(--color-cover);
|
||||
}
|
||||
.strip-cover__subtitle {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (any-pointer: fine) {
|
||||
.cursor {
|
||||
display: block;
|
||||
}
|
||||
.cursor__inner {
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
mix-blend-mode: difference;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.cursor__side {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
opacity: 0;
|
||||
}
|
||||
.cursor__side--left {
|
||||
right: calc(100% + 5px);
|
||||
}
|
||||
.cursor__side--right {
|
||||
left: calc(100% + 5px);
|
||||
}
|
||||
.cursor__inner--circle {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@import url("https://p.typekit.net/p.css?s=1&k=ugp0unb&ht=tk&f=10052.10053.35816&a=1494256&app=typekit&e=css");
|
||||
|
||||
@font-face {
|
||||
font-family:"ff-more-web-pro";
|
||||
src:url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/753cb1/00000000000000003b9b0702/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:700;font-stretch:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"ff-more-web-pro";
|
||||
src:url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/4122b8/00000000000000003b9b06fe/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:"fleisch-wolf";
|
||||
src:url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/8b54bc/00000000000000003b9b097b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
|
||||
font-display:auto;font-style:normal;font-weight:400;font-stretch:normal;
|
||||
}
|
||||
|
||||
.tk-ff-more-web-pro { font-family: "ff-more-web-pro",serif; }
|
||||
.tk-fleisch-wolf { font-family: "fleisch-wolf",sans-serif; }
|
||||
|
||||
@font-face {
|
||||
font-family: helpme;
|
||||
src: url(HelpMe.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: avang;
|
||||
src: url(Nightcore\ Demo.ttf);
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: freedoka;
|
||||
src: url(Fredoka-VariableFont_wdth\,wght.ttf);
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
|
||||
.strip-cover__title {
|
||||
filter: none;
|
||||
text-shadow: none;
|
||||
}
|
||||
.strip-cover__subtitle {
|
||||
font-size: 3vw;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Reference in new issue
Block a user