Redesign: kräftige Farben, Feuer-Formen, Texturen, 3D-Schrift und explodierende Zutaten
- Hero, Speisekarte-Kopf und Hunger-Abschnitt auf rotem Feuerwirbel mit Spotlight, Rasterpunkten und Körnung - Flammen-Übergänge (animiert), gerissene Papierkanten, Papier-Textur für Karten - 3D-Extrusion für Headlines, Buttons/Sticker mit Tiefe und Glanz, 3D-Neigung der Karten - Champions als Plakat-Karten, Wings im Crunch-Time-Stil, Buckets mit Glut und Funken - Zutaten (Wikimedia Commons, freigestellt) fliegen um Burger/Wings und explodieren beim Scrollen - Bildnachweise der Zutaten im Impressum Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rootandClaude Opus 5.5 committed
1 parent
da134cd0bb
commit
12d8f41fd8
33 files changed
+646
-230
No files matched your search
+131
-1
@@ -171,6 +171,103 @@
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
/* ---------- Zutaten rund ums Essen (Explosion beim Scrollen) ----------
|
||||
Jede Zutat: [Datei, x %, y % (relativ zur Essens-Box), Größe % der Box, Drehung, Ebene, auch mobil, gespiegelt]
|
||||
Ebenen: b = hinter dem Essen (leicht unscharf), f = davor */
|
||||
var BITS = 'assets/img/bits/';
|
||||
var PRESETS = {
|
||||
burger: [
|
||||
['lettuce-2', 114, 30, 20, 40, 'b', 0], ['tomato', -10, 40, 16, -12, 'b', 1], ['onion-2', 106, 88, 14, 0, 'b', 0],
|
||||
['jalapeno-1', 8, -8, 11, 30, 'b', 1], ['bacon', 24, -16, 20, -30, 'b', 0, 1], ['sesame-2', 64, -14, 4, 40, 'b', 0],
|
||||
['lettuce-1', -14, 70, 24, -25, 'f', 1], ['tomato', 110, 60, 20, 18, 'f', 1, 1], ['bacon', 100, 8, 24, 22, 'f', 1],
|
||||
['onion-1', -12, 12, 18, -16, 'f', 1], ['pickle', 22, 104, 13, 8, 'f', 0], ['jalapeno-2', 82, 106, 12, -24, 'f', 1],
|
||||
['sesame-1', 36, -8, 3.5, 0, 'f', 0], ['sesame-1', 50, -20, 3, 80, 'f', 0, 1]
|
||||
],
|
||||
'burger-sm': [
|
||||
['onion-2', 6, 10, 15, -14, 'b', 1], ['bacon', 94, 6, 20, 24, 'b', 1],
|
||||
['lettuce-1', -4, 70, 20, -20, 'f', 1], ['tomato', 102, 64, 17, 18, 'f', 1], ['pickle', 72, 102, 11, 8, 'f', 0], ['sesame-1', 30, -4, 3, 0, 'f', 0]
|
||||
],
|
||||
'chicken-sm': [
|
||||
['bacon', 98, 10, 20, 24, 'b', 1, 1], ['crumb-1', 6, 4, 8, 0, 'b', 0], ['crumb-2', 88, -4, 7, 30, 'b', 0],
|
||||
['lettuce-2', -6, 70, 20, -24, 'f', 1], ['tomato', 104, 64, 15, 18, 'f', 1], ['crumb-3', 26, 104, 8, 10, 'f', 0], ['crumb-4', 66, 104, 8, 60, 'f', 0]
|
||||
],
|
||||
'wrap-sm': [
|
||||
['jalapeno-2', 6, 6, 11, -20, 'b', 1], ['onion-2', 96, 6, 13, 20, 'b', 1],
|
||||
['lettuce-3', -8, 70, 20, -18, 'f', 1], ['tomato', 104, 64, 15, 22, 'f', 1], ['crumb-5', 28, 104, 8, 0, 'f', 0], ['jalapeno-1', 74, 104, 9, 40, 'f', 0]
|
||||
],
|
||||
wings: [
|
||||
['crumb-6', 4, 30, 8, 0, 'b', 0], ['crumb-7', 96, 18, 7, 40, 'b', 1], ['chili', 100, 72, 18, 20, 'b', 0], ['jalapeno-1', -4, 62, 11, -30, 'b', 1],
|
||||
['crumb-1', 12, 4, 9, 10, 'f', 1], ['crumb-2', 32, -8, 7, 50, 'f', 1], ['crumb-3', 58, -10, 8, 90, 'f', 1], ['crumb-4', 84, 2, 8, 120, 'f', 1],
|
||||
['crumb-5', 104, 40, 7, 0, 'f', 0], ['crumb-8', -4, 88, 8, 70, 'f', 0], ['jalapeno-2', 88, 102, 11, -10, 'f', 1], ['crumb-2', 46, 104, 6, 30, 'f', 0, 1]
|
||||
]
|
||||
};
|
||||
var mobileBits = window.matchMedia('(max-width: 820px)').matches;
|
||||
var blasts = $$('[data-blast]').map(function (box) {
|
||||
var set = PRESETS[box.getAttribute('data-blast')];
|
||||
if (!set) return null;
|
||||
var lazy = box.getAttribute('data-blast-mode') !== 'hero';
|
||||
var holder = document.createElement('span');
|
||||
holder.className = 'blast__bits';
|
||||
holder.setAttribute('aria-hidden', 'true');
|
||||
var bits = [];
|
||||
set.forEach(function (b) {
|
||||
if (mobileBits && !b[6]) return;
|
||||
var el = document.createElement('span');
|
||||
el.className = 'bit bit--' + b[5];
|
||||
el.style.left = b[1] + '%'; el.style.top = b[2] + '%'; el.style.width = b[3] + '%';
|
||||
var inner = document.createElement('span'); inner.className = 'bit__in';
|
||||
var img = document.createElement('img');
|
||||
img.alt = ''; img.decoding = 'async'; img.draggable = false;
|
||||
if (lazy) img.loading = 'lazy';
|
||||
img.style.rotate = b[4] + 'deg';
|
||||
if (b[7]) img.style.scale = '-1 1';
|
||||
img.onerror = function () { el.remove(); };
|
||||
// Größe als Fläche: lange, schmale Zutaten (Salatblatt, Bacon) wirken so gleich groß wie runde
|
||||
img.onload = function () {
|
||||
var ratio = img.naturalWidth / img.naturalHeight;
|
||||
el.style.width = (b[3] * Math.sqrt(ratio)).toFixed(2) + '%';
|
||||
};
|
||||
img.src = BITS + b[0] + '.webp';
|
||||
inner.appendChild(img); el.appendChild(inner); holder.appendChild(el);
|
||||
bits.push({ el: el, inner: inner, img: img, x: b[1], y: b[2], layer: b[5] });
|
||||
});
|
||||
box.appendChild(holder);
|
||||
return { box: box, bits: bits, hero: !lazy };
|
||||
}).filter(Boolean);
|
||||
|
||||
/* ---------- Funken (Buckets) ---------- */
|
||||
if (!reduce) {
|
||||
$$('[data-sparks]').forEach(function (wrap) {
|
||||
for (var i = 0; i < 22; i++) {
|
||||
var sp = document.createElement('i');
|
||||
sp.style.left = (Math.random() * 100).toFixed(1) + '%';
|
||||
sp.style.setProperty('--sz', (2 + Math.random() * 3.5).toFixed(1) + 'px');
|
||||
sp.style.setProperty('--d', (4 + Math.random() * 5).toFixed(2) + 's');
|
||||
sp.style.setProperty('--dl', (-Math.random() * 9).toFixed(2) + 's');
|
||||
sp.style.setProperty('--dx', ((Math.random() - .5) * 140).toFixed(0) + 'px');
|
||||
sp.style.setProperty('--h', (300 + Math.random() * 600).toFixed(0) + 'px');
|
||||
wrap.appendChild(sp);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- 3D-Neigung der Karten (nur Maus) ---------- */
|
||||
if (!reduce && window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
|
||||
$$('[data-tilt]').forEach(function (card) {
|
||||
card.addEventListener('pointermove', function (e) {
|
||||
var r = card.getBoundingClientRect();
|
||||
var nx = (e.clientX - r.left) / r.width - .5, ny = (e.clientY - r.top) / r.height - .5;
|
||||
card.classList.add('is-tilting');
|
||||
card.style.setProperty('--ty', (nx * 14).toFixed(2) + 'deg');
|
||||
card.style.setProperty('--tx', (-ny * 12).toFixed(2) + 'deg');
|
||||
});
|
||||
card.addEventListener('pointerleave', function () {
|
||||
card.classList.remove('is-tilting');
|
||||
card.style.setProperty('--tx', '0deg'); card.style.setProperty('--ty', '0deg');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ---------- Route (Take away) ---------- */
|
||||
var route = $('[data-route]');
|
||||
var routeState = null;
|
||||
@@ -252,7 +349,7 @@
|
||||
if (hero) {
|
||||
var chars = [];
|
||||
$$('[data-hero-big] .part', hero).forEach(function (p) { chars = chars.concat(splitChars(p)); });
|
||||
var burgerImg = $('.hero__burger img', hero);
|
||||
var burgerImg = $('.hero__burger .blast__food', hero);
|
||||
var tl = gsap.timeline({ delay: .05 });
|
||||
tl.set($$('[data-intro]', hero), { opacity: 1 })
|
||||
.fromTo('.hero__eyebrow', { y: 24, opacity: 0 }, { y: 0, opacity: 1, duration: .5, ease: 'power3.out' }, 0)
|
||||
@@ -324,6 +421,39 @@
|
||||
gsap.fromTo(el, { '--s': 0 }, { '--s': 1, duration: .7, ease: 'back.out(3)', scrollTrigger: { trigger: el, start: 'top 88%', once: true } });
|
||||
});
|
||||
|
||||
/* ---- Zutaten: schweben, beim Laden aus dem Essen platzen, beim Scrollen wegfliegen ---- */
|
||||
blasts.forEach(function (bl) {
|
||||
var vec = function (b) {
|
||||
var w = bl.box.offsetWidth, h = bl.box.offsetHeight;
|
||||
return { x: (b.x - 50) / 100 * w, y: (b.y - 50) / 100 * h };
|
||||
};
|
||||
bl.bits.forEach(function (b, i) {
|
||||
gsap.to(b.img, { y: rand(-16, -8), rotation: rand(-10, 10), duration: rand(1.8, 3.2), yoyo: true, repeat: -1, ease: 'sine.inOut', delay: rand(0, 1.5) });
|
||||
var spin = rand(120, 300) * (i % 2 ? 1 : -1);
|
||||
var grow = b.layer === 'b' ? 1.05 : 1.35;
|
||||
if (bl.hero) {
|
||||
gsap.from(b.inner, { x: function () { return -vec(b).x; }, y: function () { return -vec(b).y; }, scale: .2, opacity: 0, rotation: -spin / 2, duration: 1.2, ease: 'back.out(1.3)', delay: .55 + i * .035 });
|
||||
gsap.to(b.el, {
|
||||
x: function () { return vec(b).x * 1.7; }, y: function () { return vec(b).y * 1.7 - 80; },
|
||||
rotation: spin, scale: grow, ease: 'power1.in',
|
||||
scrollTrigger: { trigger: bl.box.closest('section') || bl.box, start: 'top top', end: 'bottom top', scrub: .6, invalidateOnRefresh: true }
|
||||
});
|
||||
} else {
|
||||
var tl = gsap.timeline({ scrollTrigger: { trigger: bl.box, start: 'top 95%', end: 'bottom 5%', scrub: .7, invalidateOnRefresh: true } });
|
||||
tl.fromTo(b.el, { x: function () { return -vec(b).x * .6; }, y: function () { return -vec(b).y * .6; }, scale: .4, opacity: 0, rotation: -spin / 3 },
|
||||
{ x: 0, y: 0, scale: 1, opacity: 1, rotation: 0, duration: .42, ease: 'power2.out' })
|
||||
.to(b.el, { duration: .12 })
|
||||
.to(b.el, { x: function () { return vec(b).x * 1.3; }, y: function () { return vec(b).y * 1.3 - 40; }, scale: grow, rotation: spin, duration: .46, ease: 'power2.in' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/* ---- Feuerwirbel dreht sich langsam mit ---- */
|
||||
$$('[data-swirl]').forEach(function (sw) {
|
||||
var sec = sw.closest('section') || sw.parentNode;
|
||||
gsap.fromTo(sw, { rotation: -12 }, { rotation: 28, ease: 'none', scrollTrigger: { trigger: sec, start: 'top bottom', end: 'bottom top', scrub: true } });
|
||||
});
|
||||
|
||||
/* ---- Parallax Fotoband ---- */
|
||||
$$('[data-parallax]').forEach(function (img) {
|
||||
gsap.fromTo(img, { yPercent: -7 }, { yPercent: 7, ease: 'none', scrollTrigger: { trigger: img.parentNode, start: 'top bottom', end: 'bottom top', scrub: true } });
|
||||
|
||||
Reference in new issue
Block a user