mirror of
https://bitbucket.org/Mattrixwv/webtutorials.git
synced 2025-12-06 18:34:01 -05:00
40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Fade Test</title>
|
|
<script type="text/javascript">
|
|
async function fade(){
|
|
console.log("fade");
|
|
let fadeDiv = document.createElement("div");
|
|
fadeDiv.id = "fadeDiv";
|
|
document.getElementsByTagName("body")[0].prepend(fadeDiv);
|
|
let duration = 2 * 1000; //Duration = ms
|
|
let restTime = duration / 100; //restTime = ms/increment
|
|
//TODO: Account for time it takes loop to execute
|
|
//?Could possible use timer class or something of that nature to compute remaining time
|
|
for(let alpha = 0.01;alpha <= 1;alpha += 0.01){
|
|
let fadeString = "rgba(0, 0, 0, " + alpha + ")";
|
|
console.log("fading = " + fadeString);
|
|
fadeDiv.style.backgroundColor = fadeString;
|
|
await sleep(restTime);
|
|
}
|
|
}
|
|
async function sleep(ms){
|
|
return new Promise(resolve => setTimeout(resolve, ms));
|
|
}
|
|
</script>
|
|
<style>
|
|
#fadeDiv{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<img src="file://C:/Users/m_ell.FRICAI/Pictures/Pictures/green.jpg" height="100%" width="100%">
|
|
<button onclick="fade()">Fade</button>
|
|
</body>
|
|
</html> |