refined rectangles first animation

stanjdev · Jul 29, 2024 · 943acb0 · 943acb0
1 parent 9cf9b6c
commit 943acb0
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 19 deletions.
diff --git a/components/Portfolio/portfolio.module.css b/components/Portfolio/portfolio.module.css
@@ -202,7 +202,7 @@
 /* MOBILE BURGER MENU */
 .nav__menu {
   animation: fadein 0.9s ease 1.5s backwards normal;
-  background: hsla(0, 0%, 25%, 0.8);
+  background: linear-gradient(to bottom, hsla(0, 0%, 25%, 0.8), #2C2C2C);
   box-shadow: -15px 15px 3px rgba(0, 0, 0, 0.5);
   border-radius: 4%;
   width: 100vw;
@@ -372,7 +372,7 @@
   /* DESKTOP BURGER MENU */
   .nav__menu {
     animation: fadein 0.9s ease 1.5s backwards normal;
-    background: hsla(0, 0%, 25%, 0.8);
+    background: linear-gradient(to bottom, hsla(0, 0%, 25%, 0.8), #2C2C2C);
     box-shadow: -15px 15px 3px rgba(0, 0, 0, 0.5);
     border-radius: 100%;
     height: 100vh;

diff --git a/components/Portfolio/portfolio.module.css.map b/components/Portfolio/portfolio.module.css.map
diff --git a/components/Portfolio/portfolio.module.scss b/components/Portfolio/portfolio.module.scss
@@ -21,6 +21,9 @@
 
 
 $letterspacing: 0.9rem;
+// $gray-bg: hsla(0, 0%, 25%, 0.8);
+// $gray-bg: #2C2C2C;
+$gray-bg: linear-gradient(to bottom, hsla(0, 0%, 25%, 0.8), #2C2C2C);
 
 @mixin fadeInAnimate() {
   animation: fadein 0.9s ease 1.5s backwards normal;
@@ -277,7 +280,7 @@ $letterspacing: 0.9rem;
 /* MOBILE BURGER MENU */
 .nav__menu {
   @include fadeInAnimate();
-  background: hsla(0, 0%, 25%, 0.8);
+  background: $gray-bg;
   box-shadow: -15px 15px 3px rgba(0,0,0,0.5);
   border-radius: 4%;
   // height: 16em;
@@ -516,7 +519,7 @@ $letterspacing: 0.9rem;
 /* DESKTOP BURGER MENU */
   .nav__menu {
     @include fadeInAnimate();
-    background: hsla(0, 0%, 25%, 0.8);
+    background: $gray-bg;
     box-shadow: -15px 15px 3px rgba(0,0,0,0.5);
     border-radius: 100%;
     height: 100vh;

diff --git a/components/Rectangles/Rectangles.jsx b/components/Rectangles/Rectangles.jsx
@@ -51,11 +51,8 @@ export default function Rectangles() {
       }
     }
 
-    window.onload = function() {
-      // console.log("window loaded!")
-      second.forEach(rect => rect.style.display = "none");
-      first.forEach(rect => rect.style.position = "fixed");
-    }
+    second.forEach(rect => rect.style.display = "none");
+    first.forEach(rect => rect.style.position = "fixed");
 
     // if (window.pageYOffset > 0) {
     //   setTimeout(() => {
@@ -66,8 +63,10 @@ export default function Rectangles() {
 
     window.addEventListener('scroll', switcheroo);
 
+
     window.addEventListener('scroll', () => {
-      document.body.style.setProperty('--scroll', (window.pageYOffset / 1.2) / (document.body.offsetHeight - (window.innerHeight / 30)));
+      let value = (window.scrollY / 1.4) / (document.body.offsetHeight - (window.innerHeight / 40))
+      document.body.style.setProperty('--scroll', value);
     }, false);
 
   }, [])

diff --git a/components/Rectangles/css/Rectangles.module.css b/components/Rectangles/css/Rectangles.module.css
@@ -11,8 +11,9 @@
   position: absolute;
   top: 0;
   right: 0;
-  background: #2C2C2C;
-  box-shadow: 15px 15px 3px rgba(0, 0, 0, 0.5);
+  background: linear-gradient(to left, hsla(0, 0%, 25%, 0.8), #2C2C2C);
+  box-shadow: 12px 12px 3px rgba(0, 0, 0, 0.5);
+  border-radius: 2px;
 }
 
 @keyframes animateRects {
@@ -97,12 +98,22 @@
 
 .rect5 {
   animation: animateRects 0.9s ease 0.6s backwards normal;
+  -webkit-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -moz-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -ms-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -o-animation: animateRects 0.9s ease 0.6s backwards normal;
   transform: translate(12%, -25%) rotate(-7deg);
+  -webkit-transform: translate(12%, -25%) rotate(-7deg);
 }
 
 .rect6 {
   animation: animateRects 0.9s ease 0.8s backwards normal;
+  -webkit-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -moz-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -ms-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -o-animation: animateRects 0.9s ease 0.8s backwards normal;
   transform: translate(9%, -28%) rotate(-7deg);
+  -webkit-transform: translate(9%, -28%) rotate(-7deg);
 }
 
 @media screen and (min-width: 1024px) {
@@ -178,14 +189,29 @@
   }
   .rect4 {
     animation: animateRects 0.9s ease 0.4s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.4s backwards normal;
     transform: translate(15%, -22%) rotate(-7deg);
+    -webkit-transform: translate(15%, -22%) rotate(-7deg);
   }
   .rect5 {
     animation: animateRects 0.9s ease 0.6s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.6s backwards normal;
     transform: translate(12%, -25%) rotate(-7deg);
+    -webkit-transform: translate(12%, -25%) rotate(-7deg);
   }
   .rect6 {
     animation: animateRects 0.9s ease 0.8s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.8s backwards normal;
     transform: translate(9%, -28%) rotate(-7deg);
+    -webkit-transform: translate(9%, -28%) rotate(-7deg);
   }
 }/*# sourceMappingURL=Rectangles.module.css.map */
diff --git a/components/Rectangles/css/Rectangles.module.css.map b/components/Rectangles/css/Rectangles.module.css.map
diff --git a/components/Rectangles/css/Rectangles.module.scss b/components/Rectangles/css/Rectangles.module.scss
@@ -12,9 +12,15 @@
   position: absolute;
   top: 0;
   right: 0;
-  background: #2C2C2C;
+  // background: #2C2C2C;
+  background: linear-gradient(to left, hsla(0, 0%, 25%, 0.8), #2C2C2C);
   // background: whitesmoke;
-  box-shadow: 15px 15px 3px rgba(0,0,0,0.5);
+  box-shadow: 12px 12px 3px rgba(0,0,0,0.5);
+  border-radius: 2px;
+  // color: white;
+  // display: flex;
+  // justify-content: flex-start;
+  // align-items: flex-end;
   // z-index: -1;
   // position: fixed;
   // animation: rotate 1s linear infinite;
@@ -98,11 +104,21 @@
 }
 .rect5 {
   animation: animateRects 0.9s ease 0.6s backwards normal;
+  -webkit-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -moz-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -ms-animation: animateRects 0.9s ease 0.6s backwards normal;
+  -o-animation: animateRects 0.9s ease 0.6s backwards normal;
   transform: translate(12%, -25%) rotate(-7deg);
+  -webkit-transform: translate(12%, -25%) rotate(-7deg);
 }
 .rect6 {
   animation: animateRects 0.9s ease 0.8s backwards normal;
+  -webkit-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -moz-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -ms-animation: animateRects 0.9s ease 0.8s backwards normal;
+  -o-animation: animateRects 0.9s ease 0.8s backwards normal;
   transform: translate(9%, -28%) rotate(-7deg);
+  -webkit-transform: translate(9%, -28%) rotate(-7deg);
 }
 
 
@@ -232,16 +248,46 @@
 
 
 
+  // .rect4 {
+  //   animation: animateRects 0.9s ease 0.4s backwards normal;
+  //   transform: translate(15%, -22%) rotate(-7deg);
+  // }
+  // .rect5 {
+  //   animation: animateRects 0.9s ease 0.6s backwards normal;
+  //   transform: translate(12%, -25%) rotate(-7deg);
+  // }
+  // .rect6 {
+  //   animation: animateRects 0.9s ease 0.8s backwards normal;
+  //   transform: translate(9%, -28%) rotate(-7deg);
+  // }
+
   .rect4 {
     animation: animateRects 0.9s ease 0.4s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.4s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.4s backwards normal;
     transform: translate(15%, -22%) rotate(-7deg);
+    -webkit-transform: translate(15%, -22%) rotate(-7deg);
   }
   .rect5 {
     animation: animateRects 0.9s ease 0.6s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.6s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.6s backwards normal;
     transform: translate(12%, -25%) rotate(-7deg);
+    -webkit-transform: translate(12%, -25%) rotate(-7deg);
   }
   .rect6 {
     animation: animateRects 0.9s ease 0.8s backwards normal;
+    -webkit-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -moz-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -ms-animation: animateRects 0.9s ease 0.8s backwards normal;
+    -o-animation: animateRects 0.9s ease 0.8s backwards normal;
     transform: translate(9%, -28%) rotate(-7deg);
+    -webkit-transform: translate(9%, -28%) rotate(-7deg);
   }
+
+
 }
diff --git a/styles/contact_css/Contact.css b/styles/contact_css/Contact.css
@@ -126,7 +126,6 @@
 
 footer {
   color: white;
-  background-color: #131315;
   width: auto;
   display: flex;
   flex-direction: column-reverse;