最近のイケてるWEBページとして、WEBページを縦スクロールさせると、位置に合わせてアニメーションをさせるような効果をいい感じに使っているサイトが非常に印象的である。
縦スクロールをしているのに、見た目は横スクロールしているアニメーションになっていたり、
特定の位置までスクロールした時に、画面内のアイテムがアニメーションしたり、
非常にイケているページに見えること間違いない。
こうした効果を使うには「ScrollMagic」というライブラリを使うと比較的簡単に導入できるようである。
ScrollMagic
本家ページ
http://scrollmagic.io/
本家ページを縦スクロールさせると色々なサンプルが組み込まれています。
サンプルページへのリンクや、実例紹介などのリンクもあるので、見ていても楽しいよ。
Github-project
https://github.com/janpaepke/ScrollMagic/tree/development#availability
for example
ScrollMagic Examples
このページはスクロール機能が入っていないんですが、サンプルページへのリンクが沢山あるので、見て楽しんで勉強しましょう。
いくつか面白いモノを紹介します。
献血ページ
http://buntspenden.bleech.de/de/
ルクセンブルクの観光案内
http://lempens-design.com/
アプライアンステック株式会社
http://appliancetecltd.com/
導入方法
ダウンロード
https://github.com/janpaepke/ScrollMagic/zipball/master
このダウンロードは、ライブラリページ全体のソースをDLすることができます。
サンプルファイルなどのソースコードを参照するようにしましょう。
ページにライブラリを導入
本家ページの冒頭に書かれているコードを貼り付けるだけで、ライブラリセットは完了のようです。
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
基本スクリプト
HTMLソースに直接書き込む事で実装できるようです。
個別の動作はサンプルを見てコピペして改造して使うのがよさそうです。
<script>
// init controller
var controller = new ScrollMagic();
// assign handler "scene" and add it to Controller
var scene = new ScrollScene({duration: 100})
.addTo(controller);
// add multiple scenes at once
var scene2;
controller.add([
scene, // add above defined scene
scene2 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);
</script>
最後に・・・
WEBページを楽しくすることは非常に作っている方も楽しいんですが、利用者が解りづらくなることは避けなければいけません。
だって、縦スクロールしようと思ったら横スクロールになるなんて、よくよく考えてみると理不尽かもしれないので、そう思われないデザインにしなければいけませんね。
