Blog - Scroll Based Animation

서론

오늘은 Scroll Based Animation을 만들어보자.
아이디어는 간단하다. Trigger가 Top에서 얼마만큼 offset이 될 때
Animation이 작동하는 지가 이번 구현의 관건이다.
Animation이 적용된 사이트의 예시로 [디즈니 공식 홈페이지]를 확인해보자.

구현해보기

Section

HTML

  <div id="section_1">
    <p><img src="Image Link"><span></span></p>
  </div>

• span은 background에 그림자를 주기 위해서 추가

CSS

#section_1 p span { /* span 그림자 추가 */
  position: absolute;
  display: block;
  z-index: 1;
  top: 0;
  width: 700px;
  height: 400px;
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.9);
}

#section_1 p img { /* img 가운데 정렬 */
  position: absolute;
  margin: 0px auto;
  left: 0; 
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: auto; 
  margin-right: auto;
  margin-top: auto; 
  margin-bottom: auto;
  width: 40%;
  opacity: 0;
}

img.animate {
  animation: size_change 1.5s 0.1s 1 ease-out forwards normal;
}

@keyframes size_change {
  0% {
		opacity : 0;
	}
  25%{
    opacity: 1;
    width: 50%
  }
  100% {
		opacity : 1;
    width: 40%
	}
}

• Script문에서 Image에 animate라는 class를 추가하는 코드를 구현
• Class가 추가되면 img.animate가 script문의 조건을 만족 시 동작

SCRIPT

$(function(){
    var $device = $('#section_1');
    var $offset = 500;
    var $device_offset = $device.offset().top - $offset;

    $(window).scroll(function(){
    if($(this).scrollTop() > $device_offset) {
        $device.find('img').addClass('animate');
      } 
    });
  });

• $device는 Animation이 동작할 객체
• 조건문이 만족할 때 img 태그에 addClass를 실행

마무리

내용은 [Rock’s Easyweb Youtube]를 참고하였습니다.
해당 내용은 상기 링크의 내용을 재구성하기 보다는 제가 이해하기 위해 정리한 것입니다.
더 자세한 내용은 해당 블로그에 있으니 참고해주시면 감사하겠습니다.