スクロール操作
連動アニメーション

スマートフォンでも楽しめるインタラクション

ファーストビューで見えている要素は、画面読み込み完了後0.5秒後に再生
.slideInFromBottom > *._animateByScroll_

以下のアニメーションは全て画面スクロールをトリガーとして開始されます。

要素がスクロールで画面中央付近に差し掛かると、JSによりclass値(._on_ | ._off_ )が切り替わり、あらかじめCSSで設定されたアニメーションが再生される仕組みです。

複数の要素

一つのトリガーでアニメーションを開始しています。要素の出現タイミングは animation-delay でコントロールできます。

*._animateByScroll_ > ブロック要素._animationClassName_._delayClassname_