AOSサンプル

AOS無し
data-aos="fade-left"

data-aosは、アニメーションの種類を指定。

data-aos="fade-left"data-aos-offset="0"

data-aos-offsetは、要素から見た位置にトリガーを指定(px)します。

data-aos="fade-left" data-aos-duration="3000"

data-aos-durationは、アニメーション時間をミリ秒単位で指定します。

data-aos="fade-left" data-aos-easing="ease-in-sine"

data-aos-easingは、easingを指定します。

data-aos="fade-left" data-aos-delay="300"

data-aos-delayは、アニメーションをミリ秒単位で遅らせます。

data-aos="fade-left" data-aos-anchor="#example-anchor"

data-aos-anchorは、指定した要素がトリガーになります。

#example-anchor

data-aos="fade-left" data-aos-anchor-placement="bottom-bottom"

data-aos-anchor-placementは、"要素の位置-ウィンドウ位置"がトリガーになります。
この場合、要素のbottomがウィンドウのbottomを過ぎたらトリガー。

data-aos="fade-left" data-aos-anchor-placement="center-center"

要素のcenterがウィンドウのcenterを過ぎたらトリガー。

data-aos="fade-left" data-aos-once="true"

data-aos-onceは、アニメーションを1回のみにする場合trueを指定。

記事に戻る