模写修行メディア

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

JavaScript

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

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

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

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

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

  • 実務のレベル感を知りたい
  • プロの制作フローを学びたい
  • 基礎学習中、もしくは終えたばかり
  • CSS設計やSCSSを使った書き方を学びたい
公式サイトを見る
コーディング教材の【模写修行】は他の教材と何が違うのか？

この記事の目次

Block Reveal Effectsの使い方

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

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

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

DEMO1

Step1：ファイルを読み込む

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

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

Codrops

「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」がダウンロードされますが、中身は同じです。

GitHub

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 ファイルに記述します。これで基本的なスクロールエフェクトの実装ができます。

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をご覧ください。

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をご覧ください。

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設計やSCSSを使った書き方を学びたい

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

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

【残り1人】メンターやってます！

👉まずは気軽に聞いてみる
【残り1人】メンターやってます 👉

この記事を書いた人

Tatsukiのアイコン

Tatsuki

空間コーディネーターから独学でプログラミングを学びwebの世界へ。とにかくコーディングが好き。普段は【HTML・CSS / JavaScript / React】を主に書いています。

\Share/

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

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

詳しくはこちら