Webページ上で利用できる「フェードイン効果」についてご存知でしょうか。フェードインといえば、ファンタジー映画やサスペンス映画が連想されるかもしれませんが、Webページの全体やページ内の各要素を表示させる際、ふんわりとフェードインさせて表示するやり方を言います。
この「効果」を使用するにもいろいろな方法がありますが、今回は、JavaScriptとWeb Animation APIを使用することで、簡単に「フェードイン効果」を再現する方法をご紹介します。
注意すべき点
マークアップから始めなければなりません。もしもJavaScriptがなんらかの理由で実行に失敗したとしても、徐々に効果が構築されているため、ユーザーはまだテキストを読むことができます。これを実現するためには、統合されたblockquoteやq、あるいはciteタグを使用します。
<blockquote>
<q>What we think, we become.</q>
<cite>Gautama Buddha</cite>
</blockquote>
準備
基本的な植字を行うにはCSSを使用します。
blockquote {
font-size: 3rem;
}
cite {
display: block;
text-align: right;
font-family: Verdana, Arial, sans-serif;
margin-top: 1rem;
font-size: .9rem;
color: #aaa;
font-style: normal;
}
blockquote q {
font-family: Georgia, serif;
font-style: italic;
letter-spacing: .1rem;
}
CSSを使う利点の一つは、「q」要素の前後の引用をカスタマイズできるところです。これらを疑似要素としてレンダリングするということは、元のHTML文字列の一部としてカウントされないということを意味しています。
q {
quotes: ““” “”” “‘” “’”;
}
q:before {
content: open-quote;
margin-right: .8rem;
}
q:after {
content: close-quote;
}
q:before, q:after {
color: #ccc;
font-size: 4rem;
}
瞬時に取り入れたJavaScriptは、span要素で各々の言葉を取り囲みます。JavaScriptが作動する場合のみ、以下のCSSはそれらの要素に適用されます。JavaScriptが作動しなければ、HTMLはこれまでに書いたCSSの影響を受けるだけになります。
blockquote q span {
will-change: opacity, filter;
opacity: 0;
filter: blur(0px);
}
will-changeは、opacityやblur filterなどの特性を持つブラウザのレンダリングエンジンへの警告です。この警告によってアニメーションが準備・最適化されます。
実行
ページの下部に加えられるスクリプトは、三つの機能に分かれます。一つめが乱数生成器、二つめがquoteの内容を別々の言葉に分割し、その周りをspanタグで囲む機能、そして三つめがアニメーションです。ここでは二つめの機能を説明します。
function splitWords() {
let quote = document.querySelector(“blockquote q”),
quotewords = quote.innerText.split(” “),
wordCount = quotewords.length;
quote.innerHTML = “”;
for (let i=0; i < wordCount; i++) {
quote.innerHTML += “<span>”+quotewords[i]+”</span>”;
if (i < quotewords.length – 1) {
quote.innerHTML += ” “;
}
}
quotewords = document.querySelectorAll(“blockquote q span”);
fadeWords(quotewords);
}
スクリプトが少し変わっているのは、最後にquote内の単語数に対するテストがある部分です。つまり、最後の単語を取り除いた後に、quote内にある各々の再構成された単語がスペースを持っているということです。
多くの単語がfadeWords機能へ伝達され、以下のように使用されます。
function getRandom(min, max) {
return Math.random() * (max – min) + min;
}
fadeWords機能はそれ自体で機能します。
function fadeWords(quotewords) {
Array.prototype.forEach.call(quotewords, function(word) {
let animate = word.animate([{
opacity: 0,
filter: “blur(“+getRandom(2,5)+”px)”
}, {
opacity: 1,
filter: “blur(0px)”
}],
{
duration: 1000,
delay: getRandom(500,3300),
fill: “forwards”
}
)
})
}
それぞれのspan要素は、opacity: 0やランダムなblur、完全なopacity、blurがない状態からもたらされます。これらの要素のアニメーションは1秒間続きますが、それぞれにランダムな遅れがあり、それによってアニメーションの開始時間がずれます。
スクリプトの最後にsplitWordsを呼び出すことで全てが始まります。
splitWords();
それぞれの単語に徐々に遅れを加えていけば、順番にフェードイン効果を与えることもできますし、特定の単語の周囲に異なる等級のspan要素を加えることでもフェードインを行うことができます。
……いかがでしたでしょうか。フェードイン効果を取り入れることでWebページのニュアンスを豊かにすれば、サイト全体の印象もまた変わってくるはずです。ぜひ参考にしてみてください。
（※本記事はCreate a Word Fade-In Effect Using the Web Animation APIを翻訳・再構成したものです。）
おすすめ新着記事
おすすめタグ