AnimateScroll

JavaScript

面白いエフェクトのページ内スクロールを実装できるjQueryプラグイン「AnimateScroll」

ページの任意の場所にスクロールできるjQueryプラグイン「AnimateScroll」が面白いですね。バウンスなどのエフェクトを与えることができるので、ちょっと変わったページ内スクロールを実装したい時によさそうです。スクロールが楽しくなるので色んなコンテンツを見てくれそうですね。

[ads_center]

使い方

jQuery本体とダウンロードしたプラグインを読み込みます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="animatescroll.js">

あとはスクロールしたい場所とプラグインをセットするだけです。

<div id="sample1">サンプル1<div>
<!-- 中略 --->
<a onclick="$('[id-or-class-of-element]').animatescroll();">サンプル1へ</a>

オプション

オプションは全部で3つあります。

  • easing
  • scrollSpeed
  • padding

実際に使用する場合は以下のように指定します。

$('#sample').animatescroll({scrollSpeed:2000,easing:'easeOutBounce'});

easingには色んなエフェクト効果を指定することができます。エフェクトの一覧は「Easing Function 早見表」から確認することができます。

ランディングページなんかで活用してみたくなりますね。ダウンロードやプラグインの詳細は以下からどうぞ。

関連記事

  1. Bootstrap Photo Gallery jQuery plugin
  2. Easy Z modal

    JavaScript

    シンプルなモーダルウィンドウ・ダイアログボックスを表示できる「Easy Z modal」

    Easy Z modalはシンプルでダイナミックなモーダルウィンドウ・…

  3. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  4. Wipe Slider

    JavaScript

    背景画像を滑らかにスライドさせるjQueryプラグイン「Wipe Slider」

    Wipe Sliderは背景画像を滑らかにスライドさせることができるj…

  5. jQuery Scrollify

    JavaScript

    セクションごとにスクロールしてくれる「jQuery Scrollify」

    jQuery Scrollifyはセクションごとにスクロールしてくれる…

  6. no-image

    JavaScript

    水平スクロールができることを示唆してくれる「ScrollHint」

    ScrollHintは水平スクロールができることをポインタアイコンを使…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP