스크롤을 내리면 각지점마다 다양한 모션과 옵션을 적용할 수 있는
aos.js - animate on scroll library
- 적용 샘플 보기
https://bdmp-001.cafe24.com/bizdemo156160/index.php
쉬운 홈페이지 만들기
bdmp-001.cafe24.com
■ 사용방법
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>
<body>
<div data-aos="fade-up" data-aos-duration="1500" data-aos-offset="1000" data-aos-delay="1200">적용영역</div>
</body>
위의 예제소스 처럼...
css와 js를 연결하고, 해당 객체에 속성값을 넣어주기만 하면 됩니다.
■ 기본값 넣기
data-aos="fade-up" // 모션방향 (필수값)
■ 확장값 넣기
data-aos-duration="1500" // 모션이동시간
data-aos-offset="1000" // 모션시작점
data-aos-delay="1200" // 모션시작 지연
(위 확장값은 넣어도 되고, 안 넣어도 됩니다. 필요에 따라 선택해서 사용할 수 있는 옵션 값들입니다.)
아래 공식사이트에 접속 하시면 더 많은 정보와 데모를 보실 수 있습니다.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
■ 추가 변형 소스
html에서 하나씩 넣지 않고, 스크립트를 이용해서 한번에 기능 넣기
/*****************************************************************
AOS Animate on scroll
*****************************************************************/
// 모든 요소들을 선택합니다.
var elements = document.querySelectorAll('[class*="ms_"]');
// 각 요소에 대해 반복합니다.
elements.forEach(function(element) {
// 해당 요소의 class 목록을 가져옵니다.
var classes = element.classList;
// 해당 요소의 스타일을 가져옵니다.
var styles = window.getComputedStyle(element);
// class 목록을 순회하며 "ms_"를 포함하는지 확인합니다.
classes.forEach(function(className) {
// "ms_"로 시작하는지 확인하고 "ms_de01" 또는 "ms_de99"가 아닌 경우
if (className.startsWith("ms_") && !["ms_de01", "ms_de99"].includes(className)) {
// 요소에 배경 이미지가 있는지 확인합니다.
var backgroundImage = styles.getPropertyValue("background-image");
if (backgroundImage && backgroundImage !== "none") {
// 요소에 배경 이미지가 있는 경우, 아무 작업도 하지 않습니다.
return;
}
// "data-aos" 속성을 추가합니다.
element.setAttribute("data-aos", "fade-up");
}
});
});
// AOS 기본값
AOS.init({
duration: 1200
});
'쉬운홈페이지만들기' 카테고리의 다른 글
| 중요) 디자인 화면구성 및 각각의 사용 블록 모듈 수정 위치 (0) | 2024.03.29 |
|---|---|
| 중요) 화면 구성 요소 살펴보기, html, css, js, 이미지원본 위치 (0) | 2024.03.29 |
| 관리자페이지 접속하기 (0) | 2024.03.29 |
| 템플릿 디자인 결제 후 홈페이지에 디자인 적용하기 (0) | 2024.03.29 |
| 디자인 템플릿 구매 전 체크 사항 (0) | 2024.03.29 |
