Instax Shop

#instax-landing { /* ha akarod, adhatsz extra háttérszínt, paddinget itt */ } #instax-landing .container { width: 100%; max-width: 900px; margin: 0 auto; box-sizing: border-box; } /* --- Videó --- */ #instax-landing .instax-video-wrap { width: 100%; margin: 0 auto 20px auto; overflow: hidden; } @media (min-width: 1000px) { #instax-landing .instax-video-wrap { width: 171%; margin-left: -35.5%; margin-right: -35.5%; max-width: none; } } #instax-landing .instax-video { display: block; width: 100%; height: auto; max-height: 500px; object-fit: cover; background: #000; border-radius: 0 !important; } @media (max-width: 700px) { #instax-landing .instax-video { max-height: 160px; } } /* Blokkonként stackelt váltás */ #instax-landing .banner-block { width: 100%; position: relative; margin-bottom: 24px; height: 180px; } @media (min-width: 700px) { #instax-landing .banner-block { height: 450px; } } #instax-landing .banner-row { width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.8s; z-index: 1; } #instax-landing .banner-row.active { opacity: 1; pointer-events: auto; z-index: 2; } /* Hero/kiegészítők: 1 banner */ #instax-landing .banner-row.single { display: flex; } #instax-landing .banner-row.single a { width: 100%; height: 100%; display: block; } /* Nyomtató/papír: 2 banner gridben */ #instax-landing .banner-row.double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #instax-landing .banner-row.double a { width: 100%; height: 100%; display: block; } /* Kép */ #instax-landing .banner-img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; border-radius: 0; } #instax-landing .banner-row.double a:nth-child(1) .banner-img { background: #20bec7; } #instax-landing .banner-row.double a:nth-child(2) .banner-img { background: #880064; } #instax-landing .banner-row.single.kiegeszito .banner-img { background: #f9850f; } #instax-landing .banner-row.single.hero .banner-img { background: #fada24; } @media (min-width: 700px) { #instax-landing .banner-row.double { gap: 20px; } } function isMobile() { return window.matchMedia('(max-width: 700px)').matches; } function getVideoHeight() { // Megpróbálja a tényleges magasságot lekérni var video = document.querySelector('#instax-landing .instax-video'); if (video) { return video.offsetHeight || (isMobile() ? 160 : 350); } return isMobile() ? 160 : 350; } function updateScrollSwap() { var videoHeight = getVideoHeight(); // Eredeti scroll váltópontok: 80, 270/500, 460/900 // Ezekhez hozzáadjuk a videó magasságát var heroChange = videoHeight + 80; var duoChange = videoHeight + (isMobile() ? 270 : 500); var kiegChange = videoHeight + (isMobile() ? 460 : 900); var scrollY = window.scrollY; var heroRows = document.querySelectorAll('#instax-landing .hero-block .banner-row.single.hero'); heroRows[0].classList.toggle('active', scrollY = heroChange); var duoRows = document.querySelectorAll('#instax-landing .duo-block .banner-row.double'); duoRows[0].classList.toggle('active', scrollY = duoChange); var kiegRows = document.querySelectorAll('#instax-landing .kieg-block .banner-row.single.kiegeszito'); kiegRows[0].classList.toggle('active', scrollY = kiegChange); } // Azonnali frissítés, scrollra és ablakátméretezésre is document.addEventListener('scroll', updateScrollSwap); window.addEventListener('resize', function() { setTimeout(updateScrollSwap, 100); // Lassabb resize-hoz timeout, hogy a DOM is frissüljön }); window.addEventListener('DOMContentLoaded', function() { setTimeout(updateScrollSwap, 300); // Videó betöltés után is frissít var video = document.querySelector('#instax-landing .instax-video'); if(video){ video.addEventListener('loadeddata', function() { setTimeout(updateScrollSwap, 200); }); } });