JavaScriptで順番に並んだ要素を連続して動かすシーケンシャルなアニメーション実装する
最終更新日: Update!!
リスト型のナビゲーションなど、複数の要素が並列に配置されたUIで使えるアニメーションをjavascriptを使って実装してみたいと思います。今回は順番に連続して要素を動かすアニメーションのサンプルになります。いわゆるシーケンシャルな動きで最近のWebデザインでもよく見かけるかと思います。
まずはHTMLからです、今回はリスト要素で用意しました。親要素にはidを指定します。複数要素が対象の場合にはclassで指定するようにします。そして子要素には同じclass名をアニメーションさせる要素全てに付与しておきます。
【HTML】※一部抜粋
近年、ウェブサイトのデザインにもアニメーションが使われているのをよく見かけます。このようにCSSとjavascriptを組み合わせることで、アニメーションの表現も広がるのではないでしょうか。工夫次第ではいろんな動きも可能になるので、ぜひ試してみてください。
<ul id="sequential_animation"> <li class="sequential_animation_item">First Element</li> <li class="sequential_animation_item">Second Element</li> <li class="sequential_animation_item">Third Element</li> <li class="sequential_animation_item">Fourth Element</li> <li class="sequential_animation_item">Fifth Element</li> </ul>CSSではレイアウトや見た目のデザインを整えていきますが、初期状態では子要素をopacityで見えないようにし、transformで横もしくは縦方向に少し移動させておきます。また、アニメーションとして成り立つようにtransitionも設定しておきます。そして、表示状態のclassがついた時のスタイルとして、透明度と位置を表示されたときに見えるよう戻しておきます。 【Sass(scss)】
#sequential_animation { .sequential_animation_item { transition: all 0.5s linear 0s; transform: translate(-30px,0); opacity: 0; &.show { transform: translate(0,0); opacity: 1; } } }アニメーション自体はCSSで実装しますが、シーケンシャルな動きはJavaScriptで制御していきます。まずは子要素全てのDOMを取得し、forEach()の中で処理を加えていきます。ここでポイントになるのが、forEachの第二引数になります。この第二引数ではindexの値を取得できます。それをsetTimeoutの値に入れることで、時間差で処理が行われるようになります。アニメーションのトリガーとしては、表示用のclass名を子要素に付与するだけのシンプルな内容になっています。 【javascript】
function sequentialAnimation() { const element = document.querySelectorAll('#sequential_animation'); element.forEach((parentItems) => { const childElements = parentItems.querySelectorAll('.sequential_animation_item'); childElements.forEach((parentItems, index) => { const order = index + 1; const delay = order * 500; setTimeout(() => { parentItems.classList.add('show'); }, delay); }); }); } sequentialAnimation();これで順番に連続して要素を動かすアニメーションが実装できました。今回のサンプルはこちらに用意していますので参考に。
See the Pen sequential_animation by designsupply (@designsupply) on CodePen.
近年、ウェブサイトのデザインにもアニメーションが使われているのをよく見かけます。このようにCSSとjavascriptを組み合わせることで、アニメーションの表現も広がるのではないでしょうか。工夫次第ではいろんな動きも可能になるので、ぜひ試してみてください。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #3
- 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()擬似クラスの活用例
categories