HTML & CSS

Parallax horizontal scrolling ep03 : Animate on scroll

Parallax horizontal scrolling ep03 : Animate on scroll library

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

HTML

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

<!-- animate on scroll -->
<div class="section_parallax bg-primary p-5">
  <div class="container text-center">
    <h3 class="display-3 w100 text-light"><span class="w500">animate</span> on scroll</h3>
    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <img src="images/scroll1.png" alt="" id="scroll1"
            data-aos="fade-left"
            data-aos-delay="900">
    <img src="images/scroll2.png" alt="" id="scroll2"
            data-aos="fade-right"
            data-aos-delay="600">
    <img src="images/scroll3.png" alt="" id="scroll3"
            data-aos="fade-left"
            data-aos-delay="300">
  </div>

</div>


<script>
  AOS.init();
</script>

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다