[waypoint.js] 웨이포인트 스크롤 애니메이션 (스크롤 값 측정 해주는 라이브러리)

 

 

=== Prologue ===

 

웹사이트를 만들면서 그냥 살짝의 애니메이션 이벤트만 줘도 사용자들이 지겹다고 느끼지 않는!

동적인 웹사이트를 만들 수 있게 된다. 

스크롤을 내릴 때마다 아래에서 위로 올라오는 이벤트들을 종종 볼 수 있는데 

생각보다 이런 이벤트를 주기만 해도 꽤 괜찮은 사이트를 만들 수 있다. 

(내 블로그 메인처럼 말이다. 😋😉) 

 

취준 시절에는 포트폴리오를 만들 때 스크롤 값 하나하나 요소를 다 잡아서 하드코딩을 했었는데 실무에서는 라이브러리를 주로 사용한다. (그게 더 깔끔하고 시간 단축을 해줘 효율적이기 때문이다.) 

✨ scrollTop.offset().top 을 따로 잡아주지 않아도 된다.

 

==== Mission ====

 

스크롤을 내렸을때 부드럽게 아래에서 위로 올라오는 애니메이션 이벤트를 줄 수 있도록 해보자.

 

 

=== description ===

1. waypoint.js 라이브러리를 CDN 또는 script로 가져온다. 

2. waypoint는 대신 스크롤 값을 감지해 주는 라이브러리다. 

⭐ 그래서 fullpage.js 라이브러리랑은 함께 사용할 수 없다!! (fullpage.js 라이브러리 또한 스크롤 값을 컨트롤하기 때문이다.) 

2. 스크롤을 내리다가 스크롤값이 특정 클래스를 만나게 되면 활성화 클래스를 추가해주고 이벤트를 준다. 

그래서 우리가 할일은 특정 클래스를 정해주고, 활성화되었을 때 이벤트를 설정해 주는 것이다.

(이벤트는 클래스로 on / active (활성화) 컨트롤한다.)  

 

==== detail progress ====

1. waypoint.js 라이브러리를 CDN 또는 script로 가져온다. 

⭐ 제이쿼리 라이브러리이기 때문에 제이쿼리도 당연히 설치되어 있어야 한다.

필자는 cdn으로 받아왔고, 홈페이지에서 압축파일을 받아 해제한 후 

jquery.waypoints.com을 가져왔다.

 

Waypoints

 

2. 스크롤을 내리다가 특정 클래스를 만나게 되면 활성화 클래스를 추가해주고 이벤트를 줘야 한다.

그러므로 특정 클래스에 어떤 이벤트를 줘야 할지 설정해 줘야 한다.

 

① 특정 클래스를 설정해 주고, 활성화된 상태에서의 상태도 설정해준다. 

✨<css 설정>

/* 슬라이드 효과 */
.slide-in-up {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
  -webkit-transition: opacity ease 1s, -webkit-transform ease 1s;
  transition: opacity ease 1s, -webkit-transform ease 1s;
  transition: opacity ease 1s, transform ease 1s;
  transition: opacity ease 1s, transform ease 1s, -webkit-transform ease 1s;

}

.slide-in-up.on {

  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  transition-delay: .1s;
}

 

② 그리고 css에서 설정해준 대로 스크롤을 내리다가 해당 클래스를 만났을 때! 이벤트가 나올 수 있도록 addclass를 해준다. 

 

✨<js 코드 설정>

  //웨이포인트 - 애니메이션 스크립트
  var target = $('.slide-in-up')

  target.each(function (i, v) {
    $(this).waypoint(function () {
      $(v).addClass('on')
    }, {
      offset: '100%'
    })
  })

 

✨ 만약, 순서대로 콘텐츠가 나올 수 있도록 delay 효과를 주고 싶다면?

기존 클래스에 delay 클래스를 추가해 준다. 

.slide-in-up.delay01 {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.slide-in-up.delay02 {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}

.slide-in-up.delay03 {
  -webkit-transition-delay: .3s;
  transition-delay: .3s;
}

.slide-in-up.delay04 {
  -webkit-transition-delay: .4s;
  transition-delay: .4s;
}

.slide-in-up.delay05 {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}

.slide-in-up.delay06 {
  -webkit-transition-delay: .6s;
  transition-delay: .6s;
}

.slide-in-up.delay07 {
  -webkit-transition-delay: .7s;
  transition-delay: .7s;
}

.slide-in-up.delay08 {
  -webkit-transition-delay: .8s;
  transition-delay: .8s;
}

.slide-in-up.delay09 {
  -webkit-transition-delay: .9s;
  transition-delay: .9s;
}

.slide-in-up.delay10 {
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

 

 

반응형

 

==== Result ====

 

🌵 라이브러리를 쓰게 되면 확실히 편하고 시간 단축이 되어 효율적이다. 

🌵 하지만 사실 좀 멍청해지는 기분이 든다. (반전) 개인적으로 실력 향상이 일어났을 때는 고민하고 고민하며 코드를 작성했던 포트폴리오 만들던 시절이다. 

🌵 웹에이전시는 어쩔 수 없는가? 나만의 성장을 기대하며 가기에는 사실 좀 어려운 구조다. 내가 스스로 공부할 수밖에!  

 

==== You may also Like! ====

 

🧐 해당 홈페이지에 사용된 또 다른 라이브러리 slick.js 이벤트가 궁금하다면?

 

[slick.js] slick 라이브러리 활용 슬라이드와 프로그래스 바

 

 

🧐 사이드 프로젝트 [월간 테크]가 무엇인지 궁금하다면?  

 

요주의 개발자, 쥬디

 

🧐 "앱 개발"을 위한 첫 단계가 무엇인지 궁금하다면? 

[사이드 프로젝트] 사이드 프로젝트 "앱개발" 첫 단계는 기획이다.

 

🧐 사이드 프로젝트 [월간 테크 프로젝트] 스토리가 "더" 궁금하다면? 

 

[월간TECH프로젝트] 로블록스 "빨간마스크" 게임 제작기 1주차

 

==== Reference====

 

📌 직접 작성한 코드입니다 :-)