Oliver/ODOO4projects.com
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove initial background image — hero starts clean with gradient only, city slides in on first swap

Browse Source
This commit is contained in:
reef
2026-08-19 22:25:55 +00:00
parent 5e315cee0e
commit a9328bf383
1 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+19 -13
View File
@@ -535,16 +535,15 @@ var si = 0,
bg.className = 'hero-bg'; bg.className = 'hero-bg';
hero.insertBefore(bg, hero.firstChild); hero.insertBefore(bg, hero.firstChild);
} }
/* Old slide — starts at current position, slides out right */
var oldEl = document.createElement('div'); var hasExisting = bg.children.length > 0;
oldEl.className = 'hero-bg-slide old';
oldEl.style.backgroundImage = "url('images/city-amsterdam.jpg')";
bg.appendChild(oldEl);
/* New slide — starts off-screen right, slides in */ /* New slide — starts off-screen right, slides in */
var newEl = document.createElement('div'); var newEl = document.createElement('div');
newEl.className = 'hero-bg-slide new'; newEl.className = 'hero-bg-slide';
newEl.style.backgroundImage = "url('" + heroImages[best.host] + "')"; newEl.style.backgroundImage = "url('" + heroImages[best.host] + "')";
bg.appendChild(newEl); bg.appendChild(newEl);
/* Label slides in from right */ /* Label slides in from right */
var label = document.createElement('div'); var label = document.createElement('div');
label.className = 'hero-city-label'; label.className = 'hero-city-label';
@@ -552,16 +551,23 @@ var si = 0,
hero.appendChild(label); hero.appendChild(label);
/* GSAP timeline — 3x slower */ /* GSAP timeline — 3x slower */
gsap.set(oldEl, { x: '0%' });
gsap.set(newEl, { x: '100%' }); gsap.set(newEl, { x: '100%' });
gsap.set(label, { x: '150%' }); gsap.set(label, { x: '150%' });
var tl = gsap.timeline({ var tl = gsap.timeline();
onComplete: function() { oldEl.remove(); } if (hasExisting) {
}); /* Carousel: old slides out right, new slides in */
tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0) var oldEl = bg.children[0];
.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0) gsap.set(oldEl, { x: '0%' });
.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3); 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]; img.src = heroImages[best.host];
} }