플러그인 외

[ 플러그인 ] 03. AOS

변쌤(이젠강남) 2023. 11. 2. 05:21
반응형

# AOS

 

https://michalsnik.github.io/aos/

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

 

- 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/

 

OnScroll Effect

A tiny JavaScript library to enable CSS animations when user scrolls.

twikito.github.io

 

 

# scroll-Btween

 

https://olivier3lanc.github.io/Scroll-Btween/

 

Scroll Btween

Tween any CSS values on any DOM element in relation with its position into the viewport.

olivier3lanc.github.io

 

 

# stickymate

 

https://michaelrafailyk.github.io/stickymate/

 

Stickymate

data-animation="opacity: {-45vh: 0, 0: 1}"

michaelrafailyk.github.io

 

 

https://github.com/michaelrafailyk/stickymate?tab=readme-ov-file

 

GitHub - michaelrafailyk/stickymate: Stickymate is a tool that designed to help web developers easily create scroll-based animat

Stickymate is a tool that designed to help web developers easily create scroll-based animations without JavaScript knowledge, just setting animation params directly in the HTML markup. - michaelraf...

github.com

 

반응형

'플러그인 외' 카테고리의 다른 글

[ 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