ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「ScrollTrigger」

ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「ScrollTrigger」

ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「ScrollTrigger」

ScrollTriggerは、ページのスクロールに応じて、要素をアニメーションさせながら表示できるようになるスクリプトです。

動きについては、デモページをご参照ください。下にスクロールしていくと、要素がアニメーションしながら表示されます。

ScrollTriggerの使い方

スクリプトの設置と読み込み

GitHubからスクリプトをダウンロードして、ScrollTrigger.min.jsをサーバー上に設置します。

ScrollTrigger.min.jsを設置したら、HTMLの</body>の直前に以下を記述します。


<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
 var trigger = new ScrollTrigger();
});
</script>

アニメーションさせる要素のマークアップ

アニメーションさせたい要素には、以下のようにdata-scroll属性を追加します。

<div data-scroll="">アニメーションさせたい要素</div>

CSSでアニメーションの調整

CSSでアニメーションを調整します。


.invisible {
 transition: opacity 0.5s ease;
 opacity: 0.0;
}

.visible {
 transition: opacity 0.5s ease;
 opacity: 1.0;
}

上記はGitHubで紹介されている例ですが、「要素がウインドウ内に入ったら、0.5秒かけて透明度がなくなっていく」というアニメーションになります。

ScrollTriggerのオプション

ScrollTriggerには様々なオプションも用意されています。

toggle() 付与クラスの変更
offset() オフセット
addWidth オフセットに要素の横幅を追加
addHeight オフセットに要素の高さを追加
centerHorizontal オフセットの左右中央値を取得
centerVertical オフセットの天地中央値を取得
once 1度だけアニメーションを実行

詳しくは、GitHubの説明をご参照ください。

あとがき

縦に長いサイトなんかでは、動きがないと単調になってきますので、アニメーションがあるとより下にスクロールしてみたくなるかもしれませんね。

jQueryプラグインですが、ScrollMeも同じように要素にアニメーションが実装できて便利です。ぜひScrollMeもチェックしてみてください。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です