指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js
- 2015/02/16
- tan
前回公開した「指定した要素がスクロールで画面内に入った時、内包要素を順番にフェードインするjQueryプラグインjquery-scrollInTurn.js」ですが、最近このプラグインだけでは物足りなくなってきました。
「指定した要素がスクロールで画面内に入った時」、特定のアニメーション効果などを実装したいときが多々あったので、その部分に特化したプラグインをもうひとつ作りました。
その名も「指定した要素がスクロールで画面内に入った時、イベントを発動させるjQueryプラグインjquery-scrollInFunc.js」です！
ファーストビューに入っていない要素に対してのアニメーションを、スクロール位置によって発動させることができます。
もくじ
Demo
指定した要素がスクロールで画面内に入った時、「高さを200pxにするアニメーション」イベントを発動させています。
class="element"を付与した要素で囲む
class="target"を付与した要素
Download
ダウンロードしてからご利用ください。
jquery-scrollInFunc.js(ver1.0.0)
15/2/9 ver1.0.0 公開
How to
jQueryライブラリの読み込み
|
1 2 |
<!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> |
jquery-scrollInFunc.jsの読み込み
jQueryライブラリ読み込みの記述より下に記述します。
|
1 |
<script type="text/javascript" src="/js/jquery-scrollInFunc.js"></script> |
htmlのマークアップ
トリガーとなる要素にclassまたはidを付与します。
ここでは一例として、class="demo1"を付与した要素でくくりました。
また、効果をつけたい要素にclass="target"を付与しています。
|
1 2 3 4 |
<div class="demo1"> <p>class="demo1"を付与した要素で囲む</p> <p class="target">class="target"を付与した要素</p> </div> |
jquery-scrollInFuncの呼び出し
jquery-scrollInFunc.js読み込みの記述より下に記述します。
トリガーとなる要素をセレクタで指定し（ここでは.demo1）、scrollInFuncを呼び出します。
.demo1の要素が画面内に入った時、targetReachに記述した「高さを200pxにするアニメーション」が発動されます。
この時、引数elmはトリガーとなる要素（ここでは.demo1）を指します。
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> $(document).ready(function() { $('.demo1').scrollInFunc({ targetReach: function( elm ) { elm.find('.target').animate({height: 200}); } }); }); </script> |
Options
| delayHeight | 初期値:400 0にすると、トリガーとなる要素をスクロールで通り越して初めてイベントが起こります。delayHeightの値の分だけトリガーとなる要素の手前でイベントが起こるようになります。 |
||
|---|---|---|---|
| targetReach（function型） | 初期値:なし トリガーとなる要素に到達した時に発動するイベントをここに書きます。引数elmはトリガーとなる要素で指定したセレクタです。 ex)
|
||
| fadeOutEvent | 初期値:true トリガーとなる要素よりスクロール位置が手前になった場合、targetBackで指定したイベントを発動させるか否か指定できます。 |
||
| targetBack（function型） | 初期値:なし トリガーとなる要素よりスクロール位置が手前になった場合に発動させるイベントをここに書きます。引数elmはトリガーとなる要素で指定したセレクタです。 ex)
|
Examples
「左からスライドインする見出し」と「ぼかしておいてはっきりする背景画像（IEとFirefoxはサポート外）」は別ページにデモを作りました。
下記デモではaddClassでクラスを付与しているだけなのですが、CSS3と組み合わせることで表現の幅が広がります。
Examples
最後に
- MIT license
- スマホでも利用できます
- jquery-1.11.0で検証したので、1.11.0以下での動作は保証していません
- バグがあったら連絡いただけると幸いです
