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
- Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
Vue.js(Options API)からReactへの移行でみる違いと比較 #1:コンポーネント
- Reactで値や関数をメモ化してパフォーマンスを改善してみる(React.memo, useMemo, useCallback)
Reactで値や関数をメモ化してパフォーマンスを改善してみる(React.memo, useMemo, useCallback)
- WordPressでフォームを使ったカスタムフィールド掛け合わせの検索機能実装と注意するポイント
WordPressでフォームを使ったカスタムフィールド掛け合わせの検索機能実装と注意するポイント
- JavaScriptで配列やオブジェクトの操作に使えるTips
JavaScriptで配列やオブジェクトの操作に使えるTips
- React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
React+TypeScript(TSX)でコンポーネントを使った効率のよい静的HTMLコーディング
- webpackを使うVue.js 3系とTypeScriptの環境構築メモ
webpackを使うVue.js 3系とTypeScriptの環境構築メモ
- Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
Dartで使うパッケージ管理ツールのPubからDart Sassのコンパイル環境を作成する
- ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
ブロークングリッドなレイアウトをコーディングするときに使えるCSSのテクニック
categories