LPのような各ブロックで訴求や内容を変える場合、邪魔にならない程度のアニメーションをつけることで、ユーザーの視線誘導が可能です。
この記事では、ヒーローエリア以降にある各セクションのタイトルを「少し目立たせたい場合」に使えそうなスニペットを紹介しています。
セクション毎のタイトルを目立たせたい時に使えそうな装飾です。
.split()
JavaScriptの .split() は、 指定した区切り文字列で分割することにより、文字列の配列に分割するメソッドです。
var str = '文字列';
str.split(区切り文字・正規表現, 分割数);この記事では、.split() メソッドを使って指定した文字列を一文字づつに分割して、ゆっくり浮き出るようなアニメーションをかけています。
文字が1文字づつゆっくり浮き出るサンプル
早速サンプルです。スクロールして、ウインドウ内に「ゆっくり浮き出るテキスト」が表示されると、徐々に左から表示されます。
一回表示された後、もう一回浮き出るアニメーションを見たい場合には、下にスクロールしてこのテキストのブロックまで戻ってみてください。また徐々に浮き出るアニメーションで表示されます。
ジャンプ率（本文と、見出しの文字サイズの比率差）が高めの部分に使うといい感じです。
実装の手順と方法
コードの解説の前に、実装の手順と方法について解説します。
はじめに、設置したい場所にHTMLを記述します。
<p id="text" class="animation"></p>次に、JavaScriptのコードをページに記述します。
コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。
// テキストを分割
const targetId = document.getElementById('text');
const text = 'ゆっくり浮き出るテキスト';
const dataArray = text.split('').slice(0);
const html = dataArray.map((word, index) => {
return `<span style="animation-duration: ${(index + 1) * 400}ms;">${word}</span>`;
});
html.forEach((element, index) => {
targetId.insertAdjacentHTML('beforeend', element);
});
// スクロールイン
const fadeIn = function(){
const target = document.getElementsByClassName('animation');
const position = Math.floor(window.innerHeight * .75);
for (let i = 0; i < target.length; i++) {
let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);
if (offsetTop < position) {
target[i].classList.add('played');
}
if(offsetBottom < 0){
target[i].classList.remove('played');
}
}
}
window.addEventListener('scroll', fadeIn, false);最後に、CSSを記述します。
p#text {
text-align: center;
font-size: 1.8rem;
margin: 0;
letter-spacing: 0.1rem;
font-weight: 500;
}
.animation.played span {
animation-name: fadeInTop;
}
@keyframes fadeInTop {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
}
}これで完成です。
ざっくりとしたコードの解説
コードは、HTML・JavaScript・CSSの3種です。順に解説していきます。
HTML
HTMLは、後述のJavaScriptで指定した文字列を挿入する要素の記述だけです。
<p id="text" class="animation"></p>id名が文字列を挿入する場所になるので、HTMLのid名を変更する場合はJavaScriptの冒頭にある .getElementById の中のid名も、その名前と同じにしましょう。
javaScript
JajaScriptは、大きく分けて「テキストの分割」と「スクロールイン時の動き」の2種類です。
// テキストを分割
const targetId = document.getElementById('text');
const text = 'ゆっくり浮き出るテキスト';
const dataArray = text.split('').slice(0);
const html = dataArray.map((word, index) => {
return `<span style="animation-duration: ${(index + 1) * 400}ms;">${word}</span>`;
});
html.forEach((element, index) => {
targetId.insertAdjacentHTML('beforeend', element);
});
// スクロールイン
const fadeIn = function(){
const target = document.getElementsByClassName('animation');
const position = Math.floor(window.innerHeight * .75);
for (let i = 0; i < target.length; i++) {
let offsetTop = Math.floor(target[i].getBoundingClientRect().top);
let offsetBottom = Math.floor(target[i].getBoundingClientRect().bottom);
if (offsetTop < position) {
target[i].classList.add('played');
}
if(offsetBottom < 0){
target[i].classList.remove('played');
}
}
}
window.addEventListener('scroll', fadeIn, false);dataArray.map((word, index) のアロー関数の中にある return の中が、分割したテキストの1文字1文字に style="animation-duration: でプロパティを直接出力します。
スクロールインでは add と remove のclassの付け替えをするメソッドで、テキストの表示方法を変えます。
CSS
CSSは文字の装飾がメインで、コード量も少なめです。
p#text {
text-align: center;
font-size: 1.8rem;
margin: 0;
letter-spacing: 0.1rem;
font-weight: 500;
}
.animation.played span {
animation-name: fadeInTop;
}
@keyframes fadeInTop {
0% {
opacity: 0;
transform: translateY(-30px);
}
100% {
opacity: 1;
}
}徐々に浮き出るアニメーションは opacity のプロパティで表現します。
さいごに
いかがでしたでしょうか？
このように、テキストを分割できればその後のスクロールトリガーのアニメーションはclass名の付け替えだけなので、比較的簡単だったと思います。
スクロールインした時をトリガーにする方法を覚えておくと、このような文字の装飾だけでなく、要素の動きも色々できるので、この記事のスニペットを応用させて自分好みのアニメーションも作ってみるようにしましょう。
