Add parallax effect to the header (#21)

# Short description Work in progress of having Parallax effect on the website as requested in #17. Closes #17. # Changes feat: use magic scrolling fix: fix missing github icon feat(static): add more layers feat: add background layers in idraw # Static visuals ## Macbook ![trim 692BC851-7156-4777-94AA-505ECA9C0CE4](https://github.com/DigitalExtinction/Website/assets/5700145/1ea24c44-b53b-465e-83d9-4903fe6ad967) ## iPhone ![trim 3AAE231D-54F9-4D94-B641-85030E565D10](https://github.com/DigitalExtinction/Website/assets/5700145/166ed9bd-3a02-4c12-bb62-1788c818b821)
DigitalExtinction · Nov 1, 2023 · 856481f · 856481f
1 parent f86e1b8
commit 856481f
Show file tree

Hide file tree

Showing 12 changed files with 151 additions and 9 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,3 @@
 static/*.svg filter=lfs diff=lfs merge=lfs -text
 static/*.ttf filter=lfs diff=lfs merge=lfs -text
+static/*.idraw filter=lfs diff=lfs merge=lfs -text
diff --git a/sass/github.scss b/sass/github.scss
@@ -1,3 +1,13 @@
+#github {
+    z-index: 2;
+    fill: #151513;
+    color: #fff;
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+}
+
 .github-corner:hover .octo-arm {
     animation: octocat-wave 560ms ease-in-out
 }

diff --git a/sass/styles.scss b/sass/styles.scss
@@ -23,15 +23,63 @@ body {
     padding-bottom: 30px;
 }
 
-div#header {
-    background: url("header_wide.svg") center repeat-x;
-    background-size: contain;
-    background-size: auto 100%;
-    height: 600px;
+div#wrapper, div.bg {
+    height: 700px;
+}
+
+div#wrapper {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    perspective: 1px;
+}
+
+div.bg {
+    background-position-x: center;
+    background-position-y: top;
+    background-repeat: repeat-x;
+    background-size: cover;
+    position: absolute;
+    top: 0;
     width: 100%;
+    object-fit: cover;
+    z-index: -1;
+}
+
+div#background {
+    background-image: url("header_1.svg");
+}
+
+div#midground5 {
+    background-image: url("header_7.svg");
+}
+
+div#midground4 {
+    background-image: url("header_6.svg");
+}
+
+div#midground3 {
+    background-image: url("header_5.svg");
+}
+
+div#midground2 {
+    background-image: url("header_4.svg");
+}
+
+div#midground {
+    background-image: url("header_3.svg");
+}
+
+div#foreground {
+    background-image: url("header_wide_0.svg");
+}
+
+div#title {
+    z-index: 2;
 }
 
 div.middle {
+    z-index: 1;
+    position: relative;
     margin: 0 auto;
     width: 45%;
     min-width: 780px;
@@ -130,6 +178,9 @@ div.middle {
 }
 
 @media only screen and (max-width: 800px) {
+    div#wrapper, div.bg {
+        height: 600px;
+    }
     div.middle {
         width: 80%;
         min-width: 350px;

diff --git a/static/header_1.svg b/static/header_1.svg
diff --git a/static/header_3.svg b/static/header_3.svg
diff --git a/static/header_4.svg b/static/header_4.svg
diff --git a/static/header_5.svg b/static/header_5.svg
diff --git a/static/header_6.svg b/static/header_6.svg
diff --git a/static/header_7.svg b/static/header_7.svg
diff --git a/static/header_wide.idraw b/static/header_wide.idraw
diff --git a/static/header_wide_0.svg b/static/header_wide_0.svg
diff --git a/templates/base.html b/templates/base.html
@@ -33,14 +33,70 @@
     <link rel="stylesheet" href="/styles.css">
   </head>
   <body style="background-color: #340000;">
-    <a href="https://github.com/DigitalExtinction/Game" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
-    <div id="header">
-      <div class="middle">
-        <h2>_digital&ZeroWidthSpace;_extinction</h2>
+    <a href="https://github.com/DigitalExtinction/Game" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" id="github" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+    <div id="wrapper">
+      <div class="bg" id="background">
+        <div class="middle" id="title">
+          <h2>_digital&ZeroWidthSpace;_extinction</h2>
+        </div>
       </div>
+      <div class="bg" id="midground5">&nbsp;</div>
+      <div class="bg" id="midground4">&nbsp;</div>
+      <div class="bg" id="midground3">&nbsp;</div>
+      <div class="bg" id="midground2">&nbsp;</div>
+      <div class="bg" id="midground">&nbsp;</div>
+      <div class="bg" id="foreground">&nbsp;</div>
     </div>
     <div class="middle">
       {% block content %} {% endblock %}
     </div>
+  <script>
+
+    ///
+    function MoveParallax() {
+      var offset1 = (scrollPosition * 0.5);
+      transformParallax(layer1, offset1);
+
+      // var offset2 = (scrollPosition * 0.4);
+      var offset3 = (scrollPosition * 0.2);
+      transformParallax(layer_mid_2, (scrollPosition * 0.25));
+      transformParallax(layer_mid_3, (scrollPosition * 0.3));
+      transformParallax(layer_mid_4, (scrollPosition * 0.35));
+      transformParallax(layer_mid_5, (scrollPosition * 0.4));
+      transformParallax(layer3, offset3);
+      transformParallax(layer3, offset3);
+
+      var offset4 = (scrollPosition * 0.5);
+      if (offset4 > 100) {
+        offset4 = 100;
+      }
+      transformParallax(layer4, offset4);
+    }
+
+    function transformParallax(layer, offset) {
+      layer.style.webkitTransform = "translate3d(0, " + offset + "px, 0)";
+      layer.style.MozTransform = "translate3d(0, " + offset + "px, 0)";
+      layer.style.msTransform = "translateY(" + offset + "px)";
+      layer.style.OTransform = "translate3d(0, " + offset + "px, 0)";
+      layer.style.transform = "translate3d(0, " + offset + "px, 0)";
+    }
+
+    ///
+    function OnScroll(e) {
+      scrollPosition = Math.max(window.pageYOffset, 0);
+      MoveParallax();
+    }
+
+    document.addEventListener('scroll', OnScroll, false);
+    var layer1, layer_mid_2, layer_mid_3, layer_mid_4, layer_mid_5, layer3, layer4;
+
+    layer1 = document.getElementById("background");
+    layer_mid_5 = document.getElementById("midground5");
+    layer_mid_4 = document.getElementById("midground4");
+    layer_mid_3 = document.getElementById("midground3");
+    layer_mid_2 = document.getElementById("midground2");
+    layer3 = document.getElementById("midground");
+    layer4 = document.getElementById("title");
+  </script>
   </body>
 </html>