[JS]シンプルなページ内スクロールから、ちょっと面白いスクロールまで簡単に実装できるスクリプト -Scrolld.js

サイト構築 -JavaScript

Post on:2013年9月19日

Scrolld.jsのデモ

デモは、3種類用意されています。

まずは、Demo 1。

Demo 1

上部のナビゲーションをクリックすると、それに対応したコンテンツにアニメーションでスクロールします。

Demo 1：2番目のコンテンツにスクロール

右下部のボタンはページの上部にスクロールします。

レスポンシブにも対応しており、幅を変え高さが変更されたコンテンツでも同じようにスクロールします。

Demo 1：幅780pxで表示

Demo 2は、スクロール時にさまざまなエフェクトを加えたり、位置を調整します。

Demo 2

スクロールしてバウンドしたり、移動後に天地中央配置にしたり。

最後のDemo 3はさまざまなものをトリガーにしたデモです。

Demo 3

一番目はdiv、二番目はネコの画像、下の方には表示幅に合わせてエフェクトが変わります。

Scrolld.jsの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを</body>の上あたりに外部ファイルとして記述します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../demo/js/scrolld.min.js"></script>

Step 2: JavaScript

スクリプトのトリガーを外部ファイルの下に記述します。

<script type="text/javascript">
$("[id*='Btn']").stop(true).on('click',function(e){e.preventDefault();$(this).scrolld();})
</script>

Step 3: HTML

スクロールの目標となる要素にidを付与し、アンカーとセットにします。

<a id='useBtn' class='*' href='*'>

<div id='use' class='*'>

ターゲットのidを「use」にしたら、アンカーのidには「Btn」をつけ「useBtn」にします。「Btn」は変更可能です。

オプション

オプションでは、スクロールのエフェクトをclassで簡単に設定できます。

<a id='useBtn' class='easeOutBounce easeOutBounceMobile' href='*'>

スクリプトでは他にもさまざまな設定ができます。

Web Settings: 

var scrolldDistance = scrolldPre;
var scrolldDistanceMin = scrolldPre;
var scrolldSpeed = speed11;
var scrolldEasing = 'scrolldEasing1';
var scrolldFixed = true;

Mobile Settings:

var scrolldMobile = true;
var scrolldMobileWidth = 979;
var scrolldMobileDistance = scrolldPre;
var scrolldMobileDistanceMin = scrolldPre;
var scrolldMobileSpeed = speed11;
var scrolldMobileEasing = 'scrolldEasing1';
var scrolldMobileFixed = true;

* Located the top of the Scrolld.js / Scrolld.min.js file *

Additional Settings:

var scrolldCustom = 0;
var scrolldNavBar = 'fixedNavBar';
var scrolldMobileNavBar = 'fixedNavBar';