Added example of page fading out

2025-12-07 02:43:59 -05:00 · 2021-10-10 10:42:45 -04:00
parent 76f9c210ef
commit b8078f77a9
1 changed files with 38 additions and 0 deletions
--- a/fade.html
+++ b/fade.html
@@ -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>