[자바스크립트] 스크롤에 연동되는 fade 효과를 구현하는 3가지 방법

요새 css와 자바스크립트를 이용해서 interactive webpage에 대해 관심을 가지고 공부하고 있다. 

특히 유튜버 중에 Interactive Developer 이분을 보면서 수준 차이를 확실히 느끼고 있다. 

Interactive Developer

이런 와중에 이분의 포트폴리오 사이트를 보게되었고, 초라한 내 포폴 사이트에 디자인적 요소를 하나씩 추가해보면 어떨까 싶어서 시간 날 때마다 추가하고 있다.

저번에는 버튼 클릭시 소리가 나는 기능을 추가해봤고, 이번에는 스크롤에 따라 fade in, out이 되는 기능을 추가해보려고 한다. 

그럼 구현을 시작해보자.

---

구현 목표

스크롤에 따라 슬라이드 인, 아웃되는 효과를 만들어보자.

따라서 슬라이드 인, 아웃되는 효과를 만들기 위해서 내가 구현해야할 구체적인 기능은 2가지이다.

• 스크롤에 따라 투명도가 바뀐다.
• 스크롤에 따라 오른쪽부터 슬라이딩 되면서 들어온다.

그리고 이를 구현하는 방법은 3가지 정도 생각해봤다.

1. jquery를 이용해서 스크롤의 위치를 파악해 fade 효과를 원하는 엘리먼트를 조작하는 방법
2. aos 라이브러리를 이용해서 class name만 넣어서 빠르게 이용하는 방법
3. intersection observer를 이용해서 엘리먼트를 조작하는 방법

이제 3가지 방법으로 모두 구현을 해보고 각 방법의 장단점에 대해 생각해보자.

---

방법 1.

 jquery를 이용해서 스크롤의 위치를 파악해 fade 효과를 원하는 엘리먼트를 조작하는 방법

내가 찾아보기로는 가장 고전적인 방법이다.

jquery로 스크롤의 위치를 찾고 해당 위치에 따라 각 엘리먼트의 투명도, 슬라이딩 값을 지정해주고 css값을 계속해서 바꿔준다.

이 방법의 장점으론 jquery를 이용한 다양한 예제가 있다는 점이고, 단점으로는 jquery를 썼다는 점, 그리고 버벅거림이 발생한다는 점이다.

버벅거림이 발생하는 이유는 모든 엘리먼트에 대해 css를 스크롤에 따라 조정해주고 있기 때문이다. 따라서 화면에 보이지 않는 엘리먼트의 css도 구하고 조절하느라 오버헤드가 발생한다.

 

 

/* css */
.fade {
  position: relative;
}

 

<!-- html -->
<section class="fade" id="intro">
 </section>

1번 방법의 결과물

보시다시피 잘 동작하는 것을 확인했다. 스크롤에 따라 투명도와 슬라이드가 들어온다.

 

---

방법 2.

aos 라이브러리를 이용해서 class name만 넣어서 빠르게 이용하는 방법

해당 방법은 오픈소스인 aos를 이용해 간단히 구현하는 방법이다. 

GitHub - michalsnik/aos: Animate on scroll library

github readme 파일에 구현방법과 각 옵션이 잘 정리되어 있어 읽고 따라하면 된다.

2번 방법의 결과물

비교해보면 AOS 쪽이 좀 더 빠릿한 느낌이다. 하지만 이런 값도 다 조절이 가능하다. 원하는 수준의 값을 찾아넣으면 생각가능한 모든 슬라이드 이벤트가 가능할 듯 하다. 

"역시 세상에는 능력자가 많고, 방법은 다 있다. 단지 내가 멍청하다는게 가장 큰 문제다."

---

3번.

intersection observer를 이용해서 엘리먼트를 조작하는 방법

intersection observer는 viewport와 교차하는 엘리먼트를 비동기식으로 관찰하는 기능을 제공한다.

즉, 현재 화면에 표시되는 엘리먼트들을 찾아와서 무언갈 할 수 있도록 제공해준다는 말이다.

따라서 이 함수를 통해 추적하고자 하는 엘리먼트를 찾아 observer에 등록하고 해당 엘리먼트가 viewport안에 들어왔을때 하고자 하는 동작을 정의해준다. 그러면 알아서 해당 엘리먼트에 동작이 실행된다.

Intersection Observer API - Web APIs | MDN

코드로 봐보자.

 

 

/* css */
.fade-class {
  position: relative;
  left: 200px;
  opacity: 0;
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s linear;
}
.fade-in {
  transition: left 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s linear;
  left: 0px;
  opacity: 1;
}

 

<!-- html -->
<section class="fade-class" id="intro">
 </section>

이제 face-class을 가진 엘리먼트가 viewport에 들어올때마다 우리가 원하는 동작이 될것이다.

실행화면

매우 빠릿하게 동작하고 aos 라이브러리와 비교해도 훨씬 부드럽다. 모바일화면에서도 버벅거리지 않고 동작한다. 거의 aos와 유사하다. 

---

이렇게 3가지 방법에 대해 모두 구현해보았다.

1. jquery를 이용해서 스크롤의 위치를 파악해 fade 효과를 원하는 엘리먼트를 조작하는 방법
2. aos 라이브러리를 이용해서 class name만 넣어서 빠르게 이용하는 방법
3. intersection observer를 이용해서 엘리먼트를 조작하는 방법

3가지 방법의 순위를 매겨 본다면

2번 = 3번 > 1번

1번 같은 경우 너무 코드가 번잡스럽고, 엘리먼트를 조작하는데 비용이 많이 든다.

하지만 2,3번 모두 빠르게 동작하는 것을 확인했다. 

그러니 간단한 시각적 효과를 줄 때에는 라이브러리를 사용해서 간단하게 사용하고 좀더 커스텀하거나 시각적효과말고 프로그래밍적으로 해야할 것이 있다면 intersection observer를 추천한다.