first commit

This commit is contained in:
Tomas Dvorak committed 2025-01-04 11:45:15 +01:00
commit 882f91ebf6
335 files changed
+34705

No files matched your search

Binary file not shown.
BIN
View File
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

+296
View File
@@ -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>
+296
View File
@@ -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>
+17
View File
@@ -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
+425
View File
@@ -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());
});
}
+8
View File
@@ -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
+7
View File
@@ -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
View File
@@ -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.