Block Reveal Effectsの使い方を紹介！2段階アニメーションを実装しよう！

サイトを単調なものにせず、飽きさせないコンテンツにするにはどうするか。webの仕事をしてる人であれば、考えたことがあるかと思います。

方法の一つとして、スクロールエフェクトの導入があります。

また、クライアントワークではクライアントから「アニメーションを入れたい！」と要望をもらうこともあります。

今回は、そんなスクロールエフェクトを簡単に実装できるJavaScript ライブラリ、Block Reveal Effectsを紹介します。

JavaScriptの基礎学習がまだの方は、下記の記事も参考にしてみてください。

JavaScriptの勉強ができるおすすめの本やサイト紹介！

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

Block Reveal Effectsの使い方

1. ファイルを読み込む
2. HTMLを記述する
3. CSSを記述する
4. JavaScriptを記述する

まずはこれらの順に、簡単に使い方を解説します。

何を作るか、DEMO1をご覧ください。

Step1：ファイルを読み込む

HTML内で読み込む、ファイルをダウンロードします。

Codropsの「Download Source」から行います。

「BlockRevealers.zip」がダウンロードされたかと思います。このzipを解凍し、中身を確認してみましょう。

• BlockRevealers > js > anime.min.js
• BlockRevealers > js > main.js
• BlockRevealers > js > scrollMonitor.js

上の3つのファイルが、HTML内で読み込むファイルです。

<script src="js/anime.min.js" defer></script>
<script src="js/main.js" defer></script>
<script src="js/scrollMonitor.js" defer></script>

GitHubからのダウンロードも可能です。GitHubの場合、「BlockRevealers-master.zip」がダウンロードされますが、中身は同じです。

Step2：HTMLを記述する

<div id="sample">SAMPLE</div>

アニメーションさせたいHTML要素にidを指定します。

Step3：CSSを記述する

.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

これらのコードを自身のCSSファイルに記述します。この記述は必須なので、忘れないよう注意してください。

Step4：JavaScriptを記述する

$(function() {
  setTimeout(init, 10);
  function init() {
    var scrollElemToWatch_1 = document.getElementById('sample'),      //idを指定
         watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -300), //監視領域を設定
         rev1 = new RevealFx(scrollElemToWatch_1, {
          revealSettings : {
            //ボックスの設定
            bgcolor: '#０００',
            duration: 300,
            onStart: function(contentEl, revealerEl) {
              anime.remove(contentEl);
              contentEl.style.opacity = 0;
            },
            onCover: function(contentEl, revealerEl) {
              contentEl.style.opacity = 1;
              anime({
                //表示要素の設定 (Sample text箇所)
                targets: contentEl,
                easing: 'easeOutExpo',
              });
            }
          }
        })
    watcher_1.enterViewport(function() { //監視領域に入ったら実行
      rev1.reveal();                     //アニメーション実行
      watcher_1.destroy();               //一度のみ実行する場合記述
    });
  }
})();

このコードを自身の JavaScript ファイルに記述します。これで基本的なスクロールエフェクトの実装ができます。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

Block Reveal Effectsのオプションや機能を詳しく紹介

オプションなども紹介しながら、実際の使い方を紹介します。

オプション一覧

オプションを指定することで、より細かな設定を加えることが可能になります。ここでは、よく使用するオプションを紹介したいと思います。

💡 direction

directionには、4つの設定値が用意されています。値を変更することでアニメーション方向の指定が可能となります。

💡 easing

Block Reveal Effectsは、アニメーション関連の処理をJavaScriptライブラリであるanime.jsを利用しています。イージングの種類など詳しく知りたい方は、以下を参考にしてみてください！

複数箇所での使用

実際の制作では、1箇所のみで使用することは少なく、ページ内の複数箇所で使用します。ここでは複数箇所に使用する際のコードについて紹介します。

まずはDEMO2をご覧ください。

💡 HTML

<div class="contents">
  <div class="sample-img">
    <div id="sample2">
      <img src="img/sample1.jpg" alt="">
    </div>
  </div>
  <div class="text-area">
    <div id="sample3">
      <p class="sample-tit">SAMPLE TITLE</p>
      <p class="sample-txt">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
    </div>
  </div>
  <div class="link-area">
    <div id="sample4">
      <a href="#" class="sample-link">view more</a>
    </div>
  </div>
</div>

画像、テキスト群、リンクの3箇所で使用しています。

💡 CSS

.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

.contents .sample-img{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.contents .text-area{
  margin-bottom: 20px;
}

.sample-tit{
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

.sample-txt{
  text-align: center;
}

.sample-link{
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  padding: 8px 0;
}

@media screen and (min-width: 768px) {
  .contents .sample-img > div{
    width: 80%;
    display: inline-block;
  }

  .contents .text-area,
  .contents .link-area{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contents .text-area > div{
    width: 500px;
    display: inline-block;
  }

  .sample-tit{
    font-size: 38px;
  }

  .sample-txt{
    font-size: 18px;
  }

  .contents .link-area > div{
    display: inline-block;
  }

  .sample-link{
    width: 300px;
    margin: 0 auto;
  }
}

特別な記述はありません。通常通りレイアウトを組んで、アニメーションさせる要素にidを指定します。

💡 JavaScript

$(function() {
  setTimeout(init, 10);
  function init() {
    var scrollElemToWatch_2 = document.getElementById('sample2'),
    watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -300), // 監視領域を#sample2に設定
    rev2 = new RevealFx(scrollElemToWatch_2, {
      revealSettings : {
        bgcolor: '#7f40f1',
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
        }
      }
    }),
    rev3 = new RevealFx(document.querySelector('#sample3'), {
      revealSettings : {
        bgcolor: '#7f40f1',
        delay: 250,
        direction: 'rl',
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
        }
      }
    }),
    rev4 = new RevealFx(document.querySelector('#sample4'), {
      revealSettings : {
        bgcolor: '#7f40f1',
        delay: 500,
        direction: 'rl',
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
          anime({
            targets: contentEl,
            duration: 900,
            delay: 400,
            easing: 'easeOutExpo',
            scale: [0.8,1],
            opacity: [0,1],
          });
        }
      }
    });
    watcher_2.enterViewport(function() { // 監視領域に入ったタイミングでアニメーション実行
      rev2.reveal();
      rev3.reveal();
      rev4.reveal();
      watcher_2.destroy();
    });
  }
})();

この例では監視領域を#sample2一箇所に設定しているため、#sample2(画像)が「ウィンドウ下部から 300px」の位置にきたタイミングで、#sample3(テキスト群), #sample4(リンク)のアニメーションも同時実行されます。

• 1つ目は「ウィンドウ下部 100px」の位置で実行
• 2 つ目は「ウィンドウ下部 300px」の位置で実行

例えば上のような例では、各要素に個別に監視領域を設定します。監視領域の追加、変更を行なった際はscrollElemToWatchとwatcherの箇所の変更も必要です。

イベントを設定する

クリックなどのイベントと組み合わせて使用する方法を解説します。

DEMO3をご覧ください。

💡 HTML

<div class="contents">
  <p class="click">Click</p>
  <div class="event-bnt">
    <p id="sample5" class="event">event 1</p>
    <p id="sample6" class="event">event 2</p>
    <p id="sample7" class="event">event 3</p>
  </div>
  <div id="event-img" class="event-img">
    <img src="img/sample2.jpg" alt="">
  </div>
</div>

特別な記述はありません。

💡 CSS

.block-revealer__element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  pointer-events: none;
  opacity: 0;
}

.click{
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.click::after{
  content: '↓';
  display: block;
}

.event-bnt{
  margin-bottom: 30px;
}

.event{
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid #333;
  padding: 5px 0;
  margin-bottom: 5px;
}

.event:last-of-type{
  margin-bottom: 0px;
}

@media screen and (min-width: 768px) {
  .event-bnt{
    display: flex;
    justify-content: space-between;
  }

  .event{
    width: calc(100%/3.5);
    margin-bottom: 0;
  }
}

こちらも特別な記述はありません。通常通りレイアウトを組んで、アニメーションさせる要素にidを指定します。

💡 JavaScript

$(function() {
  setTimeout(init, 10);
  function init() {
    var rev5 = new RevealFx(document.querySelector('#event-img')),
        trigger_1 = document.getElementById('sample5'),
        trigger_2 = document.getElementById('sample6'),
        trigger_3 = document.getElementById('sample7');
    trigger_1.addEventListener('click', function() {
      rev5.reveal({
        bgcolor: '#7f40f1',
        easing: 'easeOutExpo',
        direction: 'bt',
        onStart: function(contentEl, revealerEl) {
          anime.remove(contentEl);
          contentEl.style.opacity = 0;
        },
        onCover: function(contentEl, revealerEl) {
          anime({
            targets: contentEl,
            duration: 800,
            delay: 100,
            easing: 'easeOutExpo',
            translateY: [40,0],
            opacity: [0,1],
          });
        }
      });
    });
    trigger_2.addEventListener('click', function() {
      rev5.reveal({
        bgcolor: '#7f40f1',
        duration: 300,
        direction: 'tb',
        onStart: function(contentEl, revealerEl) {
          anime.remove(contentEl);
          contentEl.style.opacity = 0;
        },
        onCover: function(contentEl, revealerEl) {
          anime({
            targets: contentEl,
            duration: 500,
            delay: 50,
            easing: 'easeOutBounce',
            translateY: [-30,0],
            opacity: {
              value: [0,1],
              duration: 300,
              easing: 'linear',
            }
          });
        }
      });
    });
    trigger_3.addEventListener('click', function() {
      rev5.reveal({
        bgcolor: '#7f40f1',
        duration: 400,
        easing: 'easeInOutQuad',
        onStart: function(contentEl, revealerEl) {
          anime.remove(contentEl);
          contentEl.style.opacity = 0;
        },
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
          anime({
            targets: contentEl,
            duration: 800,
            delay: 80,
            easing: 'easeOutExpo',
            scale: [0.5,1],
            opacity: [0,1],
          });
        }
      });
    });
  }
})();

これまでのコードに「addEventListener」を設定するだけです。

trigger_*.addEventListener('click', function() {

こちらが、「addEventListener」の設定箇所です。clickイベントの他にも様々なイベントに対応しているので、ぜひ試してみてください。

こんなことも出来ます！(サンプルデモ紹介)

ここまで基本的な実装方法について解説しましきましたが、より実用性のあるサンプルサイトを作成しました。

一例として参考にしてみてください。

まとめと参考記事

スクロールエフェクトを実装できるJavaScriptライブラリ、Block Reveal Effectsを紹介しました。

Block Reveal Effectsを使用することで、単調になりがちなサイトにアクセントを加えることができます。ただ、使いすぎには注意です。

Block Reveal Effects以外にも簡単に導入できるアニメーション系のライブラリを紹介しているので、そちらも参考にしてみてください。

【超簡単】JavaScriptライブラリaos.jsの使い方を解説！ masonry.jsの使い方を解説！Pinterest風グリッドレイアウトを簡単実装！ JavaScriptライブラリRellax.jsの使い方を解説！簡単にパララックスを実装しよう！

独学に限界を感じていませんか？