From a9328bf3835634a86a5852ee20c43b244d440fe6 Mon Sep 17 00:00:00 2001 From: Reef Date: Wed, 19 Aug 2026 22:25:55 +0000 Subject: [PATCH] =?UTF-8?q?Remove=20initial=20background=20image=20?= =?UTF-8?q?=E2=80=94=20hero=20starts=20clean=20with=20gradient=20only,=20c?= =?UTF-8?q?ity=20slides=20in=20on=20first=20swap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 32 +++++++++++++++++++------------- 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/script.js b/script.js index c50d8f0..26a3e89 100644 --- a/script.js +++ b/script.js @@ -535,16 +535,15 @@ var si = 0, bg.className = 'hero-bg'; hero.insertBefore(bg, hero.firstChild); } - /* Old slide — starts at current position, slides out right */ - var oldEl = document.createElement('div'); - oldEl.className = 'hero-bg-slide old'; - oldEl.style.backgroundImage = "url('images/city-amsterdam.jpg')"; - bg.appendChild(oldEl); + + var hasExisting = bg.children.length > 0; + /* New slide — starts off-screen right, slides in */ var newEl = document.createElement('div'); - newEl.className = 'hero-bg-slide new'; + newEl.className = 'hero-bg-slide'; newEl.style.backgroundImage = "url('" + heroImages[best.host] + "')"; bg.appendChild(newEl); + /* Label slides in from right */ var label = document.createElement('div'); label.className = 'hero-city-label'; @@ -552,16 +551,23 @@ var si = 0, hero.appendChild(label); /* GSAP timeline — 3x slower */ - gsap.set(oldEl, { x: '0%' }); gsap.set(newEl, { x: '100%' }); gsap.set(label, { x: '150%' }); - var tl = gsap.timeline({ - onComplete: function() { oldEl.remove(); } - }); - tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0) - .to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0) - .to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3); + var tl = gsap.timeline(); + if (hasExisting) { + /* Carousel: old slides out right, new slides in */ + var oldEl = bg.children[0]; + gsap.set(oldEl, { x: '0%' }); + tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0) + .to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0) + .to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3) + .call(function() { oldEl.remove(); }); + } else { + /* First time: just slide new in from right */ + tl.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0) + .to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3); + } }; img.src = heroImages[best.host]; }