😄

よくあるサイトを訪れた際のアニメーション

2025/03/22に公開

CSS

HTML

JavaScript

tech

備忘録

これまた非常によく見るあれ。
サイトを訪れた際のアニメーション。なんか最初は隠れてて時間差で出てくるあれ。
とりあえず超汎用的なコードを書いたので備忘録用に残しておきます。

function animation() {
    window.addEventListener('load', function () {
        setTimeout(function () {
            document.getElementById('hoge').classList.add('show');
        }, 1000)
    })
}
animation();

.hoge {
	opacity: 0;
	transition: 0.5s opacity;
}

.hoge.show {
	opacity: 1;
}

解説

第一引数に'load'
全てのレスポンスが返されたら発火。
'DOMContentLoaded'を指定するとDOMを読み込んだ時点で発火される。(画像やCSSの読み込みは待たない)
ちなみにDOMContentLoadedで発火する場合、「window.」ではなく「document.」でオブジェクトを指定する必要がある。DOMはdocumentオブジェクトが持ってるデータだからね。

話がずれてきた。

後はシンプルにloadした時の処理でsetTimeout関数を使ってopacityなりなんなりでアニメーションさせればいいだけやね。

超備忘録！
終わり！！

解説

Discussion