JavaScript を使用したフェードインイメージ
Anika Tabassum Era
2024年2月15日
JavaScript がない場合、画像のフェードインスタイルは CSS で評価できます。しかし、それを動的に処理できないため、プロセスは信頼できません。
したがって、CSS と setTimeout() メソッドに完全に依存するのではなく、メソッド requestAnimationFrame() を操作する JavaScript の方法により、パスがより迅速かつ迅速になります。セグメントの例では、メソッド requestAnimationFrame() の実装を含むコードインスタンスと、プロパティ className を参照する画像をフェードインできるコードが表示されます。
className プロパティを使用して画像をフェードインする
実行可能な src を使用して img タグを生成します。クリック可能なイベントが存在して、画像のフェードインを開始します。ここでの主な作業は、特定の CSS ブロックを参照し、それを img id インスタンスに揃える className プロパティを使用することです。
コード-HTML ファイル：
<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>
コード-CSS ファイル：
img {
opacity: 0;
filter: alpha(opacity=40);
}
.animation {
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
opacity: 1;
}
コード-JavaScript ファイル：
function myFunction() {
document.getElementById('img').className = 'animation';
}
出力：
requestAnimationFrame() メソッドを使用して画像をフェードインする
この点で、img タグのインスタンスを取得する関数 fadeIn があります。その後、fadeIn 関数は requestAnimationFrame() と setTimeout() で動作し、現在のブラウザの詳細に基づいて時間枠が特定されます。
コード-HTML ファイル：
<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>
コード-CSS ファイル：
img {
opacity: 0;
filter: alpha(opacity=40);
}
コード-JavaScript ファイル：
function fadeIn(el) {
el.style.opacity = 0;
var tick = function() {
el.style.opacity = +el.style.opacity + 0.05;
if (+el.style.opacity < 1) {
var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
setTimeout(tick, 16)
}
};
tick();
}
function myFunction() {
var el = document.getElementById('what');
console.log(el);
fadeIn(el);
}
出力：
%60-Method-to-Fade-In-Image.webp)
