mirror of
https://bitbucket.org/Mattrixwv/webtutorials.git
synced 2026-02-03 19:52:28 -05:00
38 lines
984 B
HTML
38 lines
984 B
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;
|
|
let restTime = duration / 1000;
|
|
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> |