eletrotupi / tcc/ api/src/static/js/app.jsfc5b05d922d3301294cc7a1b3ed53dc3ed4db0bf
1.5 KB | 70 lines Raw
1
const { animate, utils, stagger, splitText } = anime;
2
3
document.addEventListener('DOMContentLoaded', function () {
4
  const colors = [];
5
6
7
  new Glide('.glide', {
8
    type: 'carousel',
9
    autoplay: 2000,
10
    startAt: 0,
11
    perView: 2.5,
12
    gap: 32,
13
    breakpoints: {
14
      1024: {
15
        perView: 2
16
      },
17
      768: {
18
        perView: 1
19
      }
20
    }
21
  }).mount();
22
23
  // Initialize Atropos 3D Effect
24
  const dash = Atropos({
25
    el: '.my-atropos',
26
    activeOffset: 40,
27
    shadow: true,
28
    shadowScale: 1.05,
29
    onEnter() {
30
      console.log('Atropos Enter');
31
    },
32
    onLeave() {
33
      console.log('Atropos Leave');
34
    },
35
    onRotate(x, y) {
36
      // Optional: add some dynamic lighting update logic here
37
    }
38
  });
39
40
41
  // Anime js text bullshit
42
  splitText('.animated-text', {
43
    lines: true,
44
  })
45
    .addEffect(({ lines }) => animate(lines, {
46
      y: ['20%', '-20%'],
47
      loop: true,
48
      alternate: true,
49
      delay: stagger(15000),
50
      ease: 'inOutQuad',
51
    }))
52
    .addEffect(split => {
53
      split.words.forEach(($el, i) => {
54
        const color = colors[i];
55
        if (color) utils.set($el, { color });
56
        $el.addEventListener('pointerenter', () => {
57
          animate($el, {
58
            color: utils.randomPick(['#FF4B4B', '#FFCC2A', '#B7FF54', '#57F695']),
59
            duration: 250,
60
          })
61
        });
62
      });
63
      return () => {
64
        /* Called between each split */
65
        split.words.forEach((w, i) => colors[i] = utils.get(w, 'color'));
66
      }
67
    });
68
69
  // Anime JS morph bullshit
70
});