scrolling_effects/index.html at main · PawarManish/scrolling_effects · 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="w-full bg-zinc-900">
      <div class="parent relative left-0 top-0 w-full h-[700vh]">
        <div class="w-full h-screen sticky top-0 left-0">
          <canvas class="frames w-full h-screen"></canvas>
        </div>
      </div>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
      integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"
      integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      const canvas = document.querySelector("canvas");
      const context = canvas.getContext("2d");
      const frames = {
        currentIndex: 0,
        maxIndex: 382,
      };
      let imagesLoaded = 0;
      const images = [];
      function preloadimg() {
        for (var i = 1; i <= frames.maxIndex; i++) {
          const imgUlr = `./frames/frame_${i.toString().padStart(4, "0")}.jpeg`;
          //   console.log(imgUlr);
          const img = new Image();
          img.src = imgUlr;
          //   console.log(img);
          img.onload = () => {
            imagesLoaded++;
            if (imagesLoaded == frames.maxIndex) {
              loadImage(frames.currentIndex);
              startAnimation();
            }
            images.push(img);
          };
        }
      }

      function loadImage(index) {
        if (index >= 0 && index <= frames.maxIndex) {
          const img = images[index];
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;

          const scaleX = canvas.width / img.width;
          const scaleY = canvas.height / img.height;
          const scale = Math.max(scaleY, scaleX);

          const newWidth = img.width * scale;
          const newHeight = img.height * scale;

          const offsetX = (canvas.width - newWidth) / 2;
          const offsetY = (canvas.height - newHeight) / 2;

          context.clearRect(0, 0, canvas.width, canvas.height);
          context.imageSmoothingEnabled = "high";
          context.imageSmoothingQuality = "high";
          context.drawImage(img, offsetX, offsetY, newWidth, newHeight);
          frames.currentIndex = index;
        }
      }
      function startAnimation() {
        var tl = gsap.timeline({
          scrollTrigger: {
            trigger: ".parent",
            start: "top top",
            scrub: 2,
            end: "bottom bottom",
          },
        });

        tl.to(frames, {
          currentIndex: frames.maxIndex,
          onUpdate: function () {
            loadImage(Math.floor(frames.currentIndex));
          },
        });
      }

      preloadimg();
    </script>
  </body>
</html>