JavaScriptとCSSで手軽にテキストを1文字ずつ動かすシンプルなアニメーションを実装する
最終更新日: Update!!
最近ではウェブサイトにアニメーションが用いられることが多くなってきており、様々なアニメーション表現が見られるようになりました。今回はJavaScriptとCSSを使って、テキストを1文字ずつ動かすアニメーションを実装してみたいと思います。
ここでは基本的なアニメーション部分はCSSで、テキストを1文字ずつ分割するところをJavaScriptで作成していきますが、今回は1文字ずつ動かす必要があるので、transitionの値を文字ごとに変える必要があるのがポイントです。
それではまずはHTMLを見ていきます。今回はJavaScript側で対象となる文字列を保持しておくので、要素自体は空にしておきます。適宜id属性とclass属性をあてておきます。
【HTML】※一部抜粋
今回はJavaScriptとCSSを使ってテキストを1文字ずつ動かすアニメーションを作成してみました。文字数が少ない場合にはHTMLでハードコーディングしても実現できるのですが、文字数が多くなってくるとこのようにJavaScriptで動的に用意してあげる方がいいですね。配列操作次第で文字の並び替えや、アニメーションの方向なども調整できますので是非試してみてはいかがでしょうか。
<h1 id="text" class="animation"></h1>続いてCSSです、先ほどのHTMLの中に1文字づつ分割したテキストの文字がspan要素として格納されるので、そのspan要素に対してアニメーション効果を設定していきます。今回はフェードインで動きをつけたアニメーションにしていますが、CSSでいろんなバリエーションができますね。 【Sass(SASS)】
.animation span transition-property: transform, opacity transition-duration: 0.4s transition-timing-function: ease transform: translate(-10px, -10px) opacity: 0 &.played span opacity: 1 transform: translate(0, 0)アニメーション実行時にはclassが付与されるので、アニメーション前の初期スタイルと、アニメーション時のスタイルを用意しておきます。続いてJavaScriptでテキストを分割しアニメーションの準備をしていきます。まずは対象となるテキストを変数に入れておきます。そして、「spilit()」と「slice()」メソッドで1文字単位で値を作成して配列型に変換していきます。 【JavaScript】
const target = document.getElementById('text'); const text = 'HelloWorld!!'; const dataArray = text.split('').slice(0); const html = dataArray.map((word, index) => { return `<span style="transition-delay: ${(index + 1) * 100}ms;">${word}</span>`; }); html.forEach((element, index) => { target.insertAdjacentHTML('afterbegin', element); }); target.classList.add('played');文字単位で配列の値に格納できたら、「map()」メソッドで1文字ずつspan要素で囲んでいきます。この時に、インデックスの値を取得してその値を使って、transition-delayを設定することで、時間差を作ることができ1文字ずつのアニメーションが可能になります。そして最後に元々のHTMLで用意した要素に格納していきます。 実際にこのJavaScriptを実行すると下記のようなHTMLが動的に作成されます。transition-delayが要素単位で個別に設定されているのが確認できます。
<h1 id="text" class="animation"> <span style="transition-delay: 100ms;">H</span> <span style="transition-delay: 200ms;">e</span> <span style="transition-delay: 300ms;">l</span> <span style="transition-delay: 400ms;">l</span> <span style="transition-delay: 500ms;">o</span> <span style="transition-delay: 600ms;">W</span> <span style="transition-delay: 700ms;">o</span> <span style="transition-delay: 800ms;">r</span> <span style="transition-delay: 900ms;">l</span> <span style="transition-delay: 1000ms;">d</span> <span style="transition-delay: 1100ms;">!</span> <span style="transition-delay: 1200ms;">!</span> </h1>あとは、ページの読み込み時やボタンクリックなどのトリガーでアニメーション実行用のclassを付与させるとアニメーション効果が走るようになります。実際に作成したサンプルを下記に用意していますのでご参考に。
See the Pen text_sequential_animation by DesignSupply.LLC (@designsupply) on CodePen.
今回はJavaScriptとCSSを使ってテキストを1文字ずつ動かすアニメーションを作成してみました。文字数が少ない場合にはHTMLでハードコーディングしても実現できるのですが、文字数が多くなってくるとこのようにJavaScriptで動的に用意してあげる方がいいですね。配列操作次第で文字の並び替えや、アニメーションの方向なども調整できますので是非試してみてはいかがでしょうか。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories