added word slider

lost-in-noise · Apr 11, 2024 · 62b1861 · 62b1861
1 parent e61bc76
commit 62b1861
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
@@ -23,7 +23,9 @@ body {
   top: 0;
   left: 0;
   z-index: 100;
+  background-color: rgba(17, 17, 18, 0.8);
 }
+
 .nav-ul {
   display: flex;
   justify-content: space-around;
@@ -144,3 +146,82 @@ button {
 .text-on-video p {
   font-size: 1.5rem;
 }
+
+/* word slider */
+
+.word-slider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Space Grotesk", sans-serif;
+  width: 640px;
+  font-size: 21px;
+  line-height: 32px
+}
+.word-title {
+  /* flex: 1 1 100%; */
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+
+  color: rgba(230, 234, 255, 0.6);
+  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
+}
+
+.slider-on-video {
+  display: inline-block;
+  height: 30px;
+  width: 100%;
+  overflow: hidden;
+  vertical-align: middle;
+  border-bottom: 3px solid white;
+
+  mask-image: linear-gradient(transparent, white, white, white, transparent);
+  mask-type: luminance;
+  mask-mode: alpha;
+}
+.slide-words {
+  display: inline-block;
+  text-decoration: underline;
+  animation-name: wordSlider;
+  animation-timing-function: ease-out;
+  animation-iteration-count: infinite;
+  animation-duration: 14s;
+}
+
+.slide-word {
+  display: inline-block;
+  /* line-height: 1.3em; */
+  text-align: center;
+  width: 100%;
+
+  font-size: 21px;
+}
+@keyframes wordSlider {
+  0%, 10% {
+    transform: translateY(-0%);
+  }
+  15%, 25% {
+    transform: translateY(-15%);
+  }
+  30%, 40% {
+    transform: translateY(-30%);
+  }
+  45%, 55% {
+    transform: translateY(-45%);
+  }
+  60%, 70% {
+    transform: translateY(-60%);
+  }
+  75%, 85% {
+    transform: translateY(-75%);
+  }
+  90%, 100% {
+    transform: translateY(-75%);
+  }
+  100% {
+    transform: translateY(-90%);
+  }
+}
diff --git a/index.html b/index.html
@@ -58,10 +58,26 @@
           </video>
           <div class="text-on-video">
             <h2>Where game makers and game changers unite</h2>
-            <p>This is a description of the video.</p>
+            <div class="word-slider">
+              <p class="word-title">Find the best</p>
+              <div class="slider-on-video">
+                <ul class="slide-words">
+                  <li class="slide-word">game designers</li>
+                  <li class="slide-word">opportunities</li>
+                  <li class="slide-word">game producers</li>
+                  <li class="slide-word">connections</li>
+                  <li class="slide-word">engineers</li>
+                  <li class="slide-word">jobs</li>
+                  <li class="slide-word">game designers</li>
+                </ul>
+              </div>
+              <p class="word-title">in the video game industry</p>
+            </div>
           </div>
         </div>
       </div>
+
+
     </main>
     <footer></footer>
   </body>