http://intellisys.co.kr/js/animation.js

1var secTitle = document.querySelectorAll(".sec-title");
2var diagramImg = document.querySelectorAll(".sec-diagram");
3var diagramSubImg = document.querySelectorAll(".sec-diagram-sub");
4var setInner = document.querySelectorAll(".sec-inner");
5var sideNav = document.querySelectorAll(".page-side");
6var visualSec = document.querySelectorAll(".page-visual");
7var waveText = document.querySelectorAll(".sec-wave-content");
8var arrSection = document.querySelectorAll("section.moveDiagram");
9var moveBtn = document.querySelectorAll(".move-btn-group button");
10var winY;
11var titleTop;
12var imgTop;
13var imgSubTop;
14var waveTop;
15var arrSectionTop;
16var arrObjTop;
17
18// IE forEach 기능 적용 코드
19if (window.NodeList && !NodeList.prototype.forEach) {
20  NodeList.prototype.forEach = Array.prototype.forEach;
21}
22
23$(document).ready(function () {
24  winX = $(window).innerWidth();
25  // console.log(secTitle);
26  // 각 페이지 섹션의 타이틀 FadeIn 애니메이션
27  if (winX < 500) {
28    // 모바일 사이즈에서는 로딩시 애니메이션 실행
29    secTitle[0].getBoundingClientRect().top;
30    secTitle[0].classList.add("show");
31  }
32});
33
34$(window).scroll(function () {
35  winY = $(window).innerHeight();
36
37  // 각 페이지 섹션의 타이틀 FadeIn 애니메이션
38  secTitle.forEach(function (el, index, arr2) {
39    // 모바일 사이즈에서는 스크롤 애니메이션 제거
40    titleTop = el.getBoundingClientRect().top;
41    if (winY / 2 >= titleTop) {
42      // console.log(el)
43      el.classList.add("show");
44    }
45  });
46
47  // 각 페이지 섹션의 도식화 또는 이미지 FadeIn 애니메이션
48  diagramImg.forEach(async function (el, index, arr2) {
49    imgTop = el.getBoundingClientRect().top;
50    if (winY / 2 >= imgTop && !el.classList.contains("show")) {
51      el.classList.add("show");
52      motionLoopInit(el);
53
54      if (
55        el.nextElementSibling != null &&
56        el.nextElementSibling.className == "sec-diagram-sub"
57      ) {
58        // console.log(`sub : `, el.nextElementSibling.className);
59        el.nextElementSibling.classList.add("show");
60        motionLoopInit(el.nextElementSibling);
61      }
62    }
63  });
64
65  // 각 페이지 섹션의 도식화 또는 이미지 FadeIn 애니메이션
66  diagramSubImg.forEach(function (el, index, arr2) {
67    imgSubTop = el.getBoundingClientRect().top;
68    if (winY / 2 >= imgSubTop && !el.classList.contains("show")) {
69      el.classList.add("show");
70    }
71  });
72
73  // 각 페이지 섹션의 도식화 또는 이미지 FadeIn 애니메이션
74  setInner.forEach(function (el, index, arr2) {
75    imgSubTop = el.getBoundingClientRect().top;
76
77    if (winY / 2 >= imgSubTop) {
78      el.classList.add("show");
79    }
80  });
81
82  // 각 페이지 웨이브 있는 섹션의 텍스트 FadeIn 애니메이션
83  waveText.forEach(function (el, index, arr2) {
84    waveTop = el.getBoundingClientRect().top;
85    if (winY / 2 >= waveTop) {
86      el.classList.add("show");
87    }
88  });
89
90  // 각 페이지 섹션의 도식화그룹 또는 이미지그룹 FadeIn 애니메이션
91  arrSection.forEach(function (el, index, arr2) {
92    arrSectionTop = el.getBoundingClientRect().top;
93    arrObjTop = el.querySelector(".sec-title").getBoundingClientRect().top;
94
95    if (winY / 5 >= arrSectionTop) {
96      for (var i = 0; i < moveBtn.length; i++) {
97        moveBtn[i].classList.remove("active");
98      }
99      moveBtn[index].classList.add("active");
100    }
101  });
102});
103
104$(".move-btn-group button").click(function () {
105  // arrSectionTop   = el.getBoundingClientRect().top;
106  var moveIdx = $(this).index();
107
108  $("html, body").animate(
109    {
110      scrollTop: $("section.moveDiagram").eq(moveIdx).offset().top - 100,
111    },
112    "fast"
113  );
114
115  $(".move-btn-group")
116    .closest(".sec-move")
117    .animate(
118      {
119        scrollLeft: $(this).offset().left,
120      },
121      1000
122    );
123});
124
125/**                 모션을 반복적으로 움직이게 하는 함수
126 *
127 *
128 * @param {*} el  모션을 작동하는 element
129 */
130
131function motionLoopInit(el) {
132  const lastMotionEl = el.querySelector(".last-motion");
133  if (lastMotionEl) {
134    const duration = window
135      .getComputedStyle(lastMotionEl)
136      .getPropertyValue("animation-duration");

137    const delay = window
138      .getComputedStyle(lastMotionEl)
139      .getPropertyValue("animation-delay");
140    const delayTime = parseFloat(duration) + parseFloat(delay) + 1.2;
141
142    setInterval(() => {
143      el.classList.remove("show");
144      setTimeout(() => {
145        el.classList.add("show");
146      }, 100);
147    }, delayTime * 1000);
148  }
149}