Fix parallax

Author: MorganCaron

assets/css/theme.css

@@ -111,6 +111,8 @@ body {
 	line-height: 1.5;
 	font-size: 1.2rem;
 	font-weight: 400;
+	display: grid;
+	grid-template-columns: 100%;
 
 	&:has(header.home) {
 		background-image: url("/assets/images/background1.svg"), radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
@@ -160,19 +162,25 @@ body {
 		background-blend-mode: multiply, normal, normal, normal, normal, normal, normal, normal;
 	}
 
-	> .parallax > header {
-		padding: 1rem;
-		margin-bottom: 1rem;
+	> .parallax {
+		grid-row: 1;
+		grid-column: 1;
 
-		> .button {
-			position: absolute;
-			top: 1rem;
-			left: 1rem;
-		}
+		> header {
+			padding-top: 7rem;
+			padding-bottom: 1rem;
+			margin-bottom: 1rem;
 
-		.logo {
-			width: 7rem;
-			height: auto;
+			> .button {
+				position: absolute;
+				top: 1rem;
+				left: 1rem;
+			}
+
+			.logo {
+				width: 7rem;
+				height: auto;
+			}
 		}
 	}
 
@@ -250,6 +258,10 @@ td {
 }
 
 body > nav.sticky-top {
+	grid-row: 1;
+	grid-column: 1;
+	align-self: start;
+	z-index: 10;
 	display: grid;
 	grid-template-rows: 1fr;
 	grid-template-columns: 1fr 4fr 1fr;
@@ -289,11 +301,6 @@ body > nav.sticky-top {
 	}
 }
 
-nav.sticky-top + .parallax {
-	margin-top: -5.5rem;
-	padding-top: 5rem;
-}
-
 header.home {
 	height: 100dvh;
 	transform-style: preserve-3d;
@@ -606,10 +613,6 @@ blockquote {
 .parallax {
 	width: 100%;
 
-	&::before {
-		background-image: var(--background-image);
-	}
-
 	&::after {
 		background-color: var(--background-color);
 	}

assets/css/utils/parallax.css

@@ -1,6 +1,20 @@
 .parallax {
-	background-image: var(--background-image);
-	background-size: cover;
-	background-position: var(--scroll-x) var(--scroll-y);
-	background-repeat: no-repeat;
+	position: relative;
+	overflow: hidden;
+	
+	&::before {
+		content: "";
+		position: absolute;
+		top: 0; 
+		left: 0;
+		width: 100%;
+		height: 150%; 
+		background-image: var(--background-image);
+		background-size: cover;
+		background-position: center top;
+		background-repeat: no-repeat;
+		z-index: -1;
+		transform: translate3d(0, var(--scroll-y, 0px), 0);
+		will-change: transform;
+	}
 }

assets/js/main.js

@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
 }, false);
 
 const update = () => {
+	updateParallax();
 	requestAnimationFrame(update);
 };
 
@@ -28,7 +29,6 @@ const initTopButtons = () => {
 };
 
 const initParallax = () => {
-	window.addEventListener('scroll', updateParallax);
 	updateParallax();
 };
 
@@ -63,17 +63,10 @@ const updateMouse = () => {
 };
 
 const updateParallax = () => {
-	const scrollX = window.scrollX || document.documentElement.scrollLeft;
-	const scrollY = window.scrollY || document.documentElement.scrollTop;
-
 	document.querySelectorAll('.parallax').forEach(parallax => {
 		const rectangle = parallax.getBoundingClientRect();
-		const offsetLeft = -rectangle.left;
-		const offsetTop = -rectangle.top;
-		const relativeScrollX = offsetLeft - scrollX + scrollX/2;
-		const relativeScrollY = offsetTop  - scrollY + scrollY/2;
-
-		parallax.style.setProperty('--scroll-x', `${relativeScrollX}px`);
-		parallax.style.setProperty('--scroll-y', `${relativeScrollY}px`);
+		const factor = 0.5;
+		const scrollY = -rectangle.top * factor;
+		parallax.style.setProperty('--scroll-y', `${scrollY}px`);
 	});
 };