feat: add more layers

DigitalExtinction · Oct 23, 2023 · ea38edf · ea38edf
1 parent 12edd54
commit ea38edf
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 16 deletions.
diff --git a/sass/styles.scss b/sass/styles.scss
@@ -23,7 +23,7 @@ body {
  padding-bottom: 30px;
 }
 
-div#wrapper, div#background, div#midground, div#midground2, div#foreground {
+div#wrapper, div#background, div#midground, div#midground2, div#midground3, div#midground4, div#midground5, div#foreground {
  height: 700px;
 }
 
@@ -33,7 +33,7 @@ div#wrapper {
  perspective: 1px;
 }
 
-div#background, div#midground, div#midground2, div#foreground {
+div#background, div#midground, div#midground2, div#midground3, div#midground4, div#midground5, div#foreground {
  background-position-x: center;
  background-position-y: top;
  background-repeat: repeat-x;
@@ -46,15 +46,27 @@ div#background, div#midground, div#midground2, div#foreground {
 }
 
 div#background {
- background-image: url("header_wide_3.svg");
+ 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_wide_2.svg");
+ background-image: url("header_4.svg");
 }
 
 div#midground {
- background-image: url("header_wide_1.svg");
+ background-image: url("header_3.svg");
 }
 
 div#foreground {
@@ -166,7 +178,7 @@ div.middle {
 }
 
 @media only screen and (max-width: 800px) {
- div#wrapper, div#background, div#midground, div#midground2, div#foreground {
+ div#wrapper, div#background, div#midground, div#midground2, div#midground3, div#midground4, div#midground5, div#foreground {
  height: 600px;
  }
  div.middle {

diff --git a/static/header_1.svg b/static/header_1.svg
diff --git a/static/header_2.svg b/static/header_2.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/templates/base.html b/templates/base.html
@@ -40,12 +40,11 @@
  <h2>_digital&ZeroWidthSpace;_extinction</h2>
  </div>
  </div>
- <div id="midground2">
- &nbsp;
- </div>
- <div id="midground">
- &nbsp;
- </div>
+ <div id="midground5">&nbsp;</div>
+ <div id="midground4">&nbsp;</div>
+ <div id="midground3">&nbsp;</div>
+ <div id="midground2">&nbsp;</div>
+ <div id="midground">&nbsp;</div>
  <div id="foreground">
  &nbsp;
  </div>
@@ -60,9 +59,12 @@ <h2>_digital&ZeroWidthSpace;_extinction</h2>
  var offset1 = (scrollPosition * 0.5);
  transformParallax(layer1, offset1);
 
- var offset2 = (scrollPosition * 0.4);
+ // var offset2 = (scrollPosition * 0.4);
  var offset3 = (scrollPosition * 0.3);
- transformParallax(layer2, offset2);
+ transformParallax(layer_mid_2, (scrollPosition * 0.4));
+ transformParallax(layer_mid_3, (scrollPosition * 0.5));
+ transformParallax(layer_mid_4, (scrollPosition * 0.6));
+ transformParallax(layer_mid_5, (scrollPosition * 0.7));
  transformParallax(layer3, offset3);
  transformParallax(layer3, offset3);
 
@@ -90,11 +92,14 @@ <h2>_digital&ZeroWidthSpace;_extinction</h2>
  }
 
  document.addEventListener('scroll', OnScroll, false);
- var layer1, layer2, layer3, layer4;
+ var layer1, layer_mid_2, layer_mid_3, layer_mid_4, layer_mid_5, layer3, layer4;
 
  var isios = false
  layer1 = document.getElementById("background");
- layer2 = document.getElementById("midground2");
+ 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>