modernwebsit/script.js at master · devXutkarsh/modernwebsit · 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
const scroll = new LocomotiveScroll({
  el: document.querySelector('#main'),
  smooth: true
});
function firstPageAnimi(){
  let ti=gsap.timeline();
  ti.from('#nav',{
    y:'-10',
opacity:0,
duration:7,
ease:Expo.easeInout
})
  .to('#boundingelem',{
    y:'0',
duration:1.5,
ease:Expo.easeInout,
stagger:.2,
delay:-1

  })
  .from('#herofooter',{
    y:'-10',
duration:1.5,
ease:Expo.easeInout,
opacity:0,
delay:-1

  })
}

function circleMover(){
  window.addEventListener("mousemove", function(dets){
   document.querySelector("#minicircle").style.transform=`translate(${dets.clientX}px,${dets.clientY}px)`;
  // console.log(dets.clientX,dets.clientY);
  })
}
circleMover();
firstPageAnimi();

document.querySelectorAll(".elem").forEach(function (elem) {
  var rotate = 0;
  var diffrot = 0;

  elem.addEventListener("mouseleave", function (dets) {
    gsap.to(elem.querySelector("img"), {
      opacity: 0,
      ease: Power3,
      duration: 0.5,
    });
  });

  elem.addEventListener("mousemove", function (dets) {
    var diff = dets.clientY - elem.getBoundingClientRect().top;
    diffrot = dets.clientX - rotate;
    rotate = dets.clientX;
    gsap.to(elem.querySelector("img"), {
      opacity: 1,
      ease: Power3,
      top: diff,
      left: dets.clientX,
      rotate: gsap.utils.clamp(-20, 20, diffrot * 0.5),
    });
  });
});