色付きのブロックが左から右に移動した後、文字が見えるやつ『Block Reveal』

URLをコピーしました！

非表示にしている要素を、スクロールした時に左右から色付きのブロックがスライドして、画像や文字を表示させるアニメーション。

割と使われているアニメーションなのに、いつも名前を忘れてしまって困るのでメモ。

指示される時も「色付きのベタが左から右に移動して、その後出てくるやつ」とか言われたりします。

あのアニメーションは『Block Reveal Effect』というそうです。

名前だけでも覚えて帰ってね。

プラグインを使わず実装

Tarokenlog

【簡単実装】Block Reveal EffectsをJavaScriptをCSSで作る【コピペでOK】 | Tarokenlog

プラグインを使用して実装

模写修行

Block Reveal Effectsの使い方を紹介！2段階アニメーションを実装しよう！ | 模写修行メディア簡単におしゃれな2段階アニメーションが実装できる、JavaScriptライブラリ、Block Reveal Effectsを紹介します。

idol-plus

【JavaScript】Block Reveal Effectsで2段階アニメーションを簡単に実装！｜idol-plus スクロールに応じて、2段階アニメーションエフェクトが実装できる「Block Reveal Effects」。サイトによ| アイドルとデザイン | 日々アイドルのすばらしさを広げる活動を…

実際に書いたコード

<div id="block-reveal01">
      <p>サンプル</p>
</div>

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

// Block Reveal
    setTimeout(init, 10);
    function init() {
        var scrollElemToWatch_1 = document.getElementById('block-reveal01'), //アニメーションの対象となるidを指定
            watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -300), //監視領域を設定
            rev1 = new RevealFx(scrollElemToWatch_1, {
                revealSettings : {
                    //ボックスの設定
                    bgcolor: '#7e7e7e',
                    duration: 1000,
                    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(); //一度のみ実行する場合記述
        });
    }

よかったらシェアしてね！