ScrollMagic
http://scrollmagic.io
PagePiling
https://alvarotrigo.com/pagePiling/
JSライブラリを活用して、Apple の MacPro のページ のような表現を行いたい。ページをめくるエフェクトだけであれば、PagePiling がシンプルで簡単そう。でも他の要件も出てきそうなので、色々応用が利きそうな ScrollMagic を使ってみる。
簡潔に解説してくださっている記事なども見て、基本的な概念を理解する。
オフィシャルページの下記ページで、設定を色々変えて動かしているうちに意味が分かってきた。
Scene Manipulation
http://scrollmagic.io/examples/basic/scene_manipulation.html
pagePiling のようなことを行うには、この中央にある要素を画面一杯に広げる必要がある。
CSS3 でやるか jQuery でやるか。まずCSS3を検討してみると vw, vh という単位を使うと良さそうだ。
ScrollMagic によるページピリングの実現は予想以上に簡単。下記の２つの機能で実装出来そうだ。
- 場面の切り替え
http://scrollmagic.io/examples/basic/section_wipes_natural.html
面白いことに、スクロール操作に対してある場面で一旦停止(pause)したい場合は、シンプルに場面コンテナにmargin-botom (CSS)を加えれば良いだけだという点。 - ページャー（or インジケーター）
ページャーというかインジケーターの実装は、デフォルトのクラストグル(ス)機能が使えそうだ。
http://scrollmagic.io/examples/basic/class_toggles.html
※ちなみにScrollMagicのデバッガーにIndicatorというものがあるが、この項で述べているのはユーザーにページ遷移を伝えるUIとしてのインジケーターのこと。
コメントを残す