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 早見表」から確認することができます。

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

Owl Carouselタッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carousel」前のページ

待ち受けを見てロック解除でポイントが貯まるLOCKJOY(ロックジョイ)を使ってみた次のページLOCKJOY(ロックジョイ)

関連記事

  1. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  2. Sticky Elements

    JavaScript

    エレメントがくっついてくるアニメーション「Sticky Elements」

    Sticky Elementsはエレメントにカーソルを乗せるとくっつい…

  3. HC Sticky

    JavaScript

    スクロールしても要素を固定できるJSライブラリ「HC Sticky」

    HC Stickyはスクロールした時に特定の要素を固定したまま表示でき…

  4. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  5. number-divider.js

    JavaScript

    数字を分割できるjQueryプラグイン「number-divider.js」

    number-divider.jsは数字を分割させることができるjQu…

  6. HR Navigation Responsive Menu

コメント

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

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

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP