はじめに

JavaScriptでプラグインを制作したのでご紹介します。
ページのスクロールに合わせて指定したコンテンツを表示できます。

prjct-samwest.github.io

特徴

jQuery不要
横に並んだ要素は自動で遅延表示（時間設定可）
その他細かな表示時間が指定可
IE11対応

使い方

ファイルのダウンロード

配布サイトからファイルをダウンロードします。

CSSとJSの読み込み

ダウンロードしたCSSとJSファイルを読み込みます。 JSファイルは</body>直前に置いてください。

<link rel="stylesheet" href="scrollCue.css">

<script src="scrollCue.min.js"></script>
<script>scrollCue.init();</script>

HTMLタグの追記

通常指定

表示させたい要素にdata-cue属性でアニメーションタイプを指定します。

<img src="001.jpg" data-cue="fadeIn">
<img src="002.jpg" data-cue="fadeIn">
<img src="003.jpg" data-cue="fadeIn">

アニメーションタイプは全部で15種類あります。

fadeIn/slideInLeft/slideInRight/slideInDown/slideInUp/zoomIn/zoomOut/rotateIn/bounceIn/bounceInLeft/bounceInRight/bounceInDown/bounceInUp/flipInX/flipInY

動きの詳細はExamplesページで確認してください。

一括指定

親タグにdata-cues属性を付けると一括で設定できます。

<div data-cues="fadeIn">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg">
</div>

グループ指定

data-group属性でグループ化が可能です。
グループ化すると、最初の要素が表示されると残った要素もスクロール量に関係なく表示されます。
グループ名はなんでもOKです。

<div data-cues="fadeIn" data-group="images">
    <img src="001.jpg">
    <img src="002.jpg">
    <img src="003.jpg">
    <img src="004.jpg">
    <img src="005.jpg">
    <img src="006.jpg">
</div>

オプション

オプション	型	初期値	備考
duration	Number	600	アニメーションの表示時間（ミリ秒）
interval	Number	-0.7	横に並んだ要素の表示間隔整数または実数整数 : (ミリ秒) 実数 : 1つ前の要素の表示時間の割合
percentage	Number	0.75	要素が画面の高さのどのあたりに入ったら表示させるか（0～1までの実数）
enable	Boolean	true	ページを開いたらすぐにアニメーションを実行するか falseの場合、任意のタイミングで scrollCue.enable(true) を実行してください。
docSlider	Boolean	false	docSlider.jsと組み合わせるか docSiider.jsについてはこちらの記事を参照してください
pageChangeReset	Boolean	false	docSlider.jsと組み合わせる場合に使用ページを切り替えるたびにアニメーションを実行するか

例

<script>
scrollCue.init({
    duration : 300,
    interval : -200,
    percentage : 0.8
});
</script>

メソッド

メソッド	引数	備考
init	options	scrollCue.jsの初期化
update		scrollCue.jsの更新
enable	true / false	scrollCue.jsの動作の停止または再開

その他の設定

初期設定以外にも個別で細かい設定が可能です。
詳細はExamplesページを参照してください。

[data-duration] アニメーションの表示時間
[data-interval] アニメーションの間隔
[data-delay] 遅延設定
[data-order] 表示順
[data-addClass] 表示時に指定のCSSクラスを付ける
[data-order] 順序の指定
[data-sort="reverse"] 逆順表示
[data-sort="random"] ランダム順表示

まとめ

かなり内容を端折りましたが、ざっくりと使い方のまとめでした。
細かい機能やカスタマイズなどの説明はドキュメントページ（英語）をご覧ください。

サム・ウェスト倉庫

Web関係の個人的備忘録

【JavaScript】スクロールで要素を表示させるプラグイン scrollCue.js【jQuery不要】