◀︎STUDY JavaScript_030-1 AOS.js / AOS.css

◀︎

-----

▶︎

AOS.js / AOS.css とは

スクロール・アニメーションを簡単に実装できるライブラリ
軽量 / パフォーマンス性が良い
https://michalsnik.github.io/aos/
Slide / Flip(回転) / Fade /Zoom

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

▼ Download: ■ sample_JS_030-ABCDE_000

記述

aos.css
html と data-aos attribute
aos.js
必要な場合は jquery.min.js を入れる
AOS.init() / AOS.init({});

サンプル - 1

リロードしたときに左から右へスライド・イン. jquery と aos.css / aos.js をリンクし, AOS.init() を記述している.

サンプル - 2

リロードして3秒後に右から左へ2秒間でスライド・イン. jquery と aos.css / aos.js をリンクし, AOS.init({}) を記述している.

サンプル - 3

fade-in / fade-up / fade-down / flip-down / flip-up / zoom-out-down を使用した例. jquery は使用せず, aos.css / aos.js をリンクし, AOS.init({easing:"ease-in-out-sine"}) を記述している.

サンプル - 4

fade-up を JavaScript で設定した例. jquery は使用せず, aos.css / aos.js をリンクし, AOS.init({easing:"ease-in-out-sine"}) を記述している.

設定について

data-aos-offset / 動作までの距離 (px)　120
data-aos-duration / アニメーションの時間 (ms)　400
data-aos-easing / イージング・タイプ　ease
data-aos-delay / 動作までの秒数 (ms)　0
data-aos-anchor / 動作の位置を指定　null
data-aos-anchor-placement / 動作位置を設定　top-bottom
data-aos-once / 一度のみの動作にする　false

イージング・タイプ

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-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

◀︎

-----

▶︎

◀︎Contents　　　　　STUDY JavaScript_030-1

◀︎STUDY JavaScript_030-1 AOS.js / AOS.css

◀︎Contents STUDY JavaScript_030-1

◀︎Contents　　　　　STUDY JavaScript_030-1