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

2019-06-19
Writing by Jyu

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

 

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

スクロールと連動して要素を表示させることで、「能動的」にスクロールさせることが可能になります。また、スクロールエフェクトはクライアントからの要望も多く、需要も高いです。

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

TOPICS

Block Reveal Effectsって?

Block Reveal Effectsとは、簡単にスクロールエフェクトを実装できるJavaScriptプラグインです。

 

こちらの「Block Reveal Effects 公式サイト」にて、ご確認ください。

最近見られるようになった、スクロールに応じて、 要素を2段階表示するアニメーションです。

なかなかインパクトがありますよね。

一から実装すると大変だったりもしますが、Block Reveal Effectsを使用することで比較的簡単に実装できます。

Block Reveal Effectsの使い方

以下、基本的な使い方となります。

  1. JavaScriptファイルをHTML内で読み込む
  2. アニメーションさせたいHTML要素に「id」を指定する
  3. CSSを記述する
  4. JavaScriptを記述する

 

コピペOKですので、JavaScriptが苦手な方も安心してくださいね!

JavaScriptファイルをHTML内で読み込む

まず初めに、HTML内で読み込むJavaScript をダウンロードします。

ダウンロードは、Codropsの「Download Source」から行います。

実行後、「BlockRevealers.zip」がダウンロードされたかと思います。

 

BlockRevealers.zipは、以下の構成となっています。

rellax-master directory

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

上記3ファイルが、HTML内で読み込むファイルとなります。

ご自身の環境に合わせパスを変更し、bodyの閉じタグ直前にて読み込み、終了となります。

 

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

 

また、「GitHub」からのダウンロードも可能となっております。

GitHubの場合、「BlockRevealers-master.zip」がダウンロードされますが、中身は同じですので、ご自身のやりやすい方から実行してください!

アニメーションさせたいHTML要素に「id」を指定する

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

 

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

CSSを記述する

以下のコードを自身のCSSファイルに記述します。

アニメーション時のブロックのデフォルト設定のようなもので、こちら必須となります。

 

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

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(); 一度のみ実行する場合記述
    });
  }
})();

 

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

 

オプションやカスタムについては、次項で解説していきたいと思います!

実際にBlock Reveal Effectsを使ってみる

それでは実際に使ってみましょう。

オプション一覧

オプションを指定することで、より細かな設定を加えることが可能になります。

ここでは、よく使用するオプションを紹介したいと思います。

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

 

direction

directionには、4つの設定値が用意されています。

値を変更することでアニメーション方向の指定が可能となります。

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

 

easing

イージングの動作については、以下のサイトを参考にしてみてください。

複数箇所での使用

実際の制作では、単体で使用することはなく、ページ内の複数箇所にて使用することがほとんどです。その際、「Block Reveal Effectsの使い方」 箇所のコードを複製してもいいのですが、そうするとコードが長くなってしまうので、ここでは複数箇所に使用する際のコードについて解説していきたいと思います。

 

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

 

<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>

 

.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;
  }
}

 

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

 

(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」の位置で実行したいといった場合が出てきます。その際は、各要素に個別に監視領域を設定します。

 

監視領域の設定箇所

var scrollElemToWatch_2 = document.getElementById('sample2'),
watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -100),

 

監視領域の追加、変更を行なった際は「 scrollElemToWatch_* , watcher_* 」こちらの箇所の変更もお忘れなく!以下、#sample2を「ウィンドウ下部100px」、#sample3を「ウィンドウ下部300px」の位置で実行するコードとなります。

 

(function() {
  setTimeout(init, 10);
  function init() {
    var scrollElemToWatch_2 = document.getElementById('sample2'),
    watcher_2 = scrollMonitor.create(scrollElemToWatch_2, -100),
    rev2 = new RevealFx(scrollElemToWatch_2, {
      revealSettings : {
        bgcolor: '#7f40f1',
        onCover: function(contentEl, revealerEl) {
          contentEl.style.opacity = 1;
        }
      }
    }),
    scrollElemToWatch_3 = document.getElementById('sample3'),
    watcher_3 = scrollMonitor.create(scrollElemToWatch_3, -300),
    rev3 = new RevealFx(scrollElemToWatch_3, {
      revealSettings : {
        bgcolor: '#7f40f1',
          delay: 250,
          direction: 'rl',
          onCover: function(contentEl, revealerEl) {
            contentEl.style.opacity = 1;
          }
        }
      });
    watcher_2.enterViewport(function() {
      rev2.reveal();
      watcher_2.destroy();
    });
    watcher_3.enterViewport(function() {
      rev3.reveal();
      watcher_3.destroy();
    });
  }
})();

イベントを設定する

ここでは、イベントと組み合わせて使用する方法を解説します。

 

<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>

 

.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;
  }
}

 

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

 

(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() {

 

clickイベントの他にも様々なイベントに対応しておりますので、ご自身で試してみてください!

デモ

ここまで基本的な実装方法について解説しましきましたが、こちらではより実用性のあるデモを作成しております。ハンバーガーメニューや検索アイコン、コンタクト箇所のアニメーションは実装する機会が比較的多いです。

まとめ

今回は簡単にスクロールエフェクトを実装できるJavaScriptプラグイン、Block Reveal Effectsを紹介しました。Block Reveal Effectsを使用することで、単調になりがちなサイトにアクセントを加えることができますので、ぜひ使ってみてください。

 

また、以下の記事でも、「離脱者を防ぐためには、しっかりと閲覧してもらうには…」といったところに触れておりますので、ご自身のサイトに合うものがあれば、導入を検討してみてはいかがでしょうか。

参考URL

-公式サイト
https://tympanus.net/Development/BlockRevealers/

-Git hub
https://github.com/codrops/BlockRevealers/