WEBページをスクロール値でコントロールする「ScrollMagic」

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

最近のイケてるWEBページとして、WEBページを縦スクロールさせると、位置に合わせてアニメーションをさせるような効果をいい感じに使っているサイトが非常に印象的である。

縦スクロールをしているのに、見た目は横スクロールしているアニメーションになっていたり、
特定の位置までスクロールした時に、画面内のアイテムがアニメーションしたり、

非常にイケているページに見えること間違いない。

こうした効果を使うには「ScrollMagic」というライブラリを使うと比較的簡単に導入できるようである。

ScrollMagic

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-24-23-34-19

本家ページ

http://scrollmagic.io/

本家ページを縦スクロールさせると色々なサンプルが組み込まれています。
サンプルページへのリンクや、実例紹介などのリンクもあるので、見ていても楽しいよ。

Github-project

https://github.com/janpaepke/ScrollMagic/tree/development#availability

for example

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-24-23-37-45

ScrollMagic Examples

このページはスクロール機能が入っていないんですが、サンプルページへのリンクが沢山あるので、見て楽しんで勉強しましょう。

いくつか面白いモノを紹介します。

献血ページ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-07-24
http://buntspenden.bleech.de/de/

ルクセンブルクの観光案内

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-09-36
http://lempens-design.com/

アプライアンステック株式会社

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-27-21-13-24
http://appliancetecltd.com/

導入方法

ダウンロード

https://github.com/janpaepke/ScrollMagic/zipball/master
このダウンロードは、ライブラリページ全体のソースをDLすることができます。
サンプルファイルなどのソースコードを参照するようにしましょう。

ページにライブラリを導入

本家ページの冒頭に書かれているコードを貼り付けるだけで、ライブラリセットは完了のようです。

基本スクリプト

HTMLソースに直接書き込む事で実装できるようです。
個別の動作はサンプルを見てコピペして改造して使うのがよさそうです。

最後に・・・

WEBページを楽しくすることは非常に作っている方も楽しいんですが、利用者が解りづらくなることは避けなければいけません。
だって、縦スクロールしようと思ったら横スクロールになるなんて、よくよく考えてみると理不尽かもしれないので、そう思われないデザインにしなければいけませんね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です