Merge pull request #1065 from codeRIT/bh-1040

Parallax Hero SVGs

Author: peterkos

sass/main.scss

@@ -78,7 +78,7 @@ $event-count: 6;
     // Transition all elements on the screen
     // (except FAQ panel, which already has a transition,
     // and the section days, which need no transition.)
-    &:not(nav.link):not(.panel):not(#days):not(.number):not(#desk) {
+    &:not(.link):not(.panel):not(#days):not(.number):not(#desk):not(#wire) {
         transition: all 1s ease;
     }
 
@@ -217,7 +217,7 @@ nav {
         font-size: 2em;
     }
 
-    // Shelf things!
+    // Hero Graphics
     #desk-container {
         position: absolute;
         height: 100%;
@@ -231,6 +231,7 @@ nav {
             height: 100%;
             width: 100%;
             background-position: bottom right;
+            background-attachment: fixed;
         }
 
         #desk {
@@ -263,12 +264,14 @@ nav {
     #shapes {
         position: absolute;
         right: 0;
-        height: 900px;
+        height: 110%;
         width: 900px;
         margin-top: -80px;
         background-image: url("../assets/shapes.svg");
         background-repeat: no-repeat;
-        background-position: center;
+        background-position: 100% 30%;
+        background-attachment: fixed;
+        background-size: 900px;
         z-index: 1;
     }
 }
@@ -823,7 +826,9 @@ footer {
         }
 
         #desk-container {
-            right: -100px;
+            #desk, #wire {
+                background-position: calc(100% + 100px) bottom;
+            }
         }
 
         #shelf {
@@ -920,6 +925,17 @@ footer {
         width: 100%;
     }
 
+    #hero {
+        #desk-container {
+            right: -100px;
+
+            #desk, #wire {
+                background-attachment: scroll;
+                background-position: right bottom;
+            }
+        }
+    }
+
     #leadership #leaders {
         grid-template-columns: repeat(4, $leadership-size-mobile);
         justify-content: space-between;