Tutorials/WebTutorials
1
0
Fork 0
mirror of https://bitbucket.org/Mattrixwv/webtutorials.git synced 2025-12-07 10:53:59 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added example of page fading out

Browse Source
This commit is contained in:
Mattrixwv
2021-10-10 10:42:45 -04:00
parent 76f9c210ef
commit b8078f77a9
1 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
fade.html Normal file
View File

@@ -0,0 +1,38 @@
<!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>