https://seochowcf.or.kr/theme/hayan/_main_block/MAIN_07/resources/js/style.js

1
2/* median-N3 */
3(function() {
4  $(function() {
5    $(".MAIN_04[id=\'ID_MAIN_04\']").each(function() {
6      const $block = $(this);
7      // 텍스트 애니메이션
8      const animateTexts = ($textset, delay = 0) => {
9        const $subtit = $textset.find(".textset-subtit");
10        const $tit = $textset.find(".textset-tit");
11        const $desc = $textset.find(".textset-desc");
12        // 초기 상태 설정
13        if ($tit.length) gsap.set($tit[0], {
14          y: -50,
15          opacity: 0
16        });
17        if ($subtit.length) gsap.set($subtit[0], {
18          y: 30,
19          opacity: 0
20        });
21        if ($desc.length) gsap.set($desc[0], {
22          y: 20,
23          opacity: 0
24        });
25        // 타임라인 생성
26        const tl = gsap.timeline({
27          delay
28        });
29        // 애니메이션
30        if ($tit.length) {
31          tl.to($tit[0], {
32            y: 0,
33            opacity: 1,
34            duration: 0.6,
35            ease: "power2.out",
36          });
37        }
38        if ($subtit.length) {
39          tl.to(
40            $subtit[0], {
41              y: 0,
42              opacity: 1,
43              duration: 0.6,
44              ease: "power2.out",
45            },
46            "-=0.2"
47          );
48        }
49        if ($desc.length) {
50          tl.to(
51            $desc[0], {
52              y: 0,
53              opacity: 1,
54              duration: 0.6,
55              ease: "power2.out",
56            },
57            "-=0.2"
58          );
59        }
60      };
61      // Swiper
62      const swiper = new Swiper(".median-N3[id=\'cHMJ6C3olJ\'] .swiper", {
63        loop: true,
64        autoplay: {
65          delay: 5000,
66        },
67        speed: 1500,
68        effect: "fade",
69        fadeEffect: {
70          crossFade: true,
71        },
72        navigation: {
73          nextEl: ".median-N3[id=\'cHMJ6C3olJ\'] .btn-next",
74          prevEl: ".median-N3[id=\'cHMJ6C3olJ\'] .btn-prev",
75        },
76        pagination: {
77          el: ".median-N3[id=\'cHMJ6C3olJ\'] .swiper-pagination",
78          type: "progressbar",
79        },
80        breakpoints: {
81          992: {
82            threshold: 100,
83          },
84        },
85        on: {
86          init() {
87            // 초기 로딩 시 애니메이션
88            const $activeSlide = $block
89              .find(".swiper-slide")
90              .eq(this.activeIndex);
91            const $textset = $activeSlide.find(".textset");
92            if ($textset.length) {
93              animateTexts($textset, 0.5);
94            }
95            const totalSlides = this.slides.filter(
96              (slide) => !slide.classList.contains("swiper-slide-duplicate")
97            ).length;
98            $block.find(".total").text(totalSlides.toString().padStart(2, "0"));
99          },
100          slideChange() {
101            const currentSlide = (this.realIndex + 1)
102              .toString()
103              .padStart(2, "0");
104            $block.find(".curr").text(currentSlide);
105            // 이전 애니메이션 kill 처리
106            gsap.killTweensOf(
107              $block.find(".textset-subtit, .textset-tit, .textset-desc")
108            );
109            // 슬라이드 전환 애니메이션
110            const $activeSlide = $block
111              .find(".swiper-slide")
112              .eq(this.activeIndex);
113            const $textset = $activeSlide.find(".textset");
114            if ($textset.length) {
115              // 비활성 슬라이드의 텍스트 인라인 스타일 완전 제거
116              $block
117                .find(".swiper-slide:not(.swiper-slide-active)")
118                .each(function() {
119                  const $textElements = $(this).find(
120                    ".textset-subtit, .textset-tit, .textset-desc"
121                  );
122                  $textElements.each(function() {
123                    gsap.set(this, {
124                      clearProps: "all"
125                    });
126                    $(this).removeAttr("style");
127                    // CSS 초기값으로 재설정
128                    gsap.set(this, {
129                      y: 50,
130                      opacity: 0,
131                    });
132                  });
133                });
134              // 새 텍스트 애니메이션 실행
135              animateTexts($textset, 0.4);
136            }
137          },
138        },
139      });
140      // 정지
141      $block.find(".pause").click(function() {
142        swiper.autoplay.stop();
143        $(this).removeClass("active");
144        $(this).siblings().addClass("active");
145      });
146      // 재생
147      $block.find(".play").click(function() {
148        swiper.autoplay.start();
149        $(this).removeClass("active");
150        $(this).siblings().addClass("active");
151      });
152    });

153  });
154})();