scrolla.js 적용법
1. 먼저 js 폴더에 scrolla.js파일을 저장한다.
2. js 폴더에 script.js 파일을 만든다.
3. html > head 부분에 작성한다 /* 항상 순서는 제이쿼리가 먼저 나와야 한다.*/
<head>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/scrolla.jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
4. body부분 애니메이션 줄 부분에 animate 클래스 넣고 data-animate="motion" 작성한다.
5. scrolla.js가 잘 삽입되었는지 개발자 도구(F12)에서 확인한다.
<body>
<div class="aniamte" data-animate="motion"></div>
</body>
6. script.js에 아래 스크립트 작성
$(function() {
$('.animate').scrolla({
mobile: true, //모바일버전시 활성화
once: false //스크롤시 딱 한번만 하고싶을땐 true
});
});
7. css파일에 애니메이션 적용하는 부분에 .motion 클래스를 붙인다.
'Study' 카테고리의 다른 글
| [Git/Github] 시작하기 (CLI vs GUI) (0) | 2023.02.19 |
|---|---|
| [Git/Github] 시작하기 (설치와 세팅 - 윈도우) (0) | 2023.02.19 |
| [HTML/CSS] favicon(파비콘, favorite icon) (0) | 2023.02.15 |
| [Javascript] splitting.js 적용법 (0) | 2023.02.15 |
| [GSAP] 1. 설치방법 (0) | 2023.02.15 |
