模写修行メディア

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

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

この記事をシェア:

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

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

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

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

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: '#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

<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の使い方を解説!簡単にパララックスを実装しよう!

コーディングの練習が出来るサービス「模写修行」を作りました 🎉

模写修行のトップページのスクリーンショット

「模写修行」はこんな方におすすめ!

  • 基礎学習を終えて実践的な経験を積みたい
  • 破綻しない書き方を学びたい(= CSS設計を意識したコーディングを学びたい)
  • 実務と同じようにXDのデータを見ながらコーディングの練習をしたい
  • 現役で制作をやっている人のコードを見たい

基礎学習を終えた方が次にやるべきことは、実践に近い形でたくさん練習することです。そして、わからないことがあれば、その都合調べて理解する。この繰り返しでコーディングやプログラミングは上達します。

「模写修行」ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

この記事をシェア:

模写修行のトップページのスクリーンショット
模写修行

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