logo

waypoint.jsとCSSでスクロールして
画面指定位置で要素をアニメーションさせる

waypoint.jsとCSSのtransitionを使えば
簡単にスクロールして画面指定位置に来たタイミングで
アニメーションさせることができます。

img01

SECTION01

今回はwaypoint.jsで「offset:70」を設定していますので、画面上から70％位置まで要素が来たタイミングを取得することができます。
そのタイミングで要素に「active」というクラスをつけて、CSSでアニメーションさせています。

SECTION02

今回はwaypoint.jsで「offset:70」を設定していますので、画面上から70％位置まで要素が来たタイミングを取得することができます。
そのタイミングで要素に「active」というクラスをつけて、CSSでアニメーションさせています。

img01
img01

SECTION03

今回はwaypoint.jsで「offset:70」を設定していますので、画面上から70％位置まで要素が来たタイミングを取得することができます。
そのタイミングで要素に「active」というクラスをつけて、CSSでアニメーションさせています。