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. Fancy Input

    JavaScript

    かっこいいエフェクトのテキスト入力を実装できる「Fancy Input」

    Fancy Inputは、かっこいいエフェクトを備えたテキスト入力を実…

  2. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

  3. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  4. Simple button checks

    JavaScript

    カスタマイズ可能なチェックボックスを実装できる「Simple button checks」

    Simple button checksはカスタマイズ可能なチェックボ…

  5. Grasp Mobile Progress Circle
  6. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

コメント

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

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

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP