🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

JavaScript

【Block Reveal Effects】2段階でアニメーションが実装できるJavaScriptプラグインの使い方を解説

Author:Jyu

この記事の目次

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

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

また、クライアントワークではクライアントからスクロールエフェクトの要望もたまにあります。

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

Block Reveal Effectsの使い方

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

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

どんなものを作るか、DEMO1をご覧ください。

プラグインファイルを読み込む

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

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

Codrops

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

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

こちらの3つのファイルが、HTML内で読み込むファイルとなります。

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

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

GitHub

HTMLを記述する

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

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

CSSを記述する

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

これらのコードを自身のCSSファイルに記述します。

アニメーション時のブロック箇所のデフォルト設定になります。これらの記述は必須なので、忘れないよう注意してください。

JavaScriptを記述する

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: '#000',
            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ファイルに記述します。

これだけで基本的なスクロールエフェクトの実装ができます。

Block Reveal Effectsのオプションや機能を詳しく見てみよう!

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

オプション一覧

オプション名 オプション内容
bgcolor ボックス背景色
delay 遅延実行
duration アニメーション速度
direction アニメーション方向
easing イージング

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


direction

direction設定値 direction内容
lr 左から右 (デフォルト)
rl 右から左
tb 上から下
bt 下から上

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


easing

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

複数箇所での使用

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

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


HTML

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

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

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

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

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

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」を設定するだけです。

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

こちらが、「addEventListener」の設定箇所となります。

clickイベントの他にも様々なイベントに対応しているので、ぜひ試してみてください。

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

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

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

まとめ

今回は簡単にスクロールエフェクトを実装できるJavaScriptプラグイン、Block Reveal Effectsを紹介しました。

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

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

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.