web_project/script.js at main · codeadictor/web_project · GitHub

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
 // locomotive js - smooth scrolling

const scroll = new LocomotiveScroll({
    el: document.querySelector('#main'),
    smooth: true
});

// gsap to animate

gsap.from(".nlink",{
    stagger:.2,
    y:10,
    duration:1,
    ease:Power2,
    opacity:0

})

// shery js to aniamate images accordingly

Shery.textAnimate("#headings h1",{
    style: 2,
    y: 10,
    delay: 0.3,
    duration: 2,
    ease: "cubic-bezier(0.23, 1, 0.320, 1)",
    multiplier: 0.1,
  });

  gsap.from(".anim2",{
     y:30,
     opacity:0,
     stagger:.3,
     ease:Expo,
     duration:1
  })

Shery.imageEffect("#imgntext img",{
    style:5,
    config:{"uColor":{"value":true},"uSpeed":{"value":0.37,"range":[0.1,1],"rangep":[1,10]},"uAmplitude":{"value":2.48,"range":[0,5]},"uFrequency":{"value":0.74,"range":[0,10]},"geoVertex":{"range":[1,64],"value":45.78},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":0.7499999776482589},"gooey":{"value":false},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"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.83,"range":[1,5]},"scrollType":{"value":0},"noEffectGooey":{"value":true},"onMouse":{"value":1},"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.002,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10,"range":[0,100]}},

});
Shery.imageEffect(".imgeff img",{
    style:5,
    config: {"uFrequencyX":{"value":11.57,"range":[0,100]},"uFrequencyY":{"value":17.36,"range":[0,100]},"uFrequencyZ":{"value":19.01,"range":[0,100]},"geoVertex":{"range":[1,64],"value":5.69},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":0.7499999776482589},"gooey":{"value":false},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"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.83,"range":[1,5]},"scrollType":{"value":0},"noEffectGooey":{"value":true},"onMouse":{"value":1},"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.002,"range":[0,0.1]},"noise_height":{"value":0.5,"range":[0,2]},"noise_scale":{"value":10,"range":[0,100]},"uColor":{"value":true},"uSpeed":{"value":0.37,"range":[0.1,1],"rangep":[1,10]},"uAmplitude":{"value":2.48,"range":[0,5]},"uFrequency":{"value":0.74,"range":[0,10]}},
});

gsap.from("#imgntext img", {
    y:"70",
    opacity:0,
    durationIn:2,
    ease:Expo,
})

Shery.imageEffect("#bimg",{
    style:5,
    config: {"a":{"value":2,"range":[0,30]},"b":{"value":0.75,"range":[-1,1]},"zindex":{"value":-9996999,"range":[-9999999,9999999]},"aspect":{"value":1.1182796109107234},"gooey":{"value":true},"infiniteGooey":{"value":false},"growSize":{"value":4,"range":[1,15]},"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,"range":[1,5]},"scrollType":{"value":0},"geoVertex":{"range":[1,64],"value":1},"noEffectGooey":{"value":true},"onMouse":{"value":1},"noise_speed":{"value":0.2,"range":[0,10]},"metaball":{"value":0.35,"range":[0,2]},"discard_threshold":{"value":0.5,"range":[0,1]},"antialias_threshold":{"value":0,"range":[0,0.1]},"noise_height":{"value":0.13,"range":[0,2]},"noise_scale":{"value":6.61,"range":[0,100]}},
    gooey:true,
});

document.querySelector("#ftext button")
.addEventListener("mouseover",function(){
    gsap.to("#future video",{
        opacity:1,
        duration:1,
        ease:Power4
    })
})

document.querySelector("#ftext button")
.addEventListener("mouseleave",function(){
    gsap.to("#future video",{
        opacity:0,
        duration:1,
        ease:Power4
    })
})