アニメーションエフェクト「Block Reveal Effects」

最近よく見かけるサイトで、いいなと思った要素の動き方があったので調べてみました。

今回、紹介するWebアニメーションは「Block Reveal Effects」です。
どんなものかというと、

非表示にしている要素を、スクロール時に左右から表示させる仕組みになります。

Block Reveal Effectsをダウンロード

https://tympanus.net/codrops/2016/12/21/block-reveal-effects/
codropsページに「Download source」ボタンがありますので、データをダウンロードできます。ダウンロードしたデータの中から今回使用するのは下記になります。

index.html
js
・anime.min.js
・main.js
・scrollMonitor.js

Block Reveal Effectsのセットアップ方法

プラグインの設置

まず、「anime.min.js」「main.js」「scrollMonitor.js」をサイトの下部に設置します。

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

ソース上の設定

次に、HTMLのソース上で、アニメーションさせたい要素にid=”title01”を追加します。

<main>
    <h2 id=”title01”>BOARD</h2>
</main>

<main>

<h2 id=”title01”>BOARD</h2>

</main>

jsの設定

上の画像のように左からアニメーションさせてみます。

(function() {
setTimeout(title01, 10);
    function title01() {
        var scrollElemToWatch_1 = document.getElementById('title01'),
            watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -100),                
            rev1 = new RevealFx(scrollElemToWatch_1, {
                revealSettings : {
                    bgcolor: '#000000',
                    duration: 300,
                    onStart: function(contentEl, revealerEl) { 
                        anime.remove(contentEl);
                        contentEl.style.opacity = 0; 
                    },
                    onCover: function(contentEl, revealerEl) { 
                        contentEl.style.opacity = 1;
                        anime({
                            targets: contentEl,
                            duration: 100,
                            delay: 10,
                            easing: 'easeOutExpo',
                            opacity: [0,1]
                        });
                    }
                }
            })
        watcher_1.enterViewport(function() {
            rev1.reveal();
            watcher_1.destroy();
        });
    }
})();

(function() {

setTimeout(title01, 10);

function title01() {

var scrollElemToWatch_1 = document.getElementById('title01'),

watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -100),

rev1 = new RevealFx(scrollElemToWatch_1, {

revealSettings : {

bgcolor: '#000000',

duration: 300,

onStart: function(contentEl, revealerEl) {

anime.remove(contentEl);

contentEl.style.opacity = 0;

onCover: function(contentEl, revealerEl) {

contentEl.style.opacity = 1;

anime({

targets: contentEl,

duration: 100,

delay: 10,

easing: 'easeOutExpo',

opacity: [0,1]

});

}

})

watcher_1.enterViewport(function() {

rev1.reveal();

watcher_1.destroy();

});

}

})();

ソース上で追加したid名を上記のtitle01部分に入力します。
その後でアニメーション時の背景色と速度を設定します。
・bgcolorの箇所で背景色
・durationの箇所で速度
これで、jsの設定は完了です。

ちなみに、アニメーション箇所を追加する場合は、
上部のコードを複製し、「scrollElemToWatch_1」「title01」「watcher_1」「rev1」の部分の数字を2や3と変更します。

また、右からアニメーションさせるときは、revealSettings内に「direction: ‘rl’,」を追加するだけです。

cssの設定

cssの設定もすごく簡単です。
下記のコードを追加するだけ。

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

.block-revealer__element {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #000;

pointer-events: none;

opacity: 0;

}

これで全ての設定が完了です！

当サイトのトップページにも実装してますのでご確認ください。
https://idd.tokyo/

対応ブラウザ

IE10〜
Safari ver.11.0
Chrome ver.61.0
Firefox ver.56.0
では、ちゃんと動作確認できました。

DETAIL NOTE