サイトを単調なものにせず、飽きさせないコンテンツにするにはどうするか。webの仕事をしてる人であれば、考えたことがあるかと思います。
方法の一つとして、スクロールエフェクトの導入があります。
また、クライアントワークではクライアントから「アニメーションを入れたい!」と要望をもらうこともあります。
今回は、そんなスクロールエフェクトを簡単に実装できるJavaScript ライブラリ、Block Reveal Effectsを紹介します。
💡 コーディングの練習なら模写修行!
この記事の目次
Block Reveal Effectsの使い方
- ファイルを読み込む
- HTMLを記述する
- CSSを記述する
- 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設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?嬉しい声もいただいています!
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet