demo-01 [AOS.js]

Animation

Fade

data-aos=”fade”copied!copied!
data-aos=”fade”copied!
data-aos=”fade”copied!

Fade Up

data-aos=”fade-up”copied!
data-aos=”fade-up”copied!
data-aos=”fade-up”copied!

Fade Down

data-aos=”fade-down”copied!
data-aos=”fade-down”copied!
data-aos=”fade-down”copied!

Fade Left

data-aos=”fade-left”copied!
data-aos=”fade-left”copied!
data-aos=”fade-left”copied!

Fade Right

data-aos=”fade-right”copied!
data-aos=”fade-right”copied!
data-aos=”fade-right”copied!

Fade Up Right

data-aos=”fade-up-right”copied!
data-aos=”fade-up-right”copied!
data-aos=”fade-up-right”copied!

Fade Up Left

data-aos=”fade-up-left”copied!
data-aos=”fade-up-left”copied!
data-aos=”fade-up-left”copied!

Fade Down Right

data-aos=”fade-down-right”copied!
data-aos=”fade-down-right”copied!
data-aos=”fade-down-right”copied!

Fade Down Left

data-aos=”fade-down-left”copied!
data-aos=”fade-down-left”copied!
data-aos=”fade-down-left”copied!

Zoom In

data-aos=”zoom-in”copied!
data-aos=”zoom-in”copied!
data-aos=”zoom-in”copied!

Zoom In Up

data-aos=”zoom-in-up”copied!
data-aos=”zoom-in-up”copied!
data-aos=”zoom-in-up”copied!

Zoom In Down

data-aos=”zoom-in-down”copied!
data-aos=”zoom-in-down”copied!
data-aos=”zoom-in-down”copied!

Zoom In Left

data-aos=”zoom-in-left”copied!
data-aos=”zoom-in-left”copied!
data-aos=”zoom-in-left”copied!

Zoom In Right

data-aos=”zoom-in-right”copied!
data-aos=”zoom-in-right”copied!
data-aos=”zoom-in-right”copied!

Zoom Out

data-aos=”zoom-out”copied!
data-aos=”zoom-out”copied!
data-aos=”zoom-out”copied!

Zoom Out Up

data-aos=”zoom-out-up”copied!
data-aos=”zoom-out-up”copied!
data-aos=”zoom-out-up”copied!

Zoom Out Down

data-aos=”zoom-out-down”copied!
data-aos=”zoom-out-down”copied!
data-aos=”zoom-out-down”copied!

Zoom Out Down

data-aos=”zoom-out-left”copied!
data-aos=”zoom-out-left”copied!
data-aos=”zoom-out-left”copied!

Zoom Out Right

data-aos=”zoom-out-right”copied!
data-aos=”zoom-out-right”copied!
data-aos=”zoom-out-right”copied!

Slide Up

data-aos=”slide-up”copied!
data-aos=”slide-up”copied!
data-aos=”slide-up”copied!

Slide Down

data-aos=”slide-down”copied!
data-aos=”slide-down”copied!
data-aos=”slide-down”copied!

Slide Left

data-aos=”slide-left”copied!
data-aos=”slide-left”copied!
data-aos=”slide-left”copied!

Slide Right

data-aos=”slide-right”copied!
data-aos=”slide-right”copied!
data-aos=”slide-right”copied!

Flip Up

data-aos=”flip-up”copied!
data-aos=”flip-up”copied!
data-aos=”flip-up”copied!

Flip Down

data-aos=”flip-down”copied!
data-aos=”flip-down”copied!
data-aos=”flip-down”copied!

Flip Left

data-aos=”flip-left”copied!
data-aos=”flip-left”copied!
data-aos=”flip-left”copied!

Flip Right

data-aos=”flip-right”copied!
data-aos=”flip-right”copied!
data-aos=”flip-right”copied!

Easing

linear 一定の速さ

data-aos-easing=”linear”copied!

ease 開始と完了をなめらかに？

data-aos-easing=”ease”copied!

ease-in 開始をなめらかに

data-aos-easing=”ease-in”copied!

ease-out 終わりをなめらかに

data-aos-easing=”ease-out”copied!

ease-in-out 開始と完了をなめらかに？

data-aos-easing=”ease-in-out”copied!

ease-in-back 少し戻ってなめらかに開始

data-aos-easing=”ease-in-back”copied!

ease-out-back なめらかに完了して少し戻る

data-aos-easing=”ease-out-back”copied!

ease-in-out-back 少し戻ってなめらかに開始+なめらかに完了して少し戻る

data-aos-easing=”ease-in-out-back”copied!

ease-in-sine 開始をなめらかに

data-aos-easing=”ease-in-sine”copied!

ease-out-sine 終わりをなめらかに

data-aos-easing=”ease-out-sine”copied!

ease-in-out-sine 開始と完了をなめらかに

data-aos-easing=”ease-in-out-sine”copied!