/* ANGVIK EIENDOM – SEILET PARALLAX V2 */
.angvik-seilet-parallax-v2 {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: none;
height: 55vh;
min-height: 600px;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
}
/* Større bilde for økt bevegelse */
.angvik-seilet-parallax-v2__image {
position: absolute;
top: -170px;
bottom: -170px;
left: 0;
right: 0;
background-image: url("https://angvikeiendom.no/wp-content/uploads/2021/04/Seilet-Hotell-Eiendom-004.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
transform: translate3d(
0,
var(--seilet-shift, 0px),
0
);
will-change: transform;
pointer-events: none;
}
/* Mobil */
@media (max-width: 768px) {
.angvik-seilet-parallax-v2 {
height: 65vh;
min-height: 450px;
}
}
/* Redusert bevegelse */
@media (prefers-reduced-motion: reduce) {
.angvik-seilet-parallax-v2__image {
transform: none;
will-change: auto;
}
}
(function () {
const banner = document.querySelector(
'.angvik-seilet-parallax-v2'
);
if (!banner) return;
if (window.matchMedia(
'(prefers-reduced-motion: reduce)'
).matches) return;
let ticking = false;
function updateParallax() {
ticking = false;
const rect = banner.getBoundingClientRect();
const viewportHeight = window.innerHeight;
if (
rect.bottom viewportHeight
) return;
/* Beregn posisjon gjennom skjermen */
const progress =
(viewportHeight - rect.top) /
(viewportHeight + rect.height);
/* Mer bevegelse på desktop */
const maxMovement =
window.innerWidth <= 768 ? 85 : 125;
const clampedProgress = Math.max(
0,
Math.min(1, progress)
);
/* Beveg bildet motsatt av scroll */
const movement =
(clampedProgress - 0.5) *
2 * maxMovement;
banner.style.setProperty(
'--seilet-shift',
movement.toFixed(1) + 'px'
);
}
function onScroll() {
if (!ticking) {
ticking = true;
requestAnimationFrame(updateParallax);
}
}
window.addEventListener(
'scroll',
onScroll,
{ passive: true }
);
window.addEventListener(
'resize',
onScroll
);
updateParallax();
})();
