stage 99

jacekkopecky · jacekkopecky · commit 753b3f7f5ac9 · 2020-11-16T12:30:05.000Z
diff --git a/stages/a.js b/stages/a.js
@@ -1,4 +1,23 @@
+let audio;
+
 window.addEventListener("load", () => {
-  const audio = new Audio('https://ia803204.us.archive.org/16/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3');
-  window.logo.addEventListener( "animationstart", () => audio.play() );
+  audio = new Audio('https://ia803204.us.archive.org/16/items/StarWarsThemeSongByJohnWilliams/Star%20Wars%20Theme%20Song%20By%20John%20Williams.mp3');
+  window.logo.addEventListener( "animationstart", () => {
+    audio.play()
+    window.setTimeout(startFade, 78000);
+  });
+  window.play.addEventListener( "click", () => {
+    document.body.classList.add('playing');
+  });
 });
+
+function startFade() {
+  const doFade = setInterval(() => {
+    if (audio.volume > 0) {
+      const newVolume = audio.volume - 0.004;
+      audio.volume = newVolume > 0 ? newVolume : 0;
+    } else {
+      clearInterval(doFade);
+    }
+  }, 20);
+}
diff --git a/stages/index.html b/stages/index.html
@@ -7,7 +7,7 @@
   </head>
 
   <body>
-    <aside>Right here, right now....</aside>
+    <aside><p><strike>A long time ago in a galaxy far, far away....</strike> <p>Right here, right now....</aside>
     <img src="logo.svg" id=logo alt="The University of Portsmouth Logo">
 
     <article>
@@ -18,12 +18,14 @@ <h1>A New Platform</h1>
 
       <p>After thirty years of development, The Web comprises thousands of independently evolving technologies, millions of active developers and billions of users worldwide.</p>
 
-      <p>The Web permeates all societies;  it powers, integrates with, or supports, almost every computer system in use today.  It is arguably <em>the most important platform in computing history</em>, and the most important invention since the wheel.</p>
+      <p>The Web permeates all societies; it powers, integrates with, or supports, almost every computer system in use today.  It is arguably <em>the most important platform in computing history</em>, and the most important invention since the wheel.</p>
 
       <p>Our aim is to pass on the <strong>knowledge</strong>, <strong>skills</strong> and <strong>inspiration</strong> necessary for you to take maximum advantage of The Web's world-changing potential.</p>
     </article>
 
     <script src="a.js"></script>
+
+    <div id="play">▶︎</div>
   </body>
 
 </html>
diff --git a/stages/style.css b/stages/style.css
@@ -1,13 +1,23 @@
+html {
+  background: black;
+}
+
 body {
   background: black;
-  background: url(stars.png);
   background-size: 100vw;
   color: #ffd23e;
   font-family: arial;
   font-size: 6.666vw;
   margin: 0;
   perspective: 50vh;
   height: 100vh;
+  overflow: hidden;
+  filter: blur(1px);
+}
+
+body.playing {
+  background: url(stars.png);
+  animation: fade 4s 87s 1 normal linear forwards;
 }
 
 article {
@@ -17,6 +27,9 @@ article {
   bottom: 0;
   transform-origin: center bottom;
   transform: rotate3d(1, 0, 0, 45deg) translateY(100%);
+}
+
+body.playing article {
   animation: crawler 78s linear forwards 11s;
 }
 
@@ -58,7 +71,12 @@ aside {
   opacity: 0;
   color: rgb(75,213,238);
   font-size: 4vw;
-  margin: 40vh 20vw;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+body.playing aside {
   animation: alongtimeago 6s linear;
 }
 
@@ -69,12 +87,20 @@ aside {
   100% { opacity: 0; }
 }
 
+@keyframes fade {
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
 img {
   position: absolute;
   opacity: 0;
   height: 100vh;
   width: 100vw;
   height: 100vh;
+}
+
+body.playing img {
   animation: logo 9s linear 6s;
 }
 
@@ -95,3 +121,39 @@ img {
     opacity: 0;
   }
 }
+
+body.playing #play {
+  display: none;
+}
+
+body.playing {
+  cursor: none;
+}
+
+
+#play {
+  font-size: 3vmin;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1.5em 2em;
+  background: red;
+  color: white;
+  border-radius: 50% / 10%;
+}
+
+#play::before {
+  content: "▶︎";
+  font-family: Arial;
+  font-size: 200%;
+  line-height: 1.8em;
+  text-align: center;
+  position: absolute;
+  top: 10%;
+  bottom: 10%;
+  right: -5%;
+  left: -5%;
+  background: inherit;
+  border-radius: 5% / 50%;
+}
