# AOS
https://michalsnik.github.io/aos/
- CDN
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
- JS
<script>
AOS.init();
</script>
형식 )
<div data-aos="fade-in"></div>
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>
<div data-aos="fade-in" data-aos-duration="4000"></div>
명령어 | 설명 |
data-aos | 사용할 애니메이션 효과명 |
data-aos-easing | 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) |
data-aos-anchor | 특정한 객체에 anchor를 설정, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 |
data-aos-delay | 애니메이션 재생 대기시간 설정(default: 0) |
data-aos-offset | 애니메이션 효과가 시작될 객체의 위치 설정 |
data-aos-duration | 애니메이션의 재생시간 설정(default: 400) |
data-aos-anchor-placement | 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom) |
data-aos-once | 스크롤 할때마다 애니매이션이 재생될지를 설정(default: false) |
* delay와 duration은 0부터 3000까지 최댓값을 설정 , 50 단위로 설정 변경이 가능.
- Fade animations:
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
- Flip animations:
flip-up
flip-down
flip-left
flip-right
Slide animations:
slide-up
slide-down
slide-left
slide-right
- Zoom animations:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right
- Anchor placements:
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top
- Easing functions:
linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart
샘플
- HTML
<div id="wrap">
<header id="header">header</header>
<section id="visual">visual</section>
<main class="main">
<div class="con-box con1">
<div class="inner">
<h2 data-aos="fade-up">타이틀1</h2>
</div>
</div>
<div class="con-box con2">
<div class="inner">
<h2 data-aos="fade-right">타이틀2</h2>
<ul class="list">
<li data-aos="fade-down-right">test1</li>
<li data-aos="fade-up-left">test1</li>
<li data-aos="fade-up-right">test1</li>
<li data-aos="fade-left">test1</li>
</ul>
</div>
</div>
<div class="con-box con3">
<div class="inner">
<h2 data-aos="zoom-in">타이틀3</h2>
<ul class="list">
<li data-aos="flip-left" data-aos-duration="500" data-aos-delay="600">test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div class="con-box con4">
<div class="inner">
<h2 data-aos="fade-up">타이틀4</h2>
</div>
</div>
</main>
</div>
- CSS
#wrap { width: 100%; min-width: 1600px; }
#header { width: 100%; height: 200px; background: beige;}
#visual { width: 100%; height: 800px; background: tomato;}
.con-box { width: 100%;}
.con-box .inner { width: 1400px; margin: auto; height: 1200px; box-sizing: border-box; padding: 100px 0;}
.con-box h2 { font-size: 80px; text-align: center; font-weight: 700; }
.con1 { background: #dcdcdc; }
.con2 { }
.con2 ul { display: flex; justify-content: space-between; margin-top: 80px; }
.con2 ul li { flex:1 ; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; font-size: 25px; }
.con3 { background: bisque; }
.con3 ul { display: flex; justify-content: space-between; margin-top: 80px; }
.con3 ul li { flex:1 ; height: 300px; border: 1px solid #000; text-align: center; line-height: 300px; font-size: 25px; }
.con4 { background: hotpink }
# onscroll-effect
https://twikito.github.io/onscroll-effect/
# scroll-Btween
https://olivier3lanc.github.io/Scroll-Btween/
# stickymate
https://michaelrafailyk.github.io/stickymate/
https://github.com/michaelrafailyk/stickymate?tab=readme-ov-file
'플러그인 외' 카테고리의 다른 글
[ Markdown ] Markdown 작성법 (0) | 2023.12.14 |
---|---|
[ 플러그인 ] 04. Masonry, isotope (0) | 2023.11.02 |
[ 플러그인 ] 02. swiper, slick, skitter (0) | 2023.11.01 |
[ 플러그인 ] 01. fancybox (1) | 2023.11.01 |
[ Sass( SCSS ) ] 문법 (0) | 2023.10.27 |