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. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  2. Sticky Slider Navigation(Responsive)
  3. scrollMonitor

    JavaScript

    要素が表示領域に入ったり出たりするとイベントを受け取れる「scrollMonitor」

    scrollMonitorは、要素が表示領域(ビューポート)に入ったり…

  4. no-image

    JavaScript

    高さを揃えたレスポンシブな画像ギャラリー「jQuery Mosaic plugin」

    jQuery Mosaic pluginは高さを揃えたレスポンシブな画…

  5. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  6. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

コメント

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

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

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP