スクロール操作
連動アニメーション
スマートフォンでも楽しめるインタラクション
ファーストビューで見えている要素は、画面読み込み完了後0.5秒後に再生
.slideInFromBottom > *._animateByScroll_
以下のアニメーションは全て画面スクロールをトリガーとして開始されます。
要素がスクロールで画面中央付近に差し掛かると、JSによりclass値(._on_ | ._off_ )が切り替わり、あらかじめCSSで設定されたアニメーションが再生される仕組みです。
複数の要素
一つのトリガーでアニメーションを開始しています。要素の出現タイミングは animation-delay でコントロールできます。
*._animateByScroll_ > ブロック要素._animationClassName_._delayClassname_