스크롤 애니메이션 aos.js

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

AOS - Animate on scroll library

css

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

 

js

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

 

initialize aos

<script>

    AOS.init();

</script>

 

github

https://github.com/michalsnik/aos

michalsnik/aos

<div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-mirror="true" data-aos-once="false" data-aos-anchor-placement="top-center" > </div>

 

Animations

• Fade animations:

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

• Flip animations:

  • flip-up
  • flip-down
  • flip-left
  • flip-right

• Slide animations:

  • slide-up
  • slide-down
  • slide-left
  • slide-right

• Zoom animations:

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

Anchor placements:

• top-bottom
• top-center
• top-top
• center-bottom
• center-center
• center-top
• bottom-bottom
• bottom-center
• bottom-top

Easing functions:

• linear
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease-in-cubic
• ease-out-cubic
• ease-in-out-cubic
• ease-in-quart
• ease-out-quart
• ease-in-out-quart