https://www.daehanship.com/views/layout/section/main_visual_v2.js

1document.querySelector('body').classList.add('lottie-playing');
2
3document.addEventListener("DOMContentLoaded", function () {
4  /* 비메오 초기 세팅 */
5  const mainVideos = document.querySelectorAll(".video");
6  mainVideos.forEach(function (mainVideo) {
7    var vimeoPlayer = new Vimeo.Player(mainVideo);
8    vimeoPlayer.on("loaded", function () {
9      vimeoPlayer.pause();
10    });
11  });
12
13  /* 인트로 로티 세팅 */
14  const mainLottie = bodymovin.loadAnimation({
15    container: document.getElementById("mainLottie"),
16    renderer: "svg",
17    loop: false, // 반복 설정
18    autoplay: false, // 자동재생 설정
19    path: "/views/res/lottie/intro_lottie_01.json",
20  });
21
22  mainLottie.play(); // 로티 재생
23  mainLottie.addEventListener("complete", function () {
24    // 로티 재생 완료 후
25    setTimeout(function () {
26      $(".main-lottie-wrap").addClass("hideLottie");
27      document.querySelector("body").classList.remove("lottie-playing");
28      mainLottie.destroy();
29
30      const mainVideos = document.querySelectorAll(".video");
31      mainVideos.forEach(function (mainVideo) {
32        var vimeoPlayer = new Vimeo.Player(mainVideo);
33        vimeoPlayer.play(); // 비메오 재생
34        playScrollTrigger(); // gsap 재생
35      });
36    }, 150);
37  });
38
39  mainLottie.addEventListener("destroy", function () {
40    // 로티 destroy 후 숨김
41    setTimeout(function () {
42      $(".main-lottie-wrap").addClass("hide");
43    }, 1000);
44  });
45
46  // 스크롤 트리거 함수 (카운트 인터랙션)
47  function playScrollTrigger(){
48    asyncLoader.load("scrollTrigger", function () {
49      gsap.registerPlugin(ScrollTrigger);
50      
51      // 카운트 인터랙션
52      ScrollTrigger.create({
53        trigger: ".main-visual-v2",
54        start: "top 10%",
55        end: "bottom 0%",
56        // markers: true,
57        toggleActions: "play none none none",
58        onEnter: function () {
59          startCounter();
60        },
61        onLeave: function () {
62          resetCounter();
63        },
64        onEnterBack: function () {
65          startCounter();
66        },
67        onLeaveBack: function () {
68          resetCounter();
69        },
70      });
71    });
72  }
73
74  // 뉴스 swiper
75  var slideCount = document.querySelectorAll('.recruitSwiper .swiper-slide').length;
76  var slidesPerView = slideCount === 1 ? 1 : 1.25;
77  var spaceBetween = slideCount === 1 ? 0 : 12;
78
79  asyncLoader.load("swiper", function () {
80    var mainRecruitSwiper = new Swiper(".recruitSwiper", {
81      loop: false,
82      observer: true,
83      observeParents: true,
84      speed: 1000,
85      loopAdditionalSlides: 1,
86      watchOverflow: true, // 슬라이드 한 개일 때 navigator, pagination 숨김
87      breakpoints: {
88        1200: {
89          slidesPerView: slidesPerView,
90          spaceBetween: spaceBetween,
91        },
92      },
93      navigation: {
94        nextEl: ".recruit-controller .swiper-button-next",
95        prevEl: ".recruit-controller .swiper-button-prev",
96      },
97      pagination: {
98        el: ".swiper-pagination",
99        clickable: false,
100        type: "bullets",
101      },
102    });
103  });
104
105  // 준비중 링크 클릭 시 '준비중입니다. 팝업
106  $(".coming-soon").on("click", function () {
107    showAlert("준비중입니다.");
108  });
109});