Fade Transition

2023-06-23 15:40:45 -04:00 · 2023-06-23 15:40:45 -04:00 · 701172c982
parent fe985c43c9
commit 701172c982
3 changed files with 13 additions and 2 deletions
--- a/scene.css
+++ b/scene.css
@ -1,3 +1,12 @@
-body {
+html, body {
+    height: 100%;   /* ges Hoehe der Seite -> weitere Hoehenangaben werden relativ hierzu ausgewertet */
+    overflow: hidden;   /*  hide scrollbars */
+    opacity: 1.0;
    background-size: cover;
+    /* TODO: Make the transition time configurable */
+    -webkit-transition: background 5s linear;
+    -moz-transition: background 5s linear;
+    -o-transition: background 5s linear;
+    -ms-transition: background 5s linear;
+    transition: background 5s linear;
 }
--- a/scene.html
+++ b/scene.html
@ -7,7 +7,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
-    <link rel=stylesheeet" href="scene.css">
+    <link rel="stylesheet" href="scene.css">
    <script src="scripts/scene.js"></script>
 </head>
 <body id="wallpaper">
--- a/scripts/scene.js
+++ b/scripts/scene.js
@ -1,5 +1,7 @@
 // TODO:
 // - Add image fading
+// - Add adjustable timing
+// - Add random timing option


 let socket