定期的にDOM要素をアニメーションするサンプルを用意しました。
DOM要素が対象ですので、div
要素や img
要素などが動かせます。
1. デモ
色を付けた div
要素を動かしているデモを用意しました。
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. まとめ
これだけ単純な方法でウェブページに動きを加えることができるのは便利ですね。