parallax effect added to leaderboard.html

index/leaderboard.html

@@ -29,4 +29,44 @@
             </ul>
         </nav>
     </header>
+    <div class="parallax">
+        <div class="image-container">
+            <img src="../media/parallax-plain-leaderboard.png" id="plain" alt="plain">
+        </div>
+        <img src="../media/parallax-mountain-leaderboard.png" id="mount" alt="mountain">
+    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+
 </body>
+<script>
+    document.addEventListener('scroll', function () {
+    const scrollPosition = window.pageYOffset;
+    const mount = document.getElementById('mount');
+    mount.style.transform = 'translateY(' + scrollPosition * 0.6 + 'px)';
+});
+
+
+
+
+</script>
+<script>
+    window.addEventListener('scroll', function() {
+        const header = document.querySelector('header');
+        if (window.scrollY > 100) {
+            document.body.classList.add('scrolled');
+        } else {
+            document.body.classList.remove('scrolled');
+        }
+    });
+</script>

style/style-leaderboard.css

@@ -6,18 +6,37 @@
     text-decoration: none;
     list-style: none;
     box-sizing: border-box;
-
-
 }
 
 body {
-
     height: 300vh;
-    min-height: 1vh;
     background-color: #ffffff;
     color: #fff;
     margin: 0;
-    z-index: 3;
-    font-family: 'Bogart', sans-serif;
-
-}
+    font-family: 'Roboto Slab', serif;
+}
+
+.parallax {
+    position: relative;
+    width: 100%;
+    height: 100vh; 
+    overflow: hidden;
+}
+
+.parallax img {
+    position: absolute;
+    width: 100%;
+    height: auto;
+}
+
+#plain {
+    top: -0.08%;
+    left: 0;
+    z-index: 2;
+}
+
+#mount {
+    top: 0;
+    left: 0;
+    z-index: 1;
+}