2014/12/09

【jQuery】スマートフォンのような弾む演出を再現できるプラグイン『fancy scroll』

【jQuery】スマートフォンのように弾む演出を再現できるプラグイン『fancy scroll』

AndroidやiOSなどのスマートフォンブラウザに実装されている,画面最下部までスクロールすると弾むような演出を,PCのブラウザ上でも行おうというプラグインです.

目次

入手方法

https://github.com/peachananr/fancy-scrollにアクセスし,右側のDownload ZIPをクリックしてファイルをダウンロードします.

設置方法

ダウンロードしたファイルを解凍し,jquery.fancy-scroll.jsを.jQuery本体とともに読み込みます.

そして,JavaScriptを用いて動作を指定します.

$(window).fancy_scroll({
  animation: "bounce", //bounce(iOS風),glow(Android 4.0~風)
 	bounceDistance: 50, //弾む高さ(px)
 	glowColor: "#02A1FA", //animationをglowにした際の色の指定
 	animDuration: "0.3s", // アニメーション実行にかかる秒数
 	animEasing: "cubic-bezier(0.175, 0.885, 0.420, 1.310)", // easingにかかる時間
 });

※5つ目の項目はhttp://matthewlein.com/ceaser/のジェネレータを用いると便利でしょう.

また,ページ全体ではなく,一部のdiv要素に適用したい場合は

<div class="container">
  <div class="innerWrapper">
    ...
  </div>
</div>
.container {
  overflow:hidden;
  max-height: 400px;
}

上記のような構造にすることで,縦方向にスクロールを発生させます.

さらに,JavaScriptを用いて,div要素と,内部の要素をそれぞれ指定して実行します.

$(".container").fancy_scroll({
  innerWrapper: ".innerWrapper"
 });

サンプル

http://www.thepetedesign.com/demos/fancy_scroll_demo.htmlに,iOS風とAndroid風の両方が設置されています.

まとめ

スクロール限界をちょっとした演出で表すことが出来るので,遊び心のある一風変わったサイトを制作したい方は,検討してみてはいかがでしょうか.