-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
78 lines (74 loc) · 2.43 KB
/
script.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
Shery.imageEffect("#back", {
style: 3,
config: {
uFrequencyX: { value: 12, range: [0, 100] },
uFrequencyY: { value: 12, range: [0, 100] },
uFrequencyZ: { value: 10, range: [0, 100] },
geoVertex: { range: [1, 64], value: 32 },
aspect: { value: 1.9359756097560976 },
gooey: { value: true },
infiniteGooey: { value: true },
durationOut: { value: 1, range: [0.1, 5] },
durationIn: { value: 1.5, range: [0.1, 5] },
displaceAmount: { value: 0.5 },
masker: { value: true },
maskVal: { value: 1.26, range: [1, 5] },
scrollType: { value: 0 },
noEffectGooey: { value: false },
onMouse: { value: 0 },
noise_speed: { value: 0.2, range: [0, 10] },
metaball: { value: 0.2, range: [0, 2] },
discard_threshold: { value: 0.5, range: [0, 1] },
antialias_threshold: { value: 0, range: [0, 0.1] },
noise_height: { value: 0.5, range: [0, 2] },
noise_scale: { value: 10, range: [0, 100] },
},
gooey: true,
});
document.querySelector("#btn").addEventListener("click", function() {
location.replace("https://www.ray-ban.com/usa");
});
var elems = document.querySelectorAll(".elem");
elems.forEach(function(elem){
var h1 = elem.querySelectorAll("h1");
var index = 0;
var animating = false;
document.querySelector("#main").addEventListener("click", function() {
if (!animating) {
animating = true;
gsap.to (h1[index], {
top: '-=100%',
ease: Expo.easeInOut,
duration: 1,
onComplete: function(){
gsap.set(this._targets[0], { top: "100%" });
animating = false;
},
});
index === h1.length-1 ? (index = 0) : index++;
gsap.to (h1[index], {
top: '0',
ease: Expo.easeInOut,
duration: 1
})
}
});
})
// var h1 = document.querySelectorAll("h1");
// var index = 0;
// document.querySelector("#main").addEventListener("click", function() {
// gsap.to (h1[index], {
// top: '-=100%',
// ease: Expo.easeInOut,
// duration: 1,
// onComplete: function(){
// gsap.set(this._targets[0], { top: "100%" });
// },
// });
// index === h1.length-1 ? (index = 0) : index++;
// gsap.to (h1[index], {
// top: '0',
// ease: Expo.easeInOut,
// duration: 1
// })
// });