Scroller Sample

page0

Parallaxを使用した1ページ構成のWebページのサンプルです。
スクロールする毎に下のページがオーバーレイします。

Parallax効果には自作のJavaScriptライブラリを使用しています。
元々のライブラリはES6ですがbabelでES2015にトランスパイルしたものを使用しているのでIE11でも動作すると思います。

page1

本サンプルではスクロール停止機能を使用してページの重ね合わせを行なっています。
その他にも次の様な効果を使用できます。

  • スクロール速度の変更
  • スクロール速度変更位置の指定
  • スクロール停止位置の指定
  • スクロール無効範囲の指定

page2

Parallax効果でこういうこともできます。
右の猫と風船に注目。
それぞれの要素の移動速度を制御することでこの様な動きを表現できます。

page3

終わり