Skip to content

Commit 5eadc91

Browse files
committed
Fix parallax
1 parent 5f67a9c commit 5eadc91

3 files changed

Lines changed: 45 additions & 35 deletions

File tree

assets/css/theme.css

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,8 @@ body {
111111
line-height: 1.5;
112112
font-size: 1.2rem;
113113
font-weight: 400;
114+
display: grid;
115+
grid-template-columns: 100%;
114116

115117
&:has(header.home) {
116118
background-image: url("/assets/images/background1.svg"), radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
@@ -160,19 +162,25 @@ body {
160162
background-blend-mode: multiply, normal, normal, normal, normal, normal, normal, normal;
161163
}
162164

163-
> .parallax > header {
164-
padding: 1rem;
165-
margin-bottom: 1rem;
165+
> .parallax {
166+
grid-row: 1;
167+
grid-column: 1;
166168

167-
> .button {
168-
position: absolute;
169-
top: 1rem;
170-
left: 1rem;
171-
}
169+
> header {
170+
padding-top: 7rem;
171+
padding-bottom: 1rem;
172+
margin-bottom: 1rem;
172173

173-
.logo {
174-
width: 7rem;
175-
height: auto;
174+
> .button {
175+
position: absolute;
176+
top: 1rem;
177+
left: 1rem;
178+
}
179+
180+
.logo {
181+
width: 7rem;
182+
height: auto;
183+
}
176184
}
177185
}
178186

@@ -250,6 +258,10 @@ td {
250258
}
251259

252260
body > nav.sticky-top {
261+
grid-row: 1;
262+
grid-column: 1;
263+
align-self: start;
264+
z-index: 10;
253265
display: grid;
254266
grid-template-rows: 1fr;
255267
grid-template-columns: 1fr 4fr 1fr;
@@ -289,11 +301,6 @@ body > nav.sticky-top {
289301
}
290302
}
291303

292-
nav.sticky-top + .parallax {
293-
margin-top: -5.5rem;
294-
padding-top: 5rem;
295-
}
296-
297304
header.home {
298305
height: 100dvh;
299306
transform-style: preserve-3d;
@@ -606,10 +613,6 @@ blockquote {
606613
.parallax {
607614
width: 100%;
608615

609-
&::before {
610-
background-image: var(--background-image);
611-
}
612-
613616
&::after {
614617
background-color: var(--background-color);
615618
}

assets/css/utils/parallax.css

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
.parallax {
2-
background-image: var(--background-image);
3-
background-size: cover;
4-
background-position: var(--scroll-x) var(--scroll-y);
5-
background-repeat: no-repeat;
2+
position: relative;
3+
overflow: hidden;
4+
5+
&::before {
6+
content: "";
7+
position: absolute;
8+
top: 0;
9+
left: 0;
10+
width: 100%;
11+
height: 150%;
12+
background-image: var(--background-image);
13+
background-size: cover;
14+
background-position: center top;
15+
background-repeat: no-repeat;
16+
z-index: -1;
17+
transform: translate3d(0, var(--scroll-y, 0px), 0);
18+
will-change: transform;
19+
}
620
}

assets/js/main.js

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ document.addEventListener('DOMContentLoaded', () => {
66
}, false);
77

88
const update = () => {
9+
updateParallax();
910
requestAnimationFrame(update);
1011
};
1112

@@ -28,7 +29,6 @@ const initTopButtons = () => {
2829
};
2930

3031
const initParallax = () => {
31-
window.addEventListener('scroll', updateParallax);
3232
updateParallax();
3333
};
3434

@@ -63,17 +63,10 @@ const updateMouse = () => {
6363
};
6464

6565
const updateParallax = () => {
66-
const scrollX = window.scrollX || document.documentElement.scrollLeft;
67-
const scrollY = window.scrollY || document.documentElement.scrollTop;
68-
6966
document.querySelectorAll('.parallax').forEach(parallax => {
7067
const rectangle = parallax.getBoundingClientRect();
71-
const offsetLeft = -rectangle.left;
72-
const offsetTop = -rectangle.top;
73-
const relativeScrollX = offsetLeft - scrollX + scrollX/2;
74-
const relativeScrollY = offsetTop - scrollY + scrollY/2;
75-
76-
parallax.style.setProperty('--scroll-x', `${relativeScrollX}px`);
77-
parallax.style.setProperty('--scroll-y', `${relativeScrollY}px`);
68+
const factor = 0.5;
69+
const scrollY = -rectangle.top * factor;
70+
parallax.style.setProperty('--scroll-y', `${scrollY}px`);
7871
});
7972
};

0 commit comments

Comments
 (0)