JavaScriptとCSSで作成するテキストアニメーション
Index
― 目次 ―タイピングアニメーションの作成
― アニメーションのサンプル ―
Concept
― 理念 ―
Keep your passion for creation alive.
― 創作に対する情熱を持ち続けよう ―
「タイピングアニメーション」のHTMLとJavaScriptについては、以下のソースをご参照ください。
※「アニメーションを再生する」ボタンを押すと、タイピングアニメーションの動作を確認することができます。
|
1 2 3 4 5 6 7 |
<!-- jQuery CDNの最新コード --> <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <!-- 段落ごとにidを指定 --> <p id="a1">Concept</p> <p id="a2">― 理念 ―</p> <p id="a3">Keep your passion for creation alive.</p> <p id="a4">― 創作に対する情熱を持ち続けよう ―</p> |
[補足]
2行目が「jQuery CDNの最新コード」。
jQueryを使っていますので「jQuery CDN」から最新版(※現時点での最新版は3.7.1)のコードをコピーして貼り付けます。
4～7行目が「段落ごとにidを指定(※JavaScriptのソース説明を参照)」。
2行目が「jQuery CDNの最新コード」。
jQueryを使っていますので「jQuery CDN」から最新版(※現時点での最新版は3.7.1)のコードをコピーして貼り付けます。
4～7行目が「段落ごとにidを指定(※JavaScriptのソース説明を参照)」。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// タイピングアニメーションの設定 var id = ['a1','a2','a3','a4']; // 指定したidを配列で渡す var tx = []; var txCount = []; var txSp = 100; // アニメーションテキストの表示速度：100=0.1秒 var dly = 300; // 次のテキストまでの表示時間：300=0.3秒 var count = 0; window.onload = function(){ displaynone(); countSet(); onecharacter() } // 文字数カウントの設定 function countSet(){ for(n=0;n<id.length;n++){ txCount[n] = 0; } } // 要素を取得して非表示 function displaynone(){ for(i=0;i<id.length;i++){ id[i] = document.getElementById(id[i]); tx[i] = id[i].firstChild.nodeValue; id[i].innerHTML = ''; } } // 1文字ずつ表示 function onecharacter(){ id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); if(tx[count].length != txCount[count]){ setTimeout("onecharacter()",txSp); }else{ id[count].innerHTML = tx[count].substr( 0, ++txCount[count] ); count++; if(count != id.length){ // idが最後なら(a4なら)終了 setTimeout("onecharacter()",dly); // } } } |
[補足]
2行目が「idを指定して配列で渡す(※HTMLで指定したidを記述します)」。
5行目が「アニメーションテキストの表示速度(※100で0.1秒になります)」。
6行目が「次のテキスト(段落)までの表示時間」。
2行目が「idを指定して配列で渡す(※HTMLで指定したidを記述します)」。
5行目が「アニメーションテキストの表示速度(※100で0.1秒になります)」。
6行目が「次のテキスト(段落)までの表示時間」。
ボトムトゥトップアニメーションの作成
― アニメーションのサンプル ―
h-ash design works
「ボトムトゥトップアニメーション」のHTMLとCSSとJavaScriptについては、以下のソースをご参照ください。
※「アニメーションを再生する」ボタンを押すと、ボトムトゥトップアニメーションの動作を確認することができます。
|
1 2 3 |
<div class="bottom-to-top"> <div class="bottom-to-top-animation">h-ash design works</div> </div> |
[補足]
2行目のクラス(.bottom-to-top-animation)には「アニメーションさせたい文字列」を入力します(※「＆nbsp;」はスペース)。
2行目のクラス(.bottom-to-top-animation)には「アニメーションさせたい文字列」を入力します(※「＆nbsp;」はスペース)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* ボトムトゥトップアニメーションの表示領域 */ .bottom-to-top { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* フォント指定 */ .bottom-to-top-animation { font-size: 30px; font-family: "NotoSans-R","Hiragino Sans","Meiryo",sans-serif; font-weight: 700; line-height: 1.4em; } /* アニメーションの表示設定 */ @keyframes showTextFromBottom { 0% { transform: translateY( 100% ); } 100% { transform: translateY( 0px ); } } .bottom-to-top-animation span { animation: showText 3s backwards; display: inline-block; } .bottom-to-top-animation > span { overflow: hidden; } .bottom-to-top-animation > span > span{ animation: showTextFromBottom 0.5s backwards; } |
[補足]
2～9行目が「アニメーションの表示領域」。
自由な配置がし易いようにflex要素を指定しています。
12～17行目が「フォントの指定」。
※「NotoSans-R」は、Google Fontsです。
20～37行目が「アニメーションの表示設定」。
数値箇所を変え調整してみてください。
2～9行目が「アニメーションの表示領域」。
自由な配置がし易いようにflex要素を指定しています。
12～17行目が「フォントの指定」。
※「NotoSans-R」は、Google Fontsです。
20～37行目が「アニメーションの表示設定」。
数値箇所を変え調整してみてください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ボトムトゥトップアニメーションの設定 const animationTargetElements = document.querySelectorAll(".bottom-to-top-animation"); for( let i =0; i < animationTargetElements.length; i++ ){ const targetElement = animationTargetElements[i] texts = targetElement.textContent; textsArray = []; targetElement.textContent = ""; for(let j =0; j < texts.split("").length; j++){ textsArray.push('<span><span style="animation-delay: '+ ((j+1) * 0.1) +'s" >' + texts.split("")[j] + '<span></span>') // 表示速度の設定 } for(let k =0; k < textsArray.length; k++){ targetElement.innerHTML += textsArray[k]; } } |
[補足]
9行目が「表示速度の設定」。
「((j+1) * 0.1)」の数値を大きくすると表示速度が遅くなります。
9行目が「表示速度の設定」。
「((j+1) * 0.1)」の数値を大きくすると表示速度が遅くなります。
スライドアニメーションの作成
― アニメーションのサンプル ―
「スライドアニメーション」のHTMLとCSSについては、以下のソースをご参照ください。
※「アニメーションを再生する」ボタンを押すと、スライドアニメーションの動作を確認することができます。
|
1 2 3 4 5 6 7 |
<div class="slide"> <div class="slide-animation slide-animation-txt"> <span>h</span><span>-</span><span>a</span><span>s</span><span>h</span> <span>d</span><span>e</span><span>s</span><span>i</span><span>g</span><span>n</span> <span>w</span><span>o</span><span>r</span><span>k</span><span>s</span> </div> </div> |
[補足]
3～5行目で「アニメーションさせたい文字列を1文字ずつspanタグで囲み(※「＆nbsp;」はスペース、spanタグでは囲みません)」、この時にspanタグで囲んだ文字数を数えておいてください(※今回の場合16文字、CSSの「アニメーションの表示設定」で必要になります)。
3～5行目で「アニメーションさせたい文字列を1文字ずつspanタグで囲み(※「＆nbsp;」はスペース、spanタグでは囲みません)」、この時にspanタグで囲んだ文字数を数えておいてください(※今回の場合16文字、CSSの「アニメーションの表示設定」で必要になります)。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
/* スライドアニメーションの表示領域 */ .slide { width: 100%; height: auto; display: flex; justify-content: center; align-items: center; } /* フォント指定 */ .slide-animation { font-size: 30px; font-family: "NotoSans-R","Hiragino Sans","Meiryo",sans-serif; font-weight: 700; } /* アニメーションの表示設定 */ .slide-animation span { display: inline-block; } .slide-animation span:nth-of-type(2) { animation-delay: .05s; } .slide-animation span:nth-of-type(3) { animation-delay: .1s; } .slide-animation span:nth-of-type(4) { animation-delay: .15s; } .slide-animation span:nth-of-type(5) { animation-delay: .2s; } .slide-animation span:nth-of-type(6) { animation-delay: .25s; } .slide-animation span:nth-of-type(7) { animation-delay: .3s; } .slide-animation span:nth-of-type(8) { animation-delay: .35s; } .slide-animation span:nth-of-type(9) { animation-delay: .4s; } .slide-animation span:nth-of-type(10) { animation-delay: .45s; } .slide-animation span:nth-of-type(11) { animation-delay: .5s; } .slide-animation span:nth-of-type(12) { animation-delay: .55s; } .slide-animation span:nth-of-type(13) { animation-delay: .6s; } .slide-animation span:nth-of-type(14) { animation-delay: .65s; } .slide-animation span:nth-of-type(15) { animation-delay: .7s; } .slide-animation span:nth-of-type(16) { animation-delay: .75s; } .slide-animation-txt span { opacity: 0; transform: translate(-150px, 0) scale(.3); animation: leftRight .5s forwards; } @keyframes leftRight { 40% { transform: translate(50px, 0) scale(.8); opacity: 1; color: #fff; } 60% { color: #fff; } 80% { transform: translate(0) scale(3); opacity: 0; } 100% { transform: translate(0) scale(1); opacity: 1; } } |
[補足]
21～65行目が「アニメーションの表示速度設定」。
2文字目以降の表示速度を「.05s(0.05秒)ずらして設定」しています。
HTMLの箇所でも説明しましたが、16文字ですので、2文字目以降の表示速度を「nth-of-type()」で指定しています。
21～65行目が「アニメーションの表示速度設定」。
2文字目以降の表示速度を「.05s(0.05秒)ずらして設定」しています。
HTMLの箇所でも説明しましたが、16文字ですので、2文字目以降の表示速度を「nth-of-type()」で指定しています。
今回は「JavaScriptとCSSで作成するテキストアニメーション」についてご紹介しました。
テキストアニメーションの参考になりましたら幸いです。
関連キーワード
動画の上に表示させるキャッチコピー、注目してもらいたい見出し文、特に読んでもらいたいリード文など。
今回の記事は、JavaScriptとCSSで実装できるテキストアニメーションについてご紹介します。