화면 스크롤시 애니메이션 기법 적용하기 (Animation)

마우스로 화면을 스크롤할때 아래의 가려진 항목들이 나타날때 멋지게 애니메이션 되면서 화면에 노출시키는 아주 강추하는 프레임워크 소스를 소개하고자 한다.

 

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

사용법과 소스도 위 페이지에 들어가면 살펴 볼수 있는데

 

간략히 설명하면 다음과 같다.

<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

본문 코드내용에는

<div class="col-md-7" data-aos="fade-right">...</di>

위 소스에서 data-aos 라는 속성값에 원하는 애미메이션 값들을 종류별로 넣으면 된다.

data-aos="fade-left"

data-aos="flip-left"

data-aos="fade-up"

다양하게 바꾸어 적용하면 된다. ^^

 

마지막으로 Body 태그를 닫기 바로위에 AOS를 초기화시키는 다음의 소스를 추가하여 마무리하자.

<script>
    AOS.init({
        easing: 'ease-out-back',
        duration: 1000
    });
 
</script>