├── .gitignore
├── .gitattributes
├── src
    ├── img
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   ├── 5.jpg
    │   └── 6.jpg
    ├── favicon.ico
    ├── js
    │   ├── utils.js
    │   ├── index.js
    │   ├── preloader.js
    │   ├── menu.js
    │   ├── cursor.js
    │   └── menuItem.js
    ├── index.html
    └── css
    │   └── base.css
├── dist
    ├── 1.dc197a9a.jpg
    ├── 2.3ca6bb44.jpg
    ├── 3.a433b89d.jpg
    ├── 4.c6d96be5.jpg
    ├── 5.689b68fd.jpg
    ├── 6.e96dcfff.jpg
    ├── favicon.26242483.ico
    ├── index.html
    ├── js.00a46daa.css
    └── base.98fd6c19.css
├── package.json
├── README.md
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /.cache
3 | /parcel-cache
4 | package-lock.json


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/src/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/1.jpg


--------------------------------------------------------------------------------
/src/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/2.jpg


--------------------------------------------------------------------------------
/src/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/3.jpg


--------------------------------------------------------------------------------
/src/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/4.jpg


--------------------------------------------------------------------------------
/src/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/5.jpg


--------------------------------------------------------------------------------
/src/img/6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/img/6.jpg


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/dist/1.dc197a9a.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/1.dc197a9a.jpg


--------------------------------------------------------------------------------
/dist/2.3ca6bb44.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/2.3ca6bb44.jpg


--------------------------------------------------------------------------------
/dist/3.a433b89d.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/3.a433b89d.jpg


--------------------------------------------------------------------------------
/dist/4.c6d96be5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/4.c6d96be5.jpg


--------------------------------------------------------------------------------
/dist/5.689b68fd.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/5.689b68fd.jpg


--------------------------------------------------------------------------------
/dist/6.e96dcfff.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/6.e96dcfff.jpg


--------------------------------------------------------------------------------
/dist/favicon.26242483.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codrops/3DLettersMenuHover/HEAD/dist/favicon.26242483.ico


--------------------------------------------------------------------------------
/src/js/utils.js:
--------------------------------------------------------------------------------
 1 | // Map number x from range [a, b] to [c, d]
 2 | const map = (x, a, b, c, d) => (x - a) * (d - c) / (b - a) + c;
 3 | 
 4 | // Linear interpolation
 5 | const lerp = (a, b, n) => (1 - n) * a + n * b;
 6 | 
 7 | const clamp = (num, min, max) => num <= min ? min : num >= max ? max : num;
 8 | 
 9 | // Gets the mouse position
10 | const getMousePos = e => {
11 |     return { 
12 |         x : e.clientX, 
13 |         y : e.clientY 
14 |     };
15 | };
16 | 
17 | export { map, lerp, clamp, getMousePos };


--------------------------------------------------------------------------------
/src/js/index.js:
--------------------------------------------------------------------------------
 1 | import { preloader } from './preloader';
 2 | import { Menu } from './menu.js';
 3 | import { Cursor } from './cursor';
 4 | 
 5 | // menu (<nav> element)
 6 | const menuEl = document.querySelector('.menu');
 7 | 
 8 | // preload the images set as data attrs in the menu items
 9 | preloader('.menu__item').then(() => {
10 |     // initialize menu
11 |     new Menu(menuEl);
12 | });
13 | 
14 | // initialize custom cursor
15 | const cursor = new Cursor(document.querySelector('.cursor'));
16 | 
17 | // mouse effects on all links and others
18 | [...document.querySelectorAll('a')].forEach(link => {
19 |     link.addEventListener('mouseenter', () => cursor.enter());
20 |     link.addEventListener('mouseleave', () => cursor.leave());
21 | });


--------------------------------------------------------------------------------
/src/js/preloader.js:
--------------------------------------------------------------------------------
 1 | const imagesLoaded = require('imagesloaded');
 2 | 
 3 | const body = document.body;
 4 | export const preloader = selector => {
 5 |     return new Promise(resolve => {
 6 | 
 7 |         const imgwrap = document.createElement('div');
 8 |         imgwrap.style.visibility = 'hidden';
 9 |         body.appendChild(imgwrap);
10 |         
11 |         [...document.querySelectorAll(selector)].forEach(el => {
12 |             const imgEl = document.createElement('img');
13 |             imgEl.style.width = 0;
14 |             imgEl.src = el.dataset.img;
15 |             imgEl.className = 'preload';
16 |             imgwrap.appendChild(imgEl);
17 |         });
18 | 
19 |         imagesLoaded(document.querySelectorAll('.preload'), () => {
20 |             imgwrap.parentNode.removeChild(imgwrap);
21 |             body.classList.remove('loading');
22 |             resolve();
23 |         });
24 | 
25 |     });
26 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "3DLettersMenuHover",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "start": "parcel src/index.html --open",
 8 |     "clean": "rm -rf dist/*",
 9 |     "build:parcel": "parcel build src/index.html --no-content-hash --no-minify --no-source-maps --public-url ./",
10 |     "build": "npm run clean && npm run build:parcel"
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git://github.com/codrops/3DLettersMenuHover.git"
15 |   },
16 |   "keywords": [],
17 |   "author": "Codrops",
18 |   "license": "MIT",
19 |   "homepage": "https://tympanus.net/codrops",
20 |   "bugs": {
21 |     "url": "https://github.com/codrops/3DLettersMenuHover/issues"
22 |   },
23 |   "dependencies": {
24 |     "gsap": "^3.6.1",
25 |     "imagesloaded": "^4.1.4",
26 |     "splitting": "^1.0.6"
27 |   },
28 |   "devDependencies": {
29 |     "parcel-bundler": "^1.12.5"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 3D Letters Menu Hover Effect 
 2 | 
 3 | A rotated 3D like letters and image hover effect for a menu based on the animation seen on [One up Studio](https://www.oneupstudio.it/).
 4 | 
 5 | ![3D Letters Menu Hover Effect](https://tympanus.net/codrops/wp-content/uploads/2021/04/3DLettersHoverMenu.jpg)
 6 | 
 7 | [Article on Codrops](https://tympanus.net/codrops/?p=54446)
 8 | 
 9 | [Demo](http://tympanus.net/Development/3DLettersMenuHover/)
10 | 
11 | 
12 | ## Installation
13 | 
14 | Install dependencies:
15 | 
16 | ```
17 | npm install
18 | ```
19 | 
20 | Compile the code for development and start a local server:
21 | 
22 | ```
23 | npm start
24 | ```
25 | 
26 | Create the build:
27 | 
28 | ```
29 | npm run build
30 | ```
31 | 
32 | ## Credits
33 | 
34 | - Images from [Unsplash](https://unsplash.com/)
35 | 
36 | ## Misc
37 | 
38 | Follow Codrops: [Twitter](http://www.twitter.com/codrops), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/)
39 | 
40 | ## License
41 | [MIT](LICENSE)
42 | 
43 | Made with :blue_heart: by [Codrops](http://www.codrops.com)
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2009 - 2021 [Codrops](https://tympanus.net/codrops)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/js/menu.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { MenuItem } from './menuItem';
 3 | 
 4 | export class Menu {
 5 |     constructor(el) {
 6 |         // el is the menu element (<nav>)
 7 |         this.DOM = {el: el};
 8 |         // the menu item elements (<a>)
 9 |         this.DOM.menuItems = this.DOM.el.querySelectorAll('.menu__item');
10 |         // menu item properties that will animate as we move the mouse around the menu
11 |         // we will be using interpolation to achieve smooth animations. 
12 |         // the “previous” and “current” values are the values to interpolate. 
13 |         // the value applied to the element, this case the image element (this.DOM.reveal) will be a value between these two values at a specific increment. 
14 |         // the amt is the amount to interpolate.
15 |         this.animatableProperties = {
16 |             // translationX
17 |             tx: {previous: 0, current: 0, amt: 0.15},
18 |             // translationY
19 |             ty: {previous: 0, current: 0, amt: 0.15},
20 |             // Rotation angle
21 |             rotation: {previous: 0, current: 0, amt: 0.15},
22 |             // CSS filter (brightness) value
23 |             brightness: {previous: 1, current: 1, amt: 0.06}
24 |         };
25 |         // array of MenuItem instances
26 |         this.menuItems = [];
27 |         // initialize the MenuItems
28 |         [...this.DOM.menuItems].forEach((item, pos) => this.menuItems.push(new MenuItem(item, pos, this.animatableProperties)));
29 |         // show the menu items (initial animation where each menu item gets revealed)
30 |         this.showMenuItems();
31 |     }
32 |     // initial animation for revealing the menu items
33 |     showMenuItems() {
34 |         const innerTexts = this.menuItems.map(item => item.DOM.textInner);
35 | 
36 |         gsap.timeline()
37 |         .set(innerTexts, {x: '20%', opacity: 0})
38 |         .to(innerTexts, {
39 |             duration: 1,
40 |             ease: 'power3',
41 |             x: '0%',
42 |             stagger: 0.05
43 |         })
44 |         .to(innerTexts, {
45 |             duration: 0.4,
46 |             ease: 'power1',
47 |             opacity: 1,
48 |             stagger: 0.05
49 |         }, 0);
50 |     }
51 | }


--------------------------------------------------------------------------------
/src/js/cursor.js:
--------------------------------------------------------------------------------
 1 | import { gsap } from 'gsap';
 2 | import { lerp, getMousePos } from './utils';
 3 | 
 4 | // Track the mouse position
 5 | let mouse = {x: 0, y: 0};
 6 | window.addEventListener('mousemove', ev => mouse = getMousePos(ev));
 7 | 
 8 | export class Cursor {
 9 |     constructor(el) {
10 |         this.DOM = {el: el};
11 |         this.DOM.el.style.opacity = 0;
12 |         
13 |         this.bounds = this.DOM.el.getBoundingClientRect();
14 |         
15 |         this.renderedStyles = {
16 |             tx: {previous: 0, current: 0, amt: 0.15},
17 |             ty: {previous: 0, current: 0, amt: 0.15},
18 |             scale: {previous: 1, current: 1, amt: 0.15},
19 |             opacity: {previous: 1, current: 1, amt: 0.1}
20 |         };
21 | 
22 |         this.onMouseMoveEv = () => {
23 |             this.renderedStyles.tx.previous = this.renderedStyles.tx.current = mouse.x - this.bounds.width/2;
24 |             this.renderedStyles.ty.previous = this.renderedStyles.ty.previous = mouse.y - this.bounds.height/2;
25 |             gsap.to(this.DOM.el, {duration: 0.9, ease: 'Power3.easeOut', opacity: 1});
26 |             requestAnimationFrame(() => this.render());
27 |             window.removeEventListener('mousemove', this.onMouseMoveEv);
28 |         };
29 |         window.addEventListener('mousemove', this.onMouseMoveEv);
30 |     }
31 |     enter() {
32 |         this.renderedStyles['scale'].current = 2.5;
33 |         this.renderedStyles['opacity'].current = 0.5;
34 |     }
35 |     leave() {
36 |         this.renderedStyles['scale'].current = 1;
37 |         this.renderedStyles['opacity'].current = 1;
38 |     }
39 |     render() {
40 |         this.renderedStyles['tx'].current = mouse.x - this.bounds.width/2;
41 |         this.renderedStyles['ty'].current = mouse.y - this.bounds.height/2;
42 | 
43 |         for (const key in this.renderedStyles ) {
44 |             this.renderedStyles[key].previous = lerp(this.renderedStyles[key].previous, this.renderedStyles[key].current, this.renderedStyles[key].amt);
45 |         }
46 |                     
47 |         this.DOM.el.style.transform = `translateX(${(this.renderedStyles['tx'].previous)}px) translateY(${this.renderedStyles['ty'].previous}px) scale(${this.renderedStyles['scale'].previous})`;
48 |         this.DOM.el.style.opacity = this.renderedStyles['opacity'].previous;
49 | 
50 |         requestAnimationFrame(() => this.render());
51 |     }
52 | }


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8" />
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 	<title>3D Letters Menu Hover Effect | Codrops</title>
 8 | 	<meta name="description" content="A hover animation for a menu with 3D letters and image effect." />
 9 | 	<meta name="keywords" content="gsap, animation, 3d, hover, menu, image, web design, javascript, template" />
10 | 	<meta name="author" content="Codrops" />
11 | 	<link rel="shortcut icon" href="favicon.ico">
12 | 	<link rel="stylesheet" href="https://use.typekit.net/pkk0kuo.css">
13 | 	<link rel="stylesheet" type="text/css" href="css/base.css" />
14 | 	<script>
15 | 	document.documentElement.className = "js";
16 | 	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 };
17 | 	supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
18 | 	</script>
19 | </head>
20 | <body class="loading">
21 | 	<main>
22 | 		<div class="frame">
23 | 			<h1 class="frame__title">3D Letters Menu Hover Effect</h1>
24 | 			<div class="frame__links">
25 | 				<a href="http://tympanus.net/Development/3DGridContentPreview/" class="frame__link">Previous demo</a>
26 | 				<a href="https://tympanus.net/codrops/?p=54446" class="frame__link">Article</a>
27 | 				<a href="https://github.com/codrops/3DLettersMenuHover/" class="frame__link">GitHub</a>
28 | 			</div>
29 | 			<a class="frame__author noline" href="https://twitter.com/codrops">@codrops</a>
30 | 			<a class="frame__related noline" href="https://tympanus.net/codrops/category/playground/">More demos</a>
31 | 		</div>
32 | 		<nav class="menu">
33 | 			<a class="menu__item" data-img="img/1.jpg">
34 | 				<span class="menu__item-text" data-splitting>Gotiva</span>
35 | 			</a>
36 | 			<a class="menu__item" data-img="img/2.jpg">
37 | 				<span class="menu__item-text" data-splitting>Hava</span>
38 | 			</a>
39 | 			<a class="menu__item" data-img="img/3.jpg">
40 | 				<span class="menu__item-text" data-splitting>Sikter</span>
41 | 			</a>
42 | 			<a class="menu__item" data-img="img/4.jpg">
43 | 				<span class="menu__item-text" data-splitting>Valo</span>
44 | 			</a>
45 | 			<a class="menu__item" data-img="img/5.jpg">
46 | 				<span class="menu__item-text" data-splitting>Opanci</span>
47 | 			</a>
48 | 			<a class="menu__item" data-img="img/6.jpg">
49 | 				<span class="menu__item-text" data-splitting>Insan</span>
50 | 			</a>
51 | 		</nav>
52 | 		<p class="content">
53 | 			Sinoć kad se vraćah iz topla hamama,<br>
54 | 			prođoh pokraj bašče staroga imama.<br>
55 | 			Kad tamo u bašči, u hladu jasmina<br>
56 | 			s ibrikom u ruci stajaše Emina.<br>
57 | 			Ja kakva je pusta! Tako mi imana,<br>
58 | 			stid je ne bi bilo da je kod sultana.<br>
59 | 			Pa još kada šeće i plećima kreće,<br>
60 | 			ni hodžin mi zapis više pomoć' neće!<br>
61 | 			Ja joj nazvah selam. Al' moga mi dina,<br>
62 | 			ne šće ni da čuje lijepa Emina,<br>
63 | 			već u srebrn ibrik zahvatila vode,<br>
64 | 			pa niz bašču đule zaljevati ode.
65 | 		</p>
66 | 	</main>
67 | 	<svg class="cursor" width="20" height="20" viewBox="0 0 20 20">
68 | 		<circle class="cursor__inner" cx="10" cy="10" r="5"/>
69 | 	</svg>
70 | 	<script src="js/index.js"></script>
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" class="no-js">
 3 | 
 4 | <head>
 5 | 	<meta charset="UTF-8">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 	<title>3D Letters Menu Hover Effect | Codrops</title>
 8 | 	<meta name="description" content="A hover animation for a menu with 3D letters and image effect.">
 9 | 	<meta name="keywords" content="gsap, animation, 3d, hover, menu, image, web design, javascript, template">
10 | 	<meta name="author" content="Codrops">
11 | 	<link rel="shortcut icon" href="favicon.26242483.ico">
12 | 	<link rel="stylesheet" href="https://use.typekit.net/pkk0kuo.css">
13 | 	<link rel="stylesheet" type="text/css" href="base.98fd6c19.css">
14 | 	<script>document.documentElement.className = "js";
15 | 
16 | var supportsCssVars = function supportsCssVars() {
17 |   var e,
18 |       t = document.createElement("style");
19 |   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;
20 | };
21 | 
22 | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
23 | <link rel="stylesheet" href="js.00a46daa.css"></head>
24 | <body class="loading">
25 | 	<main>
26 | 		<div class="frame">
27 | 			<h1 class="frame__title">3D Letters Menu Hover Effect</h1>
28 | 			<div class="frame__links">
29 | 				<a href="http://tympanus.net/Development/3DGridContentPreview/" class="frame__link">Previous demo</a>
30 | 				<a href="https://tympanus.net/codrops/?p=54446" class="frame__link">Article</a>
31 | 				<a href="https://github.com/codrops/3DLettersMenuHover/" class="frame__link">GitHub</a>
32 | 			</div>
33 | 			<a class="frame__author noline" href="https://twitter.com/codrops">@codrops</a>
34 | 			<a class="frame__related noline" href="https://tympanus.net/codrops/category/playground/">More demos</a>
35 | 		</div>
36 | 		<nav class="menu">
37 | 			<a class="menu__item" data-img="img/1.jpg">
38 | 				<span class="menu__item-text" data-splitting="">Gotiva</span>
39 | 			</a>
40 | 			<a class="menu__item" data-img="img/2.jpg">
41 | 				<span class="menu__item-text" data-splitting="">Hava</span>
42 | 			</a>
43 | 			<a class="menu__item" data-img="img/3.jpg">
44 | 				<span class="menu__item-text" data-splitting="">Sikter</span>
45 | 			</a>
46 | 			<a class="menu__item" data-img="img/4.jpg">
47 | 				<span class="menu__item-text" data-splitting="">Valo</span>
48 | 			</a>
49 | 			<a class="menu__item" data-img="img/5.jpg">
50 | 				<span class="menu__item-text" data-splitting="">Opanci</span>
51 | 			</a>
52 | 			<a class="menu__item" data-img="img/6.jpg">
53 | 				<span class="menu__item-text" data-splitting="">Insan</span>
54 | 			</a>
55 | 		</nav>
56 | 		<p class="content">
57 | 			Sinoć kad se vraćah iz topla hamama,<br>
58 | 			prođoh pokraj bašče staroga imama.<br>
59 | 			Kad tamo u bašči, u hladu jasmina<br>
60 | 			s ibrikom u ruci stajaše Emina.<br>
61 | 			Ja kakva je pusta! Tako mi imana,<br>
62 | 			stid je ne bi bilo da je kod sultana.<br>
63 | 			Pa još kada šeće i plećima kreće,<br>
64 | 			ni hodžin mi zapis više pomoć' neće!<br>
65 | 			Ja joj nazvah selam. Al' moga mi dina,<br>
66 | 			ne šće ni da čuje lijepa Emina,<br>
67 | 			već u srebrn ibrik zahvatila vode,<br>
68 | 			pa niz bašču đule zaljevati ode.
69 | 		</p>
70 | 	</main>
71 | 	<svg class="cursor" width="20" height="20" viewBox="0 0 20 20">
72 | 		<circle class="cursor__inner" cx="10" cy="10" r="5"></circle>
73 | 	</svg>
74 | 	<script src="js.00a46daa.js"></script>
75 | </body>
76 | </html>


--------------------------------------------------------------------------------
/dist/js.00a46daa.css:
--------------------------------------------------------------------------------
  1 | /* Recommended styles for Splitting */
  2 | .splitting .word,
  3 | .splitting .char {
  4 |   display: inline-block;
  5 | }
  6 | 
  7 | /* Psuedo-element chars */
  8 | .splitting .char {
  9 |   position: relative;
 10 | }
 11 | 
 12 | /**
 13 |  * Populate the psuedo elements with the character to allow for expanded effects
 14 |  * Set to `display: none` by default; just add `display: block` when you want
 15 |  * to use the psuedo elements
 16 |  */
 17 | .splitting .char::before,
 18 | .splitting .char::after {
 19 |   content: attr(data-char);
 20 |   position: absolute;
 21 |   top: 0;
 22 |   left: 0;
 23 |   visibility: hidden;
 24 |   transition: inherit;
 25 |   user-select: none;
 26 | }
 27 | 
 28 | /* Expanded CSS Variables */
 29 | 
 30 | .splitting {
 31 |   /* The center word index */
 32 |   --word-center: calc((var(--word-total) - 1) / 2);
 33 | 
 34 |   /* The center character index */
 35 |   --char-center: calc((var(--char-total) - 1) / 2);
 36 | 
 37 |   /* The center character index */
 38 |   --line-center: calc((var(--line-total) - 1) / 2);
 39 | }
 40 | 
 41 | .splitting .word {
 42 |   /* Pecent (0-1) of the word's position */
 43 |   --word-percent: calc(var(--word-index) / var(--word-total));
 44 | 
 45 |   /* Pecent (0-1) of the line's position */
 46 |   --line-percent: calc(var(--line-index) / var(--line-total));
 47 | }
 48 | 
 49 | .splitting .char {
 50 |   /* Percent (0-1) of the char's position */
 51 |   --char-percent: calc(var(--char-index) / var(--char-total));
 52 | 
 53 |   /* Offset from center, positive & negative */
 54 |   --char-offset: calc(var(--char-index) - var(--char-center));
 55 | 
 56 |   /* Absolute distance from center, only positive */
 57 |   --distance: calc(
 58 |      (var(--char-offset) * var(--char-offset)) / var(--char-center)
 59 |   );
 60 | 
 61 |   /* Distance from center where -1 is the far left, 0 is center, 1 is far right */
 62 |   --distance-sine: calc(var(--char-offset) / var(--char-center));
 63 | 
 64 |   /* Distance from center where 1 is far left/far right, 0 is center */
 65 |   --distance-percent: calc((var(--distance) / var(--char-center)));
 66 | }
 67 | .splitting.cells img { width: 100%; display: block; }
 68 | 
 69 | @supports ( display: grid ) {
 70 |   .splitting.cells {
 71 |     position: relative;
 72 |     overflow: hidden;
 73 |     background-size: cover;
 74 |     visibility: hidden;
 75 |   }
 76 | 
 77 |   .splitting .cell-grid {
 78 |     background: inherit;
 79 |     position: absolute;
 80 |     top: 0; 
 81 |     left: 0; 
 82 |     width: 100%; 
 83 |     height: 100%;
 84 |     display: grid;
 85 |     grid-template: repeat( var(--row-total), 1fr ) / repeat( var(--col-total), 1fr );
 86 |   }
 87 | 
 88 |   .splitting .cell {
 89 |     background: inherit;
 90 |     position: relative;
 91 |     overflow: hidden;
 92 |   }
 93 | 
 94 |   .splitting .cell-inner {
 95 |     background: inherit;
 96 |     position: absolute;
 97 |     visibility: visible;
 98 |     /* Size to fit the whole container size */
 99 |     width: calc(100% * var(--col-total));
100 |     height: calc(100% * var(--row-total));
101 |     /* Position properly */
102 |     left: calc(-100% * var(--col-index));
103 |     top: calc(-100% * var(--row-index));
104 |   }
105 | 
106 |   /* Helper variables for advanced effects */
107 |   .splitting .cell {
108 |     --center-x: calc((var(--col-total) - 1) / 2);
109 |     --center-y: calc((var(--row-total) - 1) / 2);
110 | 
111 |     /* Offset from center, positive & negative */
112 |     --offset-x: calc(var(--col-index) - var(--center-x));
113 |     --offset-y: calc(var(--row-index) - var(--center-y));
114 | 
115 |     /* Absolute distance from center, only positive */
116 |     --distance-x: calc( (var(--offset-x) * var(--offset-x)) / var(--center-x) );
117 | 
118 |     /* Absolute distance from center, only positive */
119 |     --distance-y: calc( (var(--offset-y) * var(--offset-y)) / var(--center-y) );
120 |   }
121 | }
122 | 
123 | 


--------------------------------------------------------------------------------
/src/css/base.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 20px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #111;
 14 | 	--color-bg: #f7f5f0;
 15 | 	--color-link: #ccc0a2;
 16 | 	--color-link-hover: #000;
 17 | 	--color-menu: #000;
 18 | 	--color-menu-hover: #f32015;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	--cursor-stroke: none; 
 22 | 	--cursor-fill: #e0530e; 
 23 | 	--cursor-stroke-width: 1px; 
 24 | 	-webkit-font-smoothing: antialiased;
 25 | 	-moz-osx-font-smoothing: grayscale;
 26 | 	font-family: roc-grotesk, sans-serif;
 27 | }
 28 | 
 29 | body, main {
 30 | 	height: 100vh;
 31 | 	overflow: hidden;
 32 | }
 33 | 
 34 | /* Page Loader */
 35 | .js .loading::before,
 36 | .js .loading::after {
 37 | 	content: '';
 38 | 	position: fixed;
 39 | 	z-index: 1000;
 40 | }
 41 | 
 42 | .js .loading::before {
 43 | 	top: 0;
 44 | 	left: 0;
 45 | 	width: 100%;
 46 | 	height: 100%;
 47 | 	background: var(--color-bg);
 48 | }
 49 | 
 50 | .js .loading::after {
 51 | 	top: 50%;
 52 | 	left: 50%;
 53 | 	width: 60px;
 54 | 	height: 60px;
 55 | 	margin: -30px 0 0 -30px;
 56 | 	opacity: 0.4;
 57 | 	background: var(--color-link);
 58 | 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 59 | 
 60 | }
 61 | 
 62 | @keyframes loaderAnim {
 63 | 	to {
 64 | 		opacity: 1;
 65 | 		transform: scale3d(0.5,0.5,1);
 66 | 	}
 67 | }
 68 | 
 69 | a {
 70 | 	text-decoration: none;
 71 | 	color: var(--color-link);
 72 | 	outline: none;
 73 | 	position: relative;
 74 | }
 75 | 
 76 | a:hover {
 77 | 	color: var(--color-link-hover);
 78 | 	outline: none;
 79 | }
 80 | 
 81 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 82 | a:focus {
 83 | 	/* Provide a fallback style for browsers
 84 | 	 that don't support :focus-visible */
 85 | 	outline: none;
 86 | 	background: lightgrey;
 87 | }
 88 | 
 89 | a:focus:not(:focus-visible) {
 90 | 	/* Remove the focus indicator on mouse-focus for browsers
 91 | 	 that do support :focus-visible */
 92 | 	background: transparent;
 93 | }
 94 | 
 95 | a:focus-visible {
 96 | 	/* Draw a very noticeable focus style for
 97 | 	 keyboard-focus on browsers that do support
 98 | 	 :focus-visible */
 99 | 	outline: 2px solid red;
100 | 	background: transparent;
101 | }
102 | 
103 | .cursor { 
104 | 	display: none; 
105 | }
106 | 
107 | .unbutton {
108 | 	background: none;
109 | 	border: 0;
110 | 	padding: 0;
111 | 	margin: 0;
112 | 	font: inherit;
113 | }
114 | 
115 | .unbutton:focus {
116 | 	outline: none;
117 | }
118 | 
119 | .frame {
120 | 	padding: 1rem;
121 | 	text-align: center;
122 | 	position: relative;
123 | 	z-index: 1000;
124 | 	font-weight: 500;
125 | }
126 | 
127 | .frame a:not(.noline)::after {
128 | 	content: '';
129 | 	height: 1px;
130 | 	width: 100%;
131 | 	background: currentColor;
132 | 	position: absolute;
133 | 	left: 0;
134 | 	bottom: 0.15rem;
135 | }
136 | 
137 | .frame__title {
138 | 	font-size: 1rem;
139 | 	margin: 0 0 1rem;
140 | 	font-weight: 500;
141 | }
142 | 
143 | .frame__links {
144 | 	display: inline;
145 | }
146 | 
147 | .frame__links a:not(:last-child) {
148 | 	margin-right: 1rem;
149 | }
150 | 
151 | .frame__author {
152 | 	margin: 0 1rem ;
153 | 	display: inline-block;
154 | }
155 | 
156 | .frame__related {
157 | 	white-space: nowrap;
158 | }
159 | 
160 | .menu {
161 | 	padding: 2rem 1rem 3rem;
162 | 	display: flex;
163 | 	align-items: center;
164 | 	justify-content: center;
165 | 	flex-wrap: wrap;
166 | 	-webkit-touch-callout: none;
167 | 	-webkit-user-select: none;
168 | 	-moz-user-select: none;
169 | 	-ms-user-select: none;
170 | 	user-select: none;
171 | 	counter-reset: menucounter;
172 | 	z-index: 100;
173 | }
174 | 
175 | .menu__item {
176 | 	margin-bottom: 1rem;
177 | 	font-family: kudryashev-d-contrast-sans, sans-serif;
178 | 	text-transform: uppercase;
179 | 	cursor: pointer;
180 | 	color: var(--color-menu);
181 | 	will-change: transform;
182 | }
183 | 
184 | .menu__item::before {
185 | 	counter-increment: menucounter;
186 | 	content: counters(menucounter, ".", decimal-leading-zero);
187 | 	position: absolute;
188 | 	left: 0;
189 | 	top: 0;
190 | 	color: var(--color-link);
191 | 	z-index: -1;
192 | 	line-height: 1;
193 | }
194 | 
195 | .menu__item-text {
196 | 	pointer-events: none;
197 | 	display: block;
198 | 	line-height: 1;
199 | 	position: relative;
200 | 	z-index: -1;
201 | 	font-size: 2rem;
202 | }
203 | 
204 | .menu__item-text .word {
205 | 	padding: 0 1.25rem;
206 | 	overflow: hidden;
207 | 	perspective: 1000px;
208 | 	perspective-origin: -150% 50%;
209 | }
210 | 
211 | .menu__item-text .word--clone {
212 | 	position: absolute;
213 | 	width: 100%;
214 | 	height: 100%;
215 | 	top: 0;
216 | 	left: 0;
217 | }
218 | 
219 | .menu__item-text .word--clone .char {
220 | 	opacity: 0;
221 | }
222 | 
223 | .menu__item-text .char {
224 | 	transform-origin: 0% 0%;
225 | 	will-change: transform;
226 | }
227 | 
228 | .hover-reveal {
229 | 	position: absolute;
230 | 	z-index: -1;
231 | 	width: 350px;
232 | 	height: 450px;
233 | 	top: 0;
234 | 	left: 0;
235 | 	pointer-events: none;
236 | 	opacity: 0;
237 | 	will-change: transform, filter;
238 | }
239 | 
240 | .hover-reveal__inner {
241 | 	overflow: hidden;
242 | 	will-change: transform, opacity;
243 | }
244 | 
245 | .hover-reveal__inner,
246 | .hover-reveal__img {
247 | 	width: 100%;
248 | 	height: 100%;
249 | 	position: relative;
250 | }
251 | 
252 | .hover-reveal__img {
253 | 	background-size: cover;
254 | 	background-position: 50% 50%;
255 | 	will-change: transform;
256 | }
257 | 
258 | .content {
259 | 	max-width: 30ch;
260 | 	margin: 0 auto;
261 | 	z-index: -1;
262 | 	position: relative;
263 | }
264 | 
265 | .content::after {
266 | 	content: '';
267 | 	position: fixed;
268 | 	pointer-events: none;
269 | 	z-index: 500;
270 | 	width: 100%;
271 | 	height: 100%;
272 | 	top: 0;
273 | 	left: 0;
274 | 	z-index: 1;
275 | 	background: linear-gradient(transparent 0%,transparent 70%,var(--color-bg) 100%);
276 | }
277 | 
278 | @media screen and (min-width: 53em) {
279 | 	.frame {
280 | 		pointer-events: none;
281 | 		position: fixed;
282 | 		display: grid;
283 | 		height: 100vh;
284 | 		width: 100%;
285 | 		align-content: space-between;
286 | 		grid-template-columns: 30% 40% 30%;
287 | 		grid-template-rows: auto auto;
288 | 		grid-template-areas: 'title links ...' 'author ... related';
289 | 		padding: 1.5rem 2rem;
290 | 	}
291 | 	.frame a {
292 | 		pointer-events: auto;
293 | 	}
294 | 	.frame__title {
295 | 		justify-self: start;
296 | 	}
297 | 	.frame__author {
298 | 		margin: 0;
299 | 		grid-area: author;
300 | 		justify-self: start;
301 | 	}
302 | 	.frame__related {
303 | 		grid-area: related;
304 | 		justify-self: end;
305 | 	}
306 | 	.menu {
307 | 		padding: 21vh 1rem 3rem;
308 | 	}
309 | 	.menu__item::before {
310 | 		left: 1vw;
311 | 		top: 0.25vw;
312 | 	}
313 | 	.menu__item-text {
314 | 		font-size: 7.5vw;
315 | 	}
316 | 	.menu__item-text .word {
317 |     	padding: 0 3vw;
318 |     }
319 | }
320 | 
321 | @media (any-pointer:fine) {
322 | 	.cursor {
323 | 		position: fixed;
324 | 		top: 0;
325 | 		left: 0;
326 | 		display: block;
327 | 		pointer-events: none;
328 | 		z-index: 1001;
329 | 	}
330 | 
331 | 	.cursor__inner {
332 | 		fill: var(--cursor-fill);
333 | 		stroke: var(--cursor-stroke);
334 | 		stroke-width: var(--cursor-stroke-width);
335 | 		opacity: 0.7;
336 | 	}
337 | 
338 | 	.no-js .cursor {
339 | 		display: none;
340 | 	}
341 | 
342 | }
343 | 


--------------------------------------------------------------------------------
/dist/base.98fd6c19.css:
--------------------------------------------------------------------------------
  1 | *,
  2 | *::after,
  3 | *::before {
  4 | 	box-sizing: border-box;
  5 | }
  6 | 
  7 | :root {
  8 | 	font-size: 20px;
  9 | }
 10 | 
 11 | body {
 12 | 	margin: 0;
 13 | 	--color-text: #111;
 14 | 	--color-bg: #f7f5f0;
 15 | 	--color-link: #ccc0a2;
 16 | 	--color-link-hover: #000;
 17 | 	--color-menu: #000;
 18 | 	--color-menu-hover: #f32015;
 19 | 	color: var(--color-text);
 20 | 	background-color: var(--color-bg);
 21 | 	--cursor-stroke: none; 
 22 | 	--cursor-fill: #e0530e; 
 23 | 	--cursor-stroke-width: 1px; 
 24 | 	-webkit-font-smoothing: antialiased;
 25 | 	-moz-osx-font-smoothing: grayscale;
 26 | 	font-family: roc-grotesk, sans-serif;
 27 | }
 28 | 
 29 | body, main {
 30 | 	height: 100vh;
 31 | 	overflow: hidden;
 32 | }
 33 | 
 34 | /* Page Loader */
 35 | .js .loading::before,
 36 | .js .loading::after {
 37 | 	content: '';
 38 | 	position: fixed;
 39 | 	z-index: 1000;
 40 | }
 41 | 
 42 | .js .loading::before {
 43 | 	top: 0;
 44 | 	left: 0;
 45 | 	width: 100%;
 46 | 	height: 100%;
 47 | 	background: var(--color-bg);
 48 | }
 49 | 
 50 | .js .loading::after {
 51 | 	top: 50%;
 52 | 	left: 50%;
 53 | 	width: 60px;
 54 | 	height: 60px;
 55 | 	margin: -30px 0 0 -30px;
 56 | 	opacity: 0.4;
 57 | 	background: var(--color-link);
 58 | 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 59 | 
 60 | }
 61 | 
 62 | @keyframes loaderAnim {
 63 | 	to {
 64 | 		opacity: 1;
 65 | 		transform: scale3d(0.5,0.5,1);
 66 | 	}
 67 | }
 68 | 
 69 | a {
 70 | 	text-decoration: none;
 71 | 	color: var(--color-link);
 72 | 	outline: none;
 73 | 	position: relative;
 74 | }
 75 | 
 76 | a:hover {
 77 | 	color: var(--color-link-hover);
 78 | 	outline: none;
 79 | }
 80 | 
 81 | /* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
 82 | a:focus {
 83 | 	/* Provide a fallback style for browsers
 84 | 	 that don't support :focus-visible */
 85 | 	outline: none;
 86 | 	background: lightgrey;
 87 | }
 88 | 
 89 | a:focus:not(:focus-visible) {
 90 | 	/* Remove the focus indicator on mouse-focus for browsers
 91 | 	 that do support :focus-visible */
 92 | 	background: transparent;
 93 | }
 94 | 
 95 | a:focus-visible {
 96 | 	/* Draw a very noticeable focus style for
 97 | 	 keyboard-focus on browsers that do support
 98 | 	 :focus-visible */
 99 | 	outline: 2px solid red;
100 | 	background: transparent;
101 | }
102 | 
103 | .cursor { 
104 | 	display: none; 
105 | }
106 | 
107 | .unbutton {
108 | 	background: none;
109 | 	border: 0;
110 | 	padding: 0;
111 | 	margin: 0;
112 | 	font: inherit;
113 | }
114 | 
115 | .unbutton:focus {
116 | 	outline: none;
117 | }
118 | 
119 | .frame {
120 | 	padding: 1rem;
121 | 	text-align: center;
122 | 	position: relative;
123 | 	z-index: 1000;
124 | 	font-weight: 500;
125 | }
126 | 
127 | .frame a:not(.noline)::after {
128 | 	content: '';
129 | 	height: 1px;
130 | 	width: 100%;
131 | 	background: currentColor;
132 | 	position: absolute;
133 | 	left: 0;
134 | 	bottom: 0.15rem;
135 | }
136 | 
137 | .frame__title {
138 | 	font-size: 1rem;
139 | 	margin: 0 0 1rem;
140 | 	font-weight: 500;
141 | }
142 | 
143 | .frame__links {
144 | 	display: inline;
145 | }
146 | 
147 | .frame__links a:not(:last-child) {
148 | 	margin-right: 1rem;
149 | }
150 | 
151 | .frame__author {
152 | 	margin: 0 1rem ;
153 | 	display: inline-block;
154 | }
155 | 
156 | .frame__related {
157 | 	white-space: nowrap;
158 | }
159 | 
160 | .menu {
161 | 	padding: 2rem 1rem 3rem;
162 | 	display: flex;
163 | 	align-items: center;
164 | 	justify-content: center;
165 | 	flex-wrap: wrap;
166 | 	-webkit-touch-callout: none;
167 | 	-webkit-user-select: none;
168 | 	-moz-user-select: none;
169 | 	-ms-user-select: none;
170 | 	user-select: none;
171 | 	counter-reset: menucounter;
172 | 	z-index: 100;
173 | }
174 | 
175 | .menu__item {
176 | 	margin-bottom: 1rem;
177 | 	font-family: kudryashev-d-contrast-sans, sans-serif;
178 | 	text-transform: uppercase;
179 | 	cursor: pointer;
180 | 	color: var(--color-menu);
181 | 	will-change: transform;
182 | }
183 | 
184 | .menu__item::before {
185 | 	counter-increment: menucounter;
186 | 	content: counters(menucounter, ".", decimal-leading-zero);
187 | 	position: absolute;
188 | 	left: 0;
189 | 	top: 0;
190 | 	color: var(--color-link);
191 | 	z-index: -1;
192 | 	line-height: 1;
193 | }
194 | 
195 | .menu__item-text {
196 | 	pointer-events: none;
197 | 	display: block;
198 | 	line-height: 1;
199 | 	position: relative;
200 | 	z-index: -1;
201 | 	font-size: 2rem;
202 | }
203 | 
204 | .menu__item-text .word {
205 | 	padding: 0 1.25rem;
206 | 	overflow: hidden;
207 | 	perspective: 1000px;
208 | 	perspective-origin: -150% 50%;
209 | }
210 | 
211 | .menu__item-text .word--clone {
212 | 	position: absolute;
213 | 	width: 100%;
214 | 	height: 100%;
215 | 	top: 0;
216 | 	left: 0;
217 | }
218 | 
219 | .menu__item-text .word--clone .char {
220 | 	opacity: 0;
221 | }
222 | 
223 | .menu__item-text .char {
224 | 	transform-origin: 0% 0%;
225 | 	will-change: transform;
226 | }
227 | 
228 | .hover-reveal {
229 | 	position: absolute;
230 | 	z-index: -1;
231 | 	width: 350px;
232 | 	height: 450px;
233 | 	top: 0;
234 | 	left: 0;
235 | 	pointer-events: none;
236 | 	opacity: 0;
237 | 	will-change: transform, filter;
238 | }
239 | 
240 | .hover-reveal__inner {
241 | 	overflow: hidden;
242 | 	will-change: transform, opacity;
243 | }
244 | 
245 | .hover-reveal__inner,
246 | .hover-reveal__img {
247 | 	width: 100%;
248 | 	height: 100%;
249 | 	position: relative;
250 | }
251 | 
252 | .hover-reveal__img {
253 | 	background-size: cover;
254 | 	background-position: 50% 50%;
255 | 	will-change: transform;
256 | }
257 | 
258 | .content {
259 | 	max-width: 30ch;
260 | 	margin: 0 auto;
261 | 	z-index: -1;
262 | 	position: relative;
263 | }
264 | 
265 | .content::after {
266 | 	content: '';
267 | 	position: fixed;
268 | 	pointer-events: none;
269 | 	z-index: 500;
270 | 	width: 100%;
271 | 	height: 100%;
272 | 	top: 0;
273 | 	left: 0;
274 | 	z-index: 1;
275 | 	background: linear-gradient(transparent 0%,transparent 70%,var(--color-bg) 100%);
276 | }
277 | 
278 | @media screen and (min-width: 53em) {
279 | 	.frame {
280 | 		pointer-events: none;
281 | 		position: fixed;
282 | 		display: grid;
283 | 		height: 100vh;
284 | 		width: 100%;
285 | 		align-content: space-between;
286 | 		grid-template-columns: 30% 40% 30%;
287 | 		grid-template-rows: auto auto;
288 | 		grid-template-areas: 'title links ...' 'author ... related';
289 | 		padding: 1.5rem 2rem;
290 | 	}
291 | 	.frame a {
292 | 		pointer-events: auto;
293 | 	}
294 | 	.frame__title {
295 | 		justify-self: start;
296 | 	}
297 | 	.frame__author {
298 | 		margin: 0;
299 | 		grid-area: author;
300 | 		justify-self: start;
301 | 	}
302 | 	.frame__related {
303 | 		grid-area: related;
304 | 		justify-self: end;
305 | 	}
306 | 	.menu {
307 | 		padding: 21vh 1rem 3rem;
308 | 	}
309 | 	.menu__item::before {
310 | 		left: 1vw;
311 | 		top: 0.25vw;
312 | 	}
313 | 	.menu__item-text {
314 | 		font-size: 7.5vw;
315 | 	}
316 | 	.menu__item-text .word {
317 |     	padding: 0 3vw;
318 |     }
319 | }
320 | 
321 | @media (any-pointer:fine) {
322 | 	.cursor {
323 | 		position: fixed;
324 | 		top: 0;
325 | 		left: 0;
326 | 		display: block;
327 | 		pointer-events: none;
328 | 		z-index: 1001;
329 | 	}
330 | 
331 | 	.cursor__inner {
332 | 		fill: var(--cursor-fill);
333 | 		stroke: var(--cursor-stroke);
334 | 		stroke-width: var(--cursor-stroke-width);
335 | 		opacity: 0.7;
336 | 	}
337 | 
338 | 	.no-js .cursor {
339 | 		display: none;
340 | 	}
341 | 
342 | }
343 | 


--------------------------------------------------------------------------------
/src/js/menuItem.js:
--------------------------------------------------------------------------------
  1 | import { gsap } from 'gsap';
  2 | import { map, lerp, clamp, getMousePos } from './utils';
  3 | const images = Object.entries(require('../img/*.jpg'));
  4 | 
  5 | import 'splitting/dist/splitting.css';
  6 | import 'splitting/dist/splitting-cells.css';
  7 | import Splitting from 'splitting';
  8 | 
  9 | // initialize Splitting
 10 | const splitting = Splitting();
 11 | 
 12 | // track the mouse position
 13 | let mousepos = {x: 0, y: 0};
 14 | // cache the mouse position
 15 | let mousePosCache = mousepos;
 16 | let cursorDirection = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y};
 17 | 
 18 | // update mouse position when moving the mouse
 19 | window.addEventListener('mousemove', ev => mousepos = getMousePos(ev));
 20 | 
 21 | export class MenuItem {
 22 |     constructor(el, inMenuPosition, animatableProperties) {
 23 |         // el is the <a> with class "menu__item"
 24 |         this.DOM = {el: el};
 25 |         // position in the Menu
 26 |         this.inMenuPosition = inMenuPosition;
 27 |         // menu item properties that will animate as we move the mouse around the menu
 28 |         this.animatableProperties = animatableProperties;
 29 |         // create the image structure and split title texts
 30 |         this.layout();
 31 |         // initialize some events
 32 |         this.initEvents();
 33 |     }
 34 |     // create the image structure
 35 |     // we want to add/append to the menu item the following html:
 36 |     // <div class="hover-reveal">
 37 |     //   <div class="hover-reveal__inner" style="overflow: hidden;">
 38 |     //     <div class="hover-reveal__img" style="background-image: url(pathToImage);">
 39 |     //     </div>
 40 |     //   </div>
 41 |     // </div>
 42 |     layout() {
 43 |         // this is the element that gets its position animated (and perhaps other properties like the rotation etc..)
 44 |         this.DOM.reveal = document.createElement('div');
 45 |         this.DOM.reveal.className = 'hover-reveal';
 46 |         this.DOM.reveal.style.transformOrigin = '0% 0%';
 47 |         // the next two elements could actually be only one, the image element
 48 |         // adding an extra wrapper (revealInner) around the image element with overflow hidden, gives us the possibility to scale the image inside
 49 |         this.DOM.revealInner = document.createElement('div');
 50 |         this.DOM.revealInner.className = 'hover-reveal__inner';
 51 |         this.DOM.revealImage = document.createElement('div');
 52 |         this.DOM.revealImage.className = 'hover-reveal__img';
 53 |         this.DOM.revealImage.style.backgroundImage = `url(${images[this.inMenuPosition][1]})`;
 54 | 
 55 |         this.DOM.revealInner.appendChild(this.DOM.revealImage);
 56 |         this.DOM.reveal.appendChild(this.DOM.revealInner);
 57 |         this.DOM.el.appendChild(this.DOM.reveal);
 58 | 
 59 |         // title text/chars elements
 60 |         // text element
 61 |         this.DOM.textInner = this.DOM.el.querySelector('.menu__item-text');
 62 |         this.DOM.word = this.DOM.textInner.querySelector('.word');
 63 |         this.DOM.wordClone = this.DOM.word.cloneNode(true);
 64 |         this.DOM.wordClone.classList.add('word--clone');
 65 |         this.DOM.textInner.appendChild(this.DOM.wordClone);
 66 |         // all text chars (Splittingjs)
 67 |         this.DOM.titleChars = [...this.DOM.word.querySelectorAll('span.char')];
 68 |         this.DOM.titleCloneChars = [...this.DOM.wordClone.querySelectorAll('span.char')];
 69 |     }
 70 |     // calculate the position/size of both the menu item and reveal element
 71 |     calcBounds() {
 72 |         this.bounds = {
 73 |             el: this.DOM.el.getBoundingClientRect(),
 74 |             reveal: this.DOM.reveal.getBoundingClientRect(),
 75 |             width: this.DOM.reveal.offsetWidth,
 76 |             height: this.DOM.reveal.offsetHeight
 77 |         };
 78 |     }
 79 |     // bind some events
 80 |     initEvents() {
 81 |         this.mouseenterFn = () => {
 82 |             this.hoverTimeout = setTimeout(() => {
 83 |                 this.hoverEnter = true;
 84 |                 this.firstRAFCycle = true;
 85 |                 // calculate position/sizes the first time
 86 |                 this.calcBounds();
 87 | 
 88 |                 this.DOM.reveal.style.transformOrigin = '100% 0%';
 89 |                 // animate the title characters
 90 |                 this.animateCharsIn();
 91 |                 // show the image element
 92 |                 this.showImage();
 93 | 
 94 |                 // start the render loop animation (rAF)
 95 |                 this.loopRender();
 96 |             }, 100);
 97 |         }
 98 |         this.mouseleaveFn = () => {
 99 |             if ( this.hoverTimeout ) {
100 |                 clearTimeout(this.hoverTimeout);
101 |             }
102 |             if ( this.hoverEnter ) {
103 |                 this.hoverEnter = null;
104 |                 // stop the render loop animation (rAF)
105 |                 this.stopRendering();
106 |                 this.animateCharsOut();
107 |                 // hide the image element
108 |                 this.hideImage();
109 |             }
110 |         };
111 |         
112 |         this.DOM.el.addEventListener('mouseenter', this.mouseenterFn);
113 |         this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn);
114 |     }
115 |     animateCharsIn() {
116 |         this.animateCharsTimeline = gsap.timeline({
117 |             defaults: {duration: 0.5, ease: 'power2', stagger: 0.025}
118 |         })
119 |         .to(this.DOM.titleChars, {
120 |             y: '100%',
121 |             rotationX: -90,
122 |             opacity: 0
123 |         })
124 |         .to(this.DOM.titleCloneChars, {
125 |             startAt: {y: '-100%', rotationX: 90, opacity: 0},
126 |             y: '0%',
127 |             rotationX: 0,
128 |             opacity: 1
129 |         }, 0);
130 |     }
131 |     animateCharsOut() {
132 |         if ( this.animateCharsTimeline ) this.animateCharsTimeline.kill();
133 |         this.animateCharsTimeline = gsap.timeline({
134 |             defaults: {duration: 0.5, ease: 'power2', stagger: 0.025}
135 |         })
136 |         .to(this.DOM.titleCloneChars, {
137 |             y: '-100%',
138 |             rotationX: 90,
139 |             opacity: 0
140 |         })
141 |         .to(this.DOM.titleChars, {
142 |             startAt: {y: '100%', rotationX: -90, opacity: 0},
143 |             y: '0%',
144 |             rotationX: 0,
145 |             opacity: 1
146 |         }, 0);
147 |     }
148 |     // show the image element
149 |     showImage() {
150 |         if (this.tl) {
151 |             this.tl.kill();
152 |         }
153 | 
154 |         this.tl = gsap.timeline({
155 |             onStart: () => {
156 |                 // show both image and its parent element
157 |                 gsap.set([this.DOM.reveal, this.DOM.revealInner], {opacity: 1})
158 |                 // set a high z-index value so image appears on top of other elements
159 |                 gsap.set(this.DOM.el, {zIndex: images.length});
160 |             }
161 |         })
162 |         // animate the image wrap
163 |         .to(this.DOM.revealInner, {
164 |             duration: 1.3,
165 |             ease: 'expo',
166 |             startAt: {scale: 0.5},
167 |             scale: 1
168 |         })
169 |         // animate the image element
170 |         .to(this.DOM.revealImage, {
171 |             duration: 1.3,
172 |             ease: 'expo',
173 |             startAt: {scaleX: 2},
174 |             scaleX: 1
175 |         }, 0)
176 |         .to(this.DOM.reveal, {
177 |             duration: 0.6,
178 |             ease: 'power1.inOut'
179 |         }, 0);
180 |     }
181 |     // hide the image element
182 |     hideImage() {
183 |         if (this.tl) {
184 |             this.tl.kill();
185 |         }
186 | 
187 |         this.tl = gsap.timeline({
188 |             defaults: {
189 |                 duration: 1.2,
190 |                 ease: 'power1',
191 |             },
192 |             onStart: () => {
193 |                 gsap.set(this.DOM.el, {zIndex: 1});
194 |             },
195 |             onComplete: () => {
196 |                 gsap.set(this.DOM.reveal, {opacity: 0});
197 |             }
198 |         })
199 |         .to(this.DOM.revealInner, {
200 |             opacity: 0
201 |         })
202 |         .to(this.DOM.revealImage, {
203 |             scaleX: 1.7
204 |         }, 0)
205 |         .to(this.DOM.reveal, {
206 |             rotation: cursorDirection.x < 0 ? '+=5' : '-=5',
207 |             y: '200%'
208 |         }, 0);
209 |     }
210 |     // start the render loop animation (rAF)
211 |     loopRender() {
212 |         if ( !this.requestId ) {
213 |             this.requestId = requestAnimationFrame(() => this.render());
214 |         }
215 |     }
216 |     // stop the render loop animation (rAF)
217 |     stopRendering() {
218 |         if ( this.requestId ) {
219 |             window.cancelAnimationFrame(this.requestId);
220 |             this.requestId = undefined;
221 |         }
222 |     }
223 |     // translate the item as the mouse moves
224 |     render() {
225 |         this.requestId = undefined;
226 | 
227 |         // calculate the mouse distance (current vs previous cycle)
228 |         const mouseDistanceX = clamp(Math.abs(mousePosCache.x - mousepos.x), 0, 100);
229 |         // direction where the mouse is moving
230 |         cursorDirection = {x: mousePosCache.x-mousepos.x, y: mousePosCache.y-mousepos.y};
231 |         // updated cache values
232 |         mousePosCache = {x: mousepos.x, y: mousepos.y};
233 |         
234 |         // new translation values
235 |         this.animatableProperties.tx.current = this.isPositionOdd ? Math.abs(mousepos.x - this.bounds.el.left) : Math.abs(mousepos.x - this.bounds.el.left) - this.bounds.width;
236 |         this.animatableProperties.ty.current = this.firstRAFCycle ? this.bounds.height/1.5 : Math.abs(mousepos.y - this.bounds.el.top);
237 |         // new rotation value
238 |         let startingAngle = -30;  
239 |         this.animatableProperties.rotation.current = this.firstRAFCycle 
240 |                                                      ? startingAngle
241 |                                                      : map(mouseDistanceX, 0, 300, startingAngle, cursorDirection.x < 0 ? startingAngle+100 : startingAngle-100)
242 |         
243 | 
244 |         // new filter value
245 |         this.animatableProperties.brightness.current = this.firstRAFCycle ? 1 : map(mouseDistanceX,0,100,1,5);
246 | 
247 |         // set up the interpolated values
248 |         // for the first cycle, both the interpolated values need to be the same so there's no "lerped" animation between the previous and current state
249 |         this.animatableProperties.tx.previous = this.firstRAFCycle ? this.animatableProperties.tx.current : lerp(this.animatableProperties.tx.previous, this.animatableProperties.tx.current, this.animatableProperties.tx.amt);
250 |         this.animatableProperties.ty.previous = this.firstRAFCycle ? this.animatableProperties.ty.current : lerp(this.animatableProperties.ty.previous, this.animatableProperties.ty.current, this.animatableProperties.ty.amt);
251 |         this.animatableProperties.rotation.previous = this.firstRAFCycle ? this.animatableProperties.rotation.current : lerp(this.animatableProperties.rotation.previous, this.animatableProperties.rotation.current, this.animatableProperties.rotation.amt);
252 |         this.animatableProperties.brightness.previous = this.firstRAFCycle ? this.animatableProperties.brightness.current : lerp(this.animatableProperties.brightness.previous, this.animatableProperties.brightness.current, this.animatableProperties.brightness.amt);
253 |         
254 |         // set styles
255 |         gsap.set(this.DOM.reveal, {
256 |             x: this.animatableProperties.tx.previous,
257 |             y: this.animatableProperties.ty.previous,
258 |             rotation: this.animatableProperties.rotation.previous,
259 |             //filter: `brightness(${this.animatableProperties.brightness.previous})`
260 |         });
261 | 
262 |         // loop
263 |         this.firstRAFCycle = false;
264 |         this.loopRender();
265 |     }
266 | }


--------------------------------------------------------------------------------