New header animation effect

Author: alanrme

css/style.scss

@@ -73,7 +73,7 @@ body {
 		}
 
 		.card {
-			background: black;
+			background: rgba(0,0,0,0.5);
 			//border-color: white;
 		}
 
@@ -275,6 +275,7 @@ span.hu {
 	border-radius: 1em;
 	border: 2px solid #aaa;
 	box-shadow: 0px 0.3em 0.6em rgba(0,0,0,0.1);
+	overflow: clip;
 	h2 {
 		/* L shaped border
 		border-image: linear-gradient(to right, #1ec1c7, #4e44b0) 1 100%;
@@ -287,8 +288,24 @@ span.hu {
 		//border-width: 0 0 0 5px;
 		text-align: left;
 		//padding: 5px 15px;
+		top: 0px;
+		margin-left: 0px;
 		font-weight: 900;
 		margin-bottom: 0.3em;
+		transform-origin: top left;
+
+		&.stickyheader {
+			display: inline-block;
+			transition: 0.5s $bezier;
+		}
+
+		&.sticky {
+			z-index: -1;
+			position: sticky;
+			top: 2rem;
+			transform: scale(10);
+			opacity: 0.2;
+		}
 	}
 }
 
@@ -693,14 +710,20 @@ div.shake {
 		h3 {
 			font-size: 2em;
 		}
-		&.arrow h3:after {
-			content: ">";
-			opacity: 0.3;
-			margin-left: 0.1em;
-			transition: 0.3s;
-		}
-		@include hover {	
-			&.arrow:hover h3:after {
+		&.arrow {
+			h3:after {
+				content: ">";
+				opacity: 0.3;
+				margin-left: 0.1em;
+				transition: 0.3s;
+			}
+			@include hover {
+				&:hover h3:after {
+					opacity: 0.6;
+					margin-left: 0.4em;
+				}
+			}
+			&:active h3:after {
 				opacity: 0.6;
 				margin-left: 0.4em;
 			}
@@ -733,6 +756,7 @@ div.shake {
 	box-shadow: 0px 0.3em 0.6em rgba(0,0,0,0.15);
 	margin-bottom: 1.25em !important;
 	font-size: 0.8rem;
+	background: rgba(255,255,255,0.5);
 
 	.heading {
 		h3 {

index.html

@@ -20,7 +20,7 @@
 <script defer src="{{ site.baseurl }}/js/github.js" async></script>
 
 <div class="section" id="intro">
-    <h2 class="aos" data-aos="fadein-expand-up">EXPERIENCE</h2>
+    <h2 class="aos stickyheader" data-aos="fadein-expand-up">EXPERIENCE</h2>
 
     <h3 class="aos" data-aos="fadein-up"> I'm great at... </h3>
 
@@ -106,7 +106,7 @@ <h3>Golang</h3>
 
 
 <div class="section" id="portfolio">
-    <h2 class="aos" data-aos="fadein-expand-up">PROJECTS</h2>
+    <h2 class="aos stickyheader" data-aos="fadein-expand-up">PROJECTS</h2>
 
     <p class="aos" data-aos="fadein-up"> Check out a few of my creations. Pulled from <a href="https://github.com/{{ site.github_username }}">my GitHub</a>.</p>
     <div class="row card-columns gh-projects">
@@ -144,7 +144,7 @@ <h3></h3>
 </div>
 
 <div class="section" id="contact">
-    <h2 class="aos" data-aos="fadein-expand-up">FIND ME</h2>
+    <h2 class="aos stickyheader" data-aos="fadein-expand-up">FIND ME</h2>
 
     <div class="aos" data-aos="fadein-up" class="contact-slides" style="margin-bottom: 1em;">
         <!-- icons -->

js/main.js

@@ -198,10 +198,10 @@ ready(() => {
             if (nav.classList.contains('scrolled')) nav.classList.remove("scrolled");
         }
 
-        updateCheckpoints(checkpointContainer)
+        sectionActions(checkpointContainer)
     }, 150);
 
-    function updateCheckpoints(container) {
+    function sectionActions(container) {
         const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
         // width to set the scroll progress bar to
         let newWidth = 0;
@@ -219,6 +219,18 @@ ready(() => {
                 */
                 newWidth = Math.min(increment*(i + (vh - rect.top) / (rect.bottom - rect.top)), 100)
             }
+            
+            header = section.querySelector("h2.stickyheader")
+            if (header) {
+                // if the element is at the top of the screen
+                if (rect.top < 0) {
+                    header.classList.add("sticky")
+                    header.style.transform = `scale(10) translateX(${(rect.top) / (rect.bottom - rect.top - vh)*30}%)`
+                } else {
+                    header.classList.remove("sticky")
+                    header.style.transform = null
+                }
+            }
         })
         container.querySelector("#checkpoint-fill").style.width = `${newWidth}%`
         const circlesToFill = Math.floor((newWidth+1)/increment)