scrolltext

dist/index.html

@@ -42,16 +42,19 @@
         <!-- <h1 draggable="false">Welcome!</h1> -->
         <button type="button" id="mb_start" class="button">Start</button><br />
         <button type="button" id="mb_settings" class="button">Settings</button>
-        <p>
-          <br />
-          <span class="darkgreen">Idea and Coding</span><br />
-          Leander Seige<br />
-          <br />
-          <span class="darkgreen">Music</span><br />
-          Chris Huelsbeck<br />
-          Juhani Junkala<br />
-          <br />
-        </p>
+        <div id="mmscrollcont">
+          <div id="mmscroll">
+            The terribly accurate clocks of Benrath Palace have nothing else in mind but to ruthlessly wake up the peacefully sleeping humans and animals of art and cultural history. But wait... suddenly a fearless hero comes to the rescue: bravely throwing fruits at the clocks to safeguard the sleep of the just.<br />
+            <br />
+            <span class="heading">Idea and Coding</span><br />
+            Leander Seige<br />
+            <br />
+            <span class="heading">Music</span><br />
+            Chris Huelsbeck<br />
+            Juhani Junkala<br />
+            <br />
+          </div><br />
+        </div>
         <a href="https://github.com/leanderseige/clocksattack#clocks-attack" target="_blank" class="button">About</a><br />
         <a href="https://www.shirtee.com/de/store/usedpictures/" target="_blank" class="button">Merch</a>
         <br />

src/css/main.css

@@ -149,6 +149,11 @@ h1 {
 .red {
   color:red;
 }
+
 .darkgreen {
   color:#108010;
 }
+
+.heading {
+  color:white;
+}

src/css/main_menu.css

@@ -20,3 +20,32 @@ p {
   padding:0;
   margin:0;
 }
+
+#mmscrollcont {
+  padding:0;
+  margin:0;
+  height: 35vh;
+  overflow: hidden;
+  display:inline-block;
+  width:100%;
+}
+
+#mmscroll {
+  padding:0vh 3vh;
+  margin:0;
+  height: 35vh;
+  animation-name: mmscrollkf;
+  animation-duration: 40s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  display:inline-block;
+}
+
+@keyframes mmscrollkf {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(-250%);
+  }
+}

src/css/mobile.css

@@ -5,6 +5,7 @@
   #level_background,
   #preloader,
   #mainmenu,
+  #mmscrollcont
   .fullscreen {
     width:100vw;
     height:100%;