[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal

Post on:2014年5月26日

先日紹介した「Ani.js」の作者様から、更にパワーアップしたスクリプトをつくったよ、と連絡を受けたので紹介します。

jQueryは無しで、縦長ページ用のスクロールに連動したさまざまなアニメーションが簡単に実装できます。

サイトのキャプチャ

ScrollReveal
ScrollReveal GitHub

ScrollRevealのデモ

デモをアニメーションgifにしてみたら、すごいサイズになってしまったので、静止画で紹介します。
動きはデモページで実際にお楽しみください。

デモのキャプチャ

デモページ

ScrollRevealはAni.jsを強化するスクリプトで、要素がビューポートに表示された時にさまざまなアニメーションを適用します。

デモのキャプチャ

デモページ

サムネイルはビューポートに入ると、スライドや回転やフェードなどで表示されます。

デモのキャプチャ

デモページ

大きなコンテンツをダイナミックなアニメーションで表示。

デモのキャプチャ

デモページ

スライドですっーと表示されるのもいい感じです。

デモのキャプチャ

デモページ

フッタはダイナミックに3Dで表示されます。

ScrollRevealの使い方

Step 1: 外部ファイル

当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。

<head>
  ...
  <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css">
</head>
<body>
  ...
  <script src="anijs-min.js"></script>
  <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script>
</body>

Step 2: HTML

各要素のアニメーションの設定は、HTMLに記述します。
例えば、divで実装したパネルがビューポートに入った時にスイングするアニメーションで表示する時はこんな感じになります。

<body>
    <div id="item" data-anijs="if: scroll, on: window, do: swing animated, before: scrollReveal">
        Cuba 2022
    </div>
</body>

「if, on, do」は、Ani.jsの記述ルールで、「before: scrollReveal」を追加することでビューポートに入った時という設定ができます。
Ani.jsの記述ルールは下記の通りです。

if
トリガーとなるイベント（click, scroll など）を設定
on（オプション）
対象となるエレメント（cssのセレクタなど）
自身を対象とする場合は不要
do
実行するアニメーション
to（オプション）
追加する要素

Ani.jsの使い方は下記ページを参考にどうぞ。

sponsors

top of page

©2024 coliss