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

Click server card to slide its city into hero bg (no label change)

Browse Source
This commit is contained in:
reef
2026-08-19 22:55:18 +00:00
parent 1c362f4683
commit b5c9361fc9
1 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
script.js
+33 -9
View File
@@ -466,7 +466,21 @@ var si = 0,
}); });
} }
function animateHero(city, image) { /* Click on a server card — slide its city into hero, no label */
var serverCards = document.querySelectorAll('.server-card');
serverCards.forEach(function(card, idx) {
card.addEventListener('click', function() {
var s = SERVERS[idx];
if (!s || !heroImages[s.host]) return;
/* Move golden frame */
serverCards.forEach(function(c) { c.classList.remove('server-best'); });
card.classList.add('server-best');
/* Slide hero bg without label */
animateHero(null, heroImages[s.host], false);
});
});
function animateHero(city, image, showLabel) {
var hero = document.querySelector('.hero'); var hero = document.querySelector('.hero');
if (!hero) return; if (!hero) return;
var bg = hero.querySelector('.hero-bg'); var bg = hero.querySelector('.hero-bg');
@@ -480,23 +494,33 @@ var si = 0,
newEl.className = 'hero-bg-slide'; newEl.className = 'hero-bg-slide';
newEl.style.backgroundImage = "url('" + image + "')"; newEl.style.backgroundImage = "url('" + image + "')";
bg.appendChild(newEl); bg.appendChild(newEl);
var label = document.createElement('div');
var tl = gsap.timeline();
gsap.set(newEl, { x: '100%' });
var label = null;
if (showLabel !== false && city) {
label = document.createElement('div');
label.className = 'hero-city-label'; label.className = 'hero-city-label';
label.innerHTML = 'Our <strong>' + city + '</strong> server fits your location'; label.innerHTML = 'Our <strong>' + city + '</strong> server fits your location';
hero.appendChild(label); hero.appendChild(label);
gsap.set(newEl, { x: '100%' });
gsap.set(label, { x: '150%' }); gsap.set(label, { x: '150%' });
var tl = gsap.timeline(); }
if (hasExisting) { if (hasExisting) {
var oldEl = bg.children[0]; var oldEl = bg.children[0];
gsap.set(oldEl, { x: '0%' }); gsap.set(oldEl, { x: '0%' });
tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0) tl.to(oldEl, { x: '100%', duration: 3, ease: 'power2.out' }, 0)
.to(newEl, { x: '0%', 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) if (label) {
.call(function() { oldEl.remove(); }); tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
}
tl.call(function() { oldEl.remove(); });
} else { } else {
tl.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0) tl.to(newEl, { x: '0%', duration: 3, ease: 'power2.out' }, 0);
.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3); if (label) {
tl.to(label, { x: '0%', duration: 2.5, ease: 'power2.out' }, 0.3);
}
} }
} }