プログラミング

定期的にDOM要素をアニメーションするサンプルを用意しました

投稿日:

定期的にDOM要素をアニメーションするサンプルを用意しました。

DOM要素が対象ですので、div要素や img要素などが動かせます。

1. デモ

色を付けた div要素を動かしているデモを用意しました。

こんな感じになります。(これはアニメーションGIFです)

2. ソースコード

ポイントとなる部分を以下に掲載します。

HTML

  • p要素を div要素で囲んでいるだけです。
  • この div要素を動かします。
<div id="target">
  <p>Hi!</p>
</div>

CSS

  • @keyframes を使ってアニメーションを記述し、shake1という名前を付けています。
  • 同じ名前で少し紛らわしいですが、このアニメーションを利用するCSSクラスを定義し、shake1という名前を付けています。
.shake1 {
  animation: shake1 0.1s;
}

@keyframes shake1 {
  0%   { transform: translate(2px,  0px) rotate(0deg); }
  50%  { transform: translate(-4px, 0px) rotate(5deg); }
  100% { transform: translate(2px,  0px) rotate(0deg); }
}

JavaScript

  • DOM要素にアニメーションを適用する処理を、addPeriodicMoving という名前の関数にまとめています。
  • この関数の第三引数で、「○秒おきに実行する」の秒数を指定しますが、この時間設定は厳密なものではありません。
  • window.requestAnimationFrame() を使って定期的にアニメーションを実行しています。

※ ES6 の文法を使っています。

/**
 * DOM要素を定期的にアニメーションする。
 * @param {object} elm - DOM element
 * @param {string} className - CSS class name
 * @param {number} span- 何秒おきに動くか
 */
const addPeriodicMoving = (elm, className, span) => {
  let cnt = 0;
  const loop = () => {
    if (cnt % parseInt(span*30) === 0) {
      elm.classList.toggle(className);
    }
    cnt++;
    window.requestAnimationFrame(loop);
  };
  window.requestAnimationFrame(loop);
};

addPeriodicMoving(
  document.querySelector('#target'),
  'shake1',
  3
);

3. まとめ

これだけ単純な方法でウェブページに動きを加えることができるのは便利ですね。

4. 参考

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

React Redux

React + Redux のチュートリアルをやってみた

目次1. はじめに2. Redux について2. Action と Action CreatorActionAction Creators関連ソースコードactions/index.jscontain …

JavaScript

JavaScriptで画面上の文字列をクリップボードにコピーする方法

目次1. はじめに2. Clipboard API and events を使う方法3. Selection API を使う方法(1) 基礎知識(2) プログラムの書き方(3) サンプルページ4. お …

Gentelella の Sidebar を解析してみました

目次1. はじめに2. サイドバーの形態3. サイドバーの形態のスタイル定義4. ページを開いた時のデフォルト5. トグルアイコンをクリックした時の動作6. サイドバー内の各メニュー項目をクリックした …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

Web Components

Web Components: 組み込み要素を拡張する方法

目次1. はじめに2. 組み込みHTML要素を拡張する方法3. おわりに4. 参考 1. はじめに Web Components では、HTMLElement を継承してカスタムクラスを定義することも …