AOS 사용방법 & 기초

김해김씨가오리·2022년 12월 6일
0

PUBLISHING

목록 보기
7/8

AOS

Animate On Scroll Library

스크롤에 따른 애니메이션 효과를 줄 수 있게 도와주는 라이브러리

AOS라이브러리

CDN
<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>
사용방법
    <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>

cdn 링크 삽입

<script>
        $(document).ready(function () {
            AOS.init();
        });
    </script>

스크립트에 AOS 초기화 구문 삽입

<body>
    <div class="box" data-aos="fade-up">box1</div>
    <div class="box" data-aos="flip-left">box2</div>
    <div class="box" data-aos="zoom-in">box3</div>
    <div class="box" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500">box4</div>
</body>

AOS라이브러리에서 원하는 효과 찾아 속성으로 넣어주기.

profile
그냥 기록용!!!

0개의 댓글