https://unhr.co.kr/asset/un/js/index.js

1document.addEventListener('DOMContentLoaded', function () {
2    ScrollTrigger.name = " ScrollTrigger ";
3    gsap.registerPlugin(ScrollTrigger);
4    gsap.registerPlugin(ScrollToPlugin);
5
6    // scroll fade up =========================
7    function animateFrom(elem, direction) {
8        direction = direction | 1;
9
10        var x = direction * 100,
11            y = 0;
12        if (elem.classList.contains('gs__reveal--bottom')) {
13            x = 0;
14            y = 100;
15        }
16        gsap.fromTo(elem, {
17            x: x,
18            y: y,
19            autoAlpha: 0
20        }, {
21            duration: 2,
22            x: 0,
23            y: 0,
24            autoAlpha: 1,
25            ease: 'power4',
26            overwrite: 'auto'
27        });
28    }
29
30    function hide(elem) {
31        gsap.set(elem, {
32            autoAlpha: 0
33        });
34    }
35
36    gsap.utils.toArray('.gs__reveal').forEach(function (elem) {
37        hide(elem);
38
39        ScrollTrigger.create({
40            trigger: elem,
41            onEnter: function () {
42                animateFrom(elem)
43            },
44            onEnterBack: function () {},
45            onLeave: function () {}
46        });
47    });
48
49    // scroll top =========================
50
51    const btt = document.querySelector('#scroll__top');
52
53    btt.addEventListener('click', () => gsap.to(window, {
54        scrollTo: 0,
55        duration: 1
56    }));
57    gsap.set(btt, {
58        y: 100
59    });
60
61    gsap.to(btt, {
62        y: 0,
63        autoAlpha: 1,
64        scrollTrigger: {
65            trigger: 'body',
66            start: 'top -100px',
67            end: 'top -100px',
68            toggleActions: 'play none reverse none'
69        }
70    });
71});
72
73//text highlight =========================
74
75const highlight = document.getElementById('highlight-style');
76
77gsap.registerPlugin(ScrollTrigger);
78
79gsap.utils.toArray('.text-highlight,.text-highlight-light').forEach((highlight) => {
80    ScrollTrigger.create({
81        trigger: highlight,
82        start: '-100px center',
83        onEnter: () => highlight.classList.add('active')
84    });
85});
86
87const setHighlightStyle = (value) =>
88    document.body.setAttribute('data-highlight', value);
89
90try{
91	highlight.addEventListener('change', (e) => setHighlightStyle(e.target.value));
92} catch(e){
93}
94
95setHighlightStyle(highlight.value);
96
97
98// swiper slider =========================
99let mainSliderSelector = '.main-slider';
100
101let mainSliderOptions = {
102    loop: true,
103    speed: 1000,
104    parallax: true,
105    autoplay: {
106        delay: 3000
107    },
108    loopAdditionalSlides: 10,
109    centeredSlides: true,
110    grabCursor: true,
111    navigation: {
112        nextEl: '.swiper-button-next',
113        prevEl: '.swiper-button-prev',
114    },
115    pagination: {
116        el: ".swiper-pagination",
117        type: "fraction"
118    },
119    on: {
120        init: function () {
121            this.autoplay.stop();
122        },
123        imagesReady: function () {
124            this.el.classList.remove('loading');
125            this.autoplay.start();
126        }
127    }
128};
129let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);