最近、よく見かけるスクロールすると文字とかの背景が横からブワッと出てきて、そのままブワッと消えて文字が現れるみたいなエフェクト。
例えばこういうのです。
https://tympanus.net/Development/BlockRevealers/
シンプルなレイアウトでも動きをつけることで単調にならないってメリットもあり、こういうエフェクトは重宝します。
実装する場合、いくつか方法はあるのですが今回は二つほど紹介します。
CONTENTS
プラグイン「Block Reveal Effects」を使う方法
先ほどリンクを貼った「Block Reveal Effects」はcodropsで公開されています。
まずは以下のページの「Download source」から一式ダウンロード可能です。
https://tympanus.net/codrops/2016/12/21/block-reveal-effects/
必要なファイルを読み込む
ダウンロードしたファイルの中から以下の3つを読み込みます。
<script src="js/anime.min.js"></script>
<script src="js/scrollMonitor.js"></script>
<script src="js/main.js"></script>使いやすいように加工
上記ページと同じようなレイアウトであればいいんですが、そうではない場合は使いやすいように加工する必要があります。
ポイントはhtmlでは以下のようにエフェクトをかけたい要素内にspanタグを設置してIDを付与。
<h2><span id="effect_01">left to right</span></h2>cssでは最低限以下の記述をしてあとはお好みで。
.block-revealer__element {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
pointer-events: none;
opacity: 0;
}jsでは付与したIDごとに設定が必要ですが、最低限このあたりは必要かと。
(function() {
setTimeout(init, 10);
function init() {
var scrollElemToWatch_1 = document.getElementById('effect_01'),
watcher_1 = scrollMonitor.create(scrollElemToWatch_1, -10),
rev1 = new RevealFx(scrollElemToWatch_1, {
revealSettings : {
bgcolor: '#182524',
duration: 300,
onStart: function(contentEl, revealerEl) {
anime.remove(contentEl);
contentEl.style.opacity = 0;
},
onCover: function(contentEl, revealerEl) {
contentEl.style.opacity = 1;
anime({
targets: contentEl,
easing: 'easeOutExpo'
});
}
}
})
watcher_1.enterViewport(function() {
rev1.reveal();
watcher_1.destroy();
});
}
})();出来上がったサンプル
使いやすいように整理しつつ、エフェクト調整を行ったのがこちら。
See the Pen 2steps-scroll_02 by OKD (@OKD) on CodePen.
delay: 250, //動作を遅らせる時間
duration: 500, //エフェクトの速度
direction: 'bt', //下から上へなどの挙動
bgcolor: '#fcf652', //背景色など複数の項目が調整出来るので、細かくカスタムが可能です。
ただ、ID毎に動作設定をするって結構面倒ですね。
そんな方には次の方法がオススメです。
jQueryを使ってプラグイン無しで実装
.when() と .done()
今回やりたいことは簡単に言うと、①背景が現れる、②背景が消える、という２段階の動き。
jQueryには.when()、.done()という順番に実行が出来るちょうど良さそうな機能があります。
See the Pen 2steps-sample by OKD (@OKD) on CodePen.
こんな感じで四角をクリックすると右に、その後下に四角が移動します。
一見、今回実装したいものと関係がなさそうですが、いくつかの処理を追加することでより実戦で使えるようになります。
出来上がったサンプル
スクロール位置を取得、queue()を使った遅延処理、そしてcssを組み合わせることでこのようなエフェクトが出来上がります。
See the Pen 2steps-scroll by OKD (@OKD) on CodePen.
ざっくり解説するとこんな感じです。
var EffectH = 100;
$(window).on('scroll load', function() {
var scTop = $(this).scrollTop();
var scBottom = scTop + $(this).height();
var effectPos = scBottom - EffectH;
$('.js-scroll').each( function() {
var thisPos = $(this).offset().top;
if ( thisPos < effectPos ) {
// .js-scrollという要素が可視範囲に入ったら
$.when(
// .js-scrollにshowというclassを付与
$(this).addClass("show")
).done(function() {
// その後、0.5秒遅らせて.js-scrollにdoneというclassを付与
$(this).delay(500).queue(function(){
$(this).addClass("done")
})
});
}
});
});いくつかのコードを組み合わせて工夫することでプラグインを使わずとも実装が可能です。
プラグインもいいですが、自作してみるといい勉強になりますし、何より楽しいですね。
