ページのスクロールに応じてアニメーションしながら要素を表示できるスクリプト「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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。