-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo4.js
102 lines (93 loc) · 2.31 KB
/
demo4.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/**
* demo4.js
* http://www.codrops.com
*
* Licensed under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* Copyright 2017, Codrops
* http://www.codrops.com
*/
{
const DOM = {};
DOM.intro = document.querySelector('.content--intro');
DOM.shape = DOM.intro.querySelector('svg.shape');
DOM.path = DOM.shape.querySelector('path');
DOM.enter = document.querySelector('.enter');
charming(DOM.enter);
DOM.enterLetters = Array.from(DOM.enter.querySelectorAll('span'));
const init = () => {
imagesLoaded(document.body, {background: true} , () => document.body.classList.remove('loading'));
DOM.enter.addEventListener('click', navigate);
DOM.enter.addEventListener('touchenter', navigate);
DOM.enter.addEventListener('mouseenter', enterHoverInFn);
DOM.enter.addEventListener('mouseleave', enterHoverOutFn);
};
let loaded;
const navigate = () => {
if ( loaded ) return;
loaded = true;
anime({
targets: DOM.intro,
translateY: {
value: '-200vh',
delay: 100,
duration: 2000,
easing: 'easeInOutQuad'
}
});
anime({
targets: DOM.path,
duration: 1200,
easing: 'linear',
d: DOM.path.getAttribute('pathdata:id')
});
};
let isActive;
let enterTimeout;
const enterHoverInFn = () => enterTimeout = setTimeout(() => {
isActive = true;
anime.remove(DOM.enterLetters);
anime({
targets: DOM.enterLetters,
delay: (t,i) => i*7,
translateY: [
{value: 10, duration: 150, easing: 'easeInQuad'},
{value: [-10,0], duration: 150, easing: 'easeOutQuad'}
],
opacity: [
{value: 0, duration: 150, easing: 'linear'},
{value: 1, duration: 150, easing: 'linear'}
],
color: {
value: '#ffffff',
duration: 1,
delay: (t,i,l) => i*7+150
}
});
}, 50);
const enterHoverOutFn = () => {
clearTimeout(enterTimeout);
if( !isActive ) return;
isActive = false;
anime.remove(DOM.enterLetters);
anime({
targets: DOM.enterLetters,
delay: (t,i,l) => (l-i-1)*7,
translateY: [
{value: 10, duration: 150, easing: 'easeInQuad'},
{value: [-10,0], duration: 150, easing: 'easeOutQuad'}
],
opacity: [
{value: 0, duration: 150, easing: 'linear'},
{value: 1, duration: 150, easing: 'linear'}
],
color: {
value: '#4b2cf2',
duration: 1,
delay: (t,i,l) => (l-i-1)*7+150
}
});
};
init();
};