JavaScript: fade 효과 AOS 애니메이션 쓰기

Notice

Recent Posts

Recent Comments

Tags more

관리 메뉴

A Joyful AI Research Journey🌳😊

💻Bootcamp Self-Study Revision✨/JavaScript, jQuery, Ajax

yjyuwisely 2023. 4. 22. 16:43

HTML 파일에 <body> 태그가 끝나기 전에 아래 JS 코드를 추가한다.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>

<head>아래 CSS 코드를 추가한다.

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

애니메이션 효과가 있을 내용에 아래 코드로 묶는다. 나는 오른쪽에서 나오는 애니메이션(fade-right)을 골랐다.

<div data-aos="fade-right">
<!-- contents -->
</div>

아래 예시 링크에서 압축 파일을 다운 받아서 aos.css와 aos.js를 쓰면 된다. 그리고 aos.js에 경로 수정을 한다.

import '../css/aos.css';

예시 링크)
https://michalsnik.github.io/aos/

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

원작자 깃허브 링크)
사용 설명을 볼 수 있다.
https://github.com/michalsnik/aos

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

728x90

JavaScript: onchange, onkeyup, blur (0)	2023.05.04
JavaScript: onbeforeprint 사용해서 [다운로드] 버튼 작동하게 만들기 (0)	2023.04.24
230329 jQuery 전체 약관, 선택 약관 눌렀을 때 전체, 특정 체크 박스 클릭 되게 만들기 (0)	2023.03.30
230130 jQuery의 toogle() 사용해서 버튼 클릭했을 때 나오고 숨기는 기능 (0)	2023.03.29

'💻Bootcamp Self-Study Revision✨/JavaScript, jQuery, Ajax' Related Articles

Comments