ライブラリを使わず、JSで画像をフェードインさせてみる
ライブラリを使わず、JSで画像をフェードインさせてみる:
2パターン書いてみました。
まず１つ目
実は上記のfadeIn関数は下の記事から関係のない部分を省かせていただき、使わせていただきました。
｢脱jQuery｣ 生JSで.fadeIn()のように要素をフェードインで表示する
ありがてぇ！
上記のJSでOpacityを弄るのは、正直パフォーマンスが良くない・・・
というわけで、Styleの値の書き換えだけJSにまかせて、アニメーションはCSSにさせる。
HTMLは共通です
なんだ、これだけでFadeInできるのか。
これなら簡単にFadeOutも実装できるし、CSS3はやっぱり凄いなぁ。
2パターン書いてみました。
まず１つ目
jsの再起を使ってフェードインさせる
HTML
<!-- 必要最低限 --> <body> <img id="image" src="https://placehold.jp/150x150.png" alt="画像" style="opacity: 0;"> </body>
JavaScript
function fadeIn(node) {
var start = performance.now();
requestAnimationFrame(function tick(timestamp) {
var easing = (timestamp - start) / 300;
node.style.opacity = Math.min(easing, 1);
if (easing < 1) {
// 再起
requestAnimationFrame(tick);
} else {
node.style.opacity = '';
}
});
}
window.onload = function()
{
fadeIn(document.getElementById("image"));
}
｢脱jQuery｣ 生JSで.fadeIn()のように要素をフェードインで表示する
ありがてぇ！
CSSでアニメーションさせる
上記のJSでOpacityを弄るのは、正直パフォーマンスが良くない・・・というわけで、Styleの値の書き換えだけJSにまかせて、アニメーションはCSSにさせる。
HTMLは共通です
CSS
img {
transition: all 0.5s;
opacity: 0;
}
JavaScript
window.onload = function()
{
var image = document.getElementById("image");
image.style.opacity = 1;
}
これなら簡単にFadeOutも実装できるし、CSS3はやっぱり凄いなぁ。
コメント
コメントを投稿