Website Chickago Boys: Startseite, Speisekarte, Impressum/Datenschutz-Entwurf
Statische One-Page-Website im Stil von cravburgers.shop, aber mit eigenem "Fight Night"-Konzept rund um den Boxer-Hahn aus dem Logo: - Startseite mit Knockout-Hero, Favoriten, Wings, Buckets, Take away, Öffnungszeiten mit Live-Status und Bestell-CTAs (Lieferando, Uber Eats, Telefon) - Speisekarte mit allen Gerichten und Preisen (Stand Lieferando 30.09.2026) - Logo als Vektor nachgezeichnet, Speisenfotos freigestellt und als WebP optimiert - Schriften, GSAP und Lenis lokal eingebunden: keine Cookies, kein Tracking - Impressum und Datenschutz als Entwurf mit markierten Platzhaltern Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
ca9d191c3f
commit
554213f71d
40 files changed
+2388
No files matched your search
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* ScrollTrigger 3.13.0
|
||||
* https://gsap.com
|
||||
*
|
||||
* @license Copyright 2025, GreenSock. All rights reserved.
|
||||
* Subject to the terms at https://gsap.com/standard-license.
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
*/
|
||||
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).window=e.window||{})}(this,function(e){"use strict";function _defineProperties(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function r(){return Se||"undefined"!=typeof window&&(Se=window.gsap)&&Se.registerPlugin&&Se}function z(e,t){return~Ye.indexOf(e)&&Ye[Ye.indexOf(e)+1][t]}function A(e){return!!~t.indexOf(e)}function B(e,t,r,n,i){return e.addEventListener(t,r,{passive:!1!==n,capture:!!i})}function C(e,t,r,n){return e.removeEventListener(t,r,!!n)}function F(){return Re&&Re.isPressed||ze.cache++}function G(r,n){function ed(e){if(e||0===e){i&&(Te.history.scrollRestoration="manual");var t=Re&&Re.isPressed;e=ed.v=Math.round(e)||(Re&&Re.iOS?1:0),r(e),ed.cacheID=ze.cache,t&&o("ss",e)}else(n||ze.cache!==ed.cacheID||o("ref"))&&(ed.cacheID=ze.cache,ed.v=r());return ed.v+ed.offset}return ed.offset=0,r&&ed}function J(e,t){return(t&&t._ctx&&t._ctx.selector||Se.utils.toArray)(e)[0]||("string"==typeof e&&!1!==Se.config().nullTargetWarn?console.warn("Element not found:",e):null)}function L(t,e){var r=e.s,n=e.sc;A(t)&&(t=Ce.scrollingElement||Me);var i=ze.indexOf(t),o=n===qe.sc?1:2;~i||(i=ze.push(t)-1),ze[i+o]||B(t,"scroll",F);var a=ze[i+o],s=a||(ze[i+o]=G(z(t,r),!0)||(A(t)?n:G(function(e){return arguments.length?t[r]=e:t[r]})));return s.target=t,a||(s.smooth="smooth"===Se.getProperty(t,"scrollBehavior")),s}function M(e,t,i){function Gd(e,t){var r=Le();t||n<r-s?(a=o,o=e,l=s,s=r):i?o+=e:o=a+(e-a)/(r-l)*(s-l)}var o=e,a=e,s=Le(),l=s,n=t||50,c=Math.max(500,3*n);return{update:Gd,reset:function reset(){a=o=i?0:o,l=s=0},getVelocity:function getVelocity(e){var t=l,r=a,n=Le();return!e&&0!==e||e===o||Gd(e),s===l||c<n-l?0:(o+(i?r:-r))/((i?n:s)-t)*1e3}}}function N(e,t){return t&&!e._gsapAllow&&e.preventDefault(),e.changedTouches?e.changedTouches[0]:e}function O(e){var t=Math.max.apply(Math,e),r=Math.min.apply(Math,e);return Math.abs(t)>=Math.abs(r)?t:r}function P(){(Ae=Se.core.globals().ScrollTrigger)&&Ae.core&&function _integrate(){var e=Ae.core,r=e.bridge||{},t=e._scrollers,n=e._proxies;t.push.apply(t,ze),n.push.apply(n,Ye),ze=t,Ye=n,o=function _bridge(e,t){return r[e](t)}}()}function Q(e){return Se=e||r(),!ke&&Se&&"undefined"!=typeof document&&document.body&&(Te=window,Me=(Ce=document).documentElement,Ee=Ce.body,t=[Te,Ce,Me,Ee],Se.utils.clamp,Be=Se.core.context||function(){},Oe="onpointerenter"in Ee?"pointer":"mouse",Pe=E.isTouch=Te.matchMedia&&Te.matchMedia("(hover: none), (pointer: coarse)").matches?1:"ontouchstart"in Te||0<navigator.maxTouchPoints||0<navigator.msMaxTouchPoints?2:0,De=E.eventTypes=("ontouchstart"in Me?"touchstart,touchmove,touchcancel,touchend":"onpointerdown"in Me?"pointerdown,pointermove,pointercancel,pointerup":"mousedown,mousemove,mouseup,mouseup").split(","),setTimeout(function(){return i=0},500),P(),ke=1),ke}var Se,ke,Te,Ce,Me,Ee,Pe,Oe,Ae,t,Re,De,Be,i=1,Ie=[],ze=[],Ye=[],Le=Date.now,o=function _bridge(e,t){return t},n="scrollLeft",a="scrollTop",He={s:n,p:"left",p2:"Left",os:"right",os2:"Right",d:"width",d2:"Width",a:"x",sc:G(function(e){return arguments.length?Te.scrollTo(e,qe.sc()):Te.pageXOffset||Ce[n]||Me[n]||Ee[n]||0})},qe={s:a,p:"top",p2:"Top",os:"bottom",os2:"Bottom",d:"height",d2:"Height",a:"y",op:He,sc:G(function(e){return arguments.length?Te.scrollTo(He.sc(),e):Te.pageYOffset||Ce[a]||Me[a]||Ee[a]||0})};He.op=qe,ze.cache=0;var E=(Observer.prototype.init=function init(e){ke||Q(Se)||console.warn("Please gsap.registerPlugin(Observer)"),Ae||P();var i=e.tolerance,a=e.dragMinimum,t=e.type,o=e.target,r=e.lineHeight,n=e.debounce,s=e.preventDefault,l=e.onStop,c=e.onStopDelay,u=e.ignore,f=e.wheelSpeed,d=e.event,p=e.onDragStart,g=e.onDragEnd,h=e.onDrag,v=e.onPress,b=e.onRelease,m=e.onRight,y=e.onLeft,x=e.onUp,_=e.onDown,w=e.onChangeX,S=e.onChangeY,k=e.onChange,T=e.onToggleX,E=e.onToggleY,R=e.onHover,D=e.onHoverEnd,I=e.onMove,z=e.ignoreCheck,Y=e.isNormalizer,H=e.onGestureStart,q=e.onGestureEnd,X=e.onWheel,U=e.onEnable,W=e.onDisable,G=e.onClick,V=e.scrollSpeed,K=e.capture,j=e.allowClicks,Z=e.lockAxis,$=e.onLockAxis;function gf(){return xe=Le()}function hf(e,t){return(se.event=e)&&u&&function _isWithin(e,t){for(var r=t.length;r--;)if(t[r]===e||t[r].contains(e))return!0;return!1}(e.target,u)||t&&he&&"touch"!==e.pointerType||z&&z(e,t)}function kf(){var e=se.deltaX=O(me),t=se.deltaY=O(ye),r=Math.abs(e)>=i,n=Math.abs(t)>=i;k&&(r||n)&&k(se,e,t,me,ye),r&&(m&&0<se.deltaX&&m(se),y&&se.deltaX<0&&y(se),w&&w(se),T&&se.deltaX<0!=le<0&&T(se),le=se.deltaX,me[0]=me[1]=me[2]=0),n&&(_&&0<se.deltaY&&_(se),x&&se.deltaY<0&&x(se),S&&S(se),E&&se.deltaY<0!=ce<0&&E(se),ce=se.deltaY,ye[0]=ye[1]=ye[2]=0),(ne||re)&&(I&&I(se),re&&(p&&1===re&&p(se),h&&h(se),re=0),ne=!1),oe&&!(oe=!1)&&$&&$(se),ie&&(X(se),ie=!1),ee=0}function lf(e,t,r){me[r]+=e,ye[r]+=t,se._vx.update(e),se._vy.updateLine truncated
|
||||
|
||||
Vendored
+11
@@ -0,0 +1,11 @@
|
||||
/*!
|
||||
* GSAP 3.13.0
|
||||
* https://gsap.com
|
||||
*
|
||||
* @license Copyright 2025, GreenSock. All rights reserved.
|
||||
* Subject to the terms at https://gsap.com/standard-license.
|
||||
* @author: Jack Doyle, jack@greensock.com
|
||||
*/
|
||||
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).window=t.window||{})}(this,function(e){"use strict";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function r(t){return"string"==typeof t}function s(t){return"function"==typeof t}function t(t){return"number"==typeof t}function u(t){return void 0===t}function v(t){return"object"==typeof t}function w(t){return!1!==t}function x(){return"undefined"!=typeof window}function y(t){return s(t)||r(t)}function P(t){return(i=yt(t,ot))&&ze}function Q(t,e){return console.warn("Invalid property",t,"set to",e,"Missing plugin? gsap.registerPlugin()")}function R(t,e){return!e&&console.warn(t)}function S(t,e){return t&&(ot[t]=e)&&i&&(i[t]=e)||ot}function T(){return 0}function ea(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=gt.length;r--&&!gt[r].targetTest(i););e=gt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Zt(t[r],e)))||t.splice(r,1);return t}function fa(t){return t._gsap||ea(Ot(t))[0]._gsap}function ga(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ha(t,e){return(t=t.split(",")).forEach(e)||t}function ia(t){return Math.round(1e5*t)/1e5||0}function ja(t){return Math.round(1e7*t)/1e7||0}function ka(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),"+"===r?t+i:"-"===r?t-i:"*"===r?t*i:t/i}function la(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function ma(){var t,e,r=dt.length,i=dt.slice(0);for(ct={},t=dt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function na(t){return!!(t._initted||t._startAt||t.add)}function oa(t,e,r,i){dt.length&&!L&&ma(),t.render(e,r,i||!!(L&&e<0&&na(t))),dt.length&&!L&&ma()}function pa(t){var e=parseFloat(t);return(e||0===e)&&(t+"").match(at).length<2?e:r(t)?t.trim():t}function qa(t){return t}function ra(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function ua(t,e){for(var r in e)"__proto__"!==r&&"constructor"!==r&&"prototype"!==r&&(t[r]=v(e[r])?ua(t[r]||(t[r]={}),e[r]):e[r]);return t}function va(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function wa(t){var e=t.parent||I,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||"duration"===r&&i||"ease"===r||(t[r]=e[r])}}($(t.keyframes)):ra;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function ya(t,e,r,i,n){void 0===r&&(r="_first"),void 0===i&&(i="_last");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function za(t,e,r,i){void 0===r&&(r="_first"),void 0===i&&(i="_last");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Aa(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Ba(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Da(t,e,r,i){return t._startAt&&(L?t._startAt.revert(ht):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Fa(t){return t._repeat?Tt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ha(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ia(t){return t._end=ja(t._start+(t._tDur/Math.abs(t._ts||t._rts||U)||0))}function Ja(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=ja(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ia(t),r._dirty||Ba(r,t)),t}function Ka(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ha(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>U)&&e.render(r,!0)),Ba(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-U}}function La(e,r,i,n){return r.parent&&Aa(r),r._start=ja((t(i)?i:i||e!==I?xt(e,i,r):e._time)+r._delay),r._end=ja(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),ya(e,r,"_first","_last",e._sort?"_start":0),bt(r)||(e._recent=r),n||Ka(e,r),e._ts<0&&Ja(e,e._tTime),e}function Ma(t,e){return(ot.ScrollTrigger||Q("scrollTrigger",e))&&ot.ScrollTrigger.create(e,t)}function Na(t,e,r,i,n){return Wt(t,e,n),t._initted?!r&&t._pt&&!L&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==Rt.frame?(dt.push(t),t._lazy=[n,i],1):void 0:1}function Sa(t,e,r,i){var n=t._repeat,a=ja(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:ja(a*(n+1)+t._rDelay*n):a,0<s&&!i&&Ja(t,t._tTime=t._tDur*s),t.parent&&Ia(t),r||Ba(t.parent,t),t}function Ta(t){return t instanceof Qt?Ba(t)Line truncated
|
||||
|
||||
Vendored
Whitespace-only changes.
@@ -0,0 +1,366 @@
|
||||
/* Chickago Boys – Interaktion & Animation */
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
var root = document.documentElement;
|
||||
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
var hasGsap = !!(window.gsap && window.ScrollTrigger);
|
||||
var $ = function (s, r) { return (r || document).querySelector(s); };
|
||||
var $$ = function (s, r) { return Array.prototype.slice.call((r || document).querySelectorAll(s)); };
|
||||
|
||||
if (!hasGsap) root.classList.remove('anim');
|
||||
|
||||
/* ---------- Jahr ---------- */
|
||||
$$('[data-year]').forEach(function (el) { el.textContent = new Date().getFullYear(); });
|
||||
|
||||
/* ---------- Öffnungszeiten (täglich 12–22 Uhr, Zeitzone Berlin) ---------- */
|
||||
var OPEN = 12 * 60, CLOSE = 22 * 60;
|
||||
function berlinNow() {
|
||||
var parts = new Intl.DateTimeFormat('en-US', {
|
||||
timeZone: 'Europe/Berlin', weekday: 'short', hour: '2-digit', minute: '2-digit', hourCycle: 'h23'
|
||||
}).formatToParts(new Date());
|
||||
var map = {};
|
||||
parts.forEach(function (p) { map[p.type] = p.value; });
|
||||
var days = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6 };
|
||||
return { day: days[map.weekday], minutes: parseInt(map.hour, 10) * 60 + parseInt(map.minute, 10) };
|
||||
}
|
||||
function updateOpenState() {
|
||||
var now = berlinNow();
|
||||
var isOpen = now.minutes >= OPEN && now.minutes < CLOSE;
|
||||
var text = isOpen ? 'Jetzt geöffnet · bis 22 Uhr'
|
||||
: now.minutes < OPEN ? 'Geschlossen · öffnet heute um 12 Uhr'
|
||||
: 'Geschlossen · öffnet morgen um 12 Uhr';
|
||||
$$('[data-open-badge]').forEach(function (el) {
|
||||
el.textContent = text;
|
||||
el.classList.toggle('is-open', isOpen);
|
||||
el.classList.toggle('is-closed', !isOpen);
|
||||
});
|
||||
$$('[data-hours] tr').forEach(function (tr) {
|
||||
tr.classList.toggle('is-today', parseInt(tr.getAttribute('data-day'), 10) === now.day);
|
||||
});
|
||||
}
|
||||
updateOpenState();
|
||||
setInterval(updateOpenState, 60000);
|
||||
|
||||
/* ---------- Smooth Scroll (Lenis) ---------- */
|
||||
var lenis = null;
|
||||
if (!reduce && window.Lenis) {
|
||||
lenis = new window.Lenis({ duration: 1.1, smoothWheel: true });
|
||||
if (hasGsap) {
|
||||
lenis.on('scroll', window.ScrollTrigger.update);
|
||||
window.gsap.ticker.add(function (t) { lenis.raf(t * 1000); });
|
||||
window.gsap.ticker.lagSmoothing(0);
|
||||
} else {
|
||||
var raf = function (t) { lenis.raf(t); requestAnimationFrame(raf); };
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
}
|
||||
function navOffset() { return -(($('#nav') || {}).offsetHeight || 0) - 12; }
|
||||
function scrollToTarget(target) {
|
||||
if (lenis) lenis.scrollTo(target, { offset: navOffset(), duration: 1.1 });
|
||||
else target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
|
||||
}
|
||||
document.addEventListener('click', function (e) {
|
||||
var a = e.target.closest && e.target.closest('a[href*="#"]');
|
||||
if (!a) return;
|
||||
var url = new URL(a.href, location.href);
|
||||
if (url.pathname !== location.pathname || !url.hash) return;
|
||||
var target = url.hash === '#top' ? document.body : document.getElementById(decodeURIComponent(url.hash.slice(1)));
|
||||
if (!target) return;
|
||||
e.preventDefault();
|
||||
closeMenu(false);
|
||||
if (url.hash === '#top') { lenis ? lenis.scrollTo(0) : window.scrollTo({ top: 0, behavior: reduce ? 'auto' : 'smooth' }); }
|
||||
else scrollToTarget(target);
|
||||
history.replaceState(null, '', url.hash);
|
||||
});
|
||||
|
||||
/* ---------- Navigation ein-/ausblenden ---------- */
|
||||
var nav = $('#nav');
|
||||
var lastY = window.scrollY;
|
||||
function onScroll() {
|
||||
var y = window.scrollY;
|
||||
if (!nav) return;
|
||||
if (document.body.classList.contains('menu-open')) { lastY = y; return; }
|
||||
if (y > 140 && y - lastY > 6) nav.classList.add('is-hidden');
|
||||
else if (lastY - y > 6 || y < 140) nav.classList.remove('is-hidden');
|
||||
document.body.classList.toggle('nav-visible', !nav.classList.contains('is-hidden') && y > 10);
|
||||
lastY = y;
|
||||
}
|
||||
window.addEventListener('scroll', onScroll, { passive: true });
|
||||
|
||||
/* ---------- Menü ---------- */
|
||||
var btn = $('#menu-btn'), panel = $('#menu-panel'), overlay = $('#menu-overlay');
|
||||
function setLabel(txt) { $$('.menu-label', btn).forEach(function (s) { s.textContent = txt; }); }
|
||||
function openMenu() {
|
||||
document.body.classList.add('menu-open');
|
||||
nav.classList.add('is-open');
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
setLabel('Schließen');
|
||||
if (lenis) lenis.stop();
|
||||
if (hasGsap && !reduce) {
|
||||
window.gsap.fromTo($$('li', panel), { y: 18, opacity: 0 }, { y: 0, opacity: 1, duration: .38, stagger: .06, ease: 'power3.out', delay: .14 });
|
||||
}
|
||||
var first = $('a', panel);
|
||||
if (first) setTimeout(function () { first.focus({ preventScroll: true }); }, 60);
|
||||
}
|
||||
function closeMenu(returnFocus) {
|
||||
if (!document.body.classList.contains('menu-open')) return;
|
||||
document.body.classList.remove('menu-open');
|
||||
nav.classList.remove('is-open');
|
||||
btn.setAttribute('aria-expanded', 'false');
|
||||
setLabel('Menü');
|
||||
if (lenis) lenis.start();
|
||||
if (returnFocus !== false) btn.focus({ preventScroll: true });
|
||||
}
|
||||
if (btn && panel) {
|
||||
btn.addEventListener('click', function () {
|
||||
document.body.classList.contains('menu-open') ? closeMenu() : openMenu();
|
||||
});
|
||||
overlay && overlay.addEventListener('click', function () { closeMenu(); });
|
||||
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeMenu(); });
|
||||
$$('a', panel).forEach(function (a) { a.addEventListener('click', function () { closeMenu(false); }); });
|
||||
}
|
||||
|
||||
/* ---------- Navigation auf dunklen Flächen hell einfärben ---------- */
|
||||
var darkEls = $$('[data-nav-dark]');
|
||||
if (nav && darkEls.length) {
|
||||
var checkDark = function () {
|
||||
var probe = (nav.offsetHeight || 70) / 2;
|
||||
nav.classList.toggle('is-dark', darkEls.some(function (el) {
|
||||
var r = el.getBoundingClientRect(); return r.top <= probe && r.bottom >= probe;
|
||||
}));
|
||||
};
|
||||
window.addEventListener('scroll', checkDark, { passive: true });
|
||||
window.addEventListener('resize', checkDark);
|
||||
checkDark();
|
||||
}
|
||||
|
||||
/* ---------- Mobile Bestell-Leiste ---------- */
|
||||
var orderbar = $('#orderbar');
|
||||
var heroEl = $('.hero') || $('.page-hero');
|
||||
if (orderbar && heroEl && 'IntersectionObserver' in window) {
|
||||
new IntersectionObserver(function (entries) {
|
||||
orderbar.classList.toggle('is-visible', !entries[0].isIntersecting);
|
||||
}, { threshold: 0 }).observe(heroEl);
|
||||
}
|
||||
|
||||
/* ---------- Speisekarte: aktive Kategorie ---------- */
|
||||
var catNav = $('.cat-nav');
|
||||
if (catNav && 'IntersectionObserver' in window) {
|
||||
var links = $$('a', catNav);
|
||||
var list = $('ul', catNav);
|
||||
var setActive = function (id) {
|
||||
links.forEach(function (l) {
|
||||
var on = l.getAttribute('href') === '#' + id;
|
||||
l.classList.toggle('is-active', on);
|
||||
if (on) {
|
||||
l.setAttribute('aria-current', 'true');
|
||||
list.scrollTo({ left: l.offsetLeft - list.clientWidth / 2 + l.offsetWidth / 2, behavior: reduce ? 'auto' : 'smooth' });
|
||||
} else l.removeAttribute('aria-current');
|
||||
});
|
||||
};
|
||||
var io = new IntersectionObserver(function (entries) {
|
||||
entries.forEach(function (en) { if (en.isIntersecting) setActive(en.target.id); });
|
||||
}, { rootMargin: '-35% 0px -60% 0px' });
|
||||
var cats = $$('.menu-cat');
|
||||
cats.forEach(function (s) { io.observe(s); });
|
||||
window.addEventListener('scroll', function () {
|
||||
if (cats[0] && cats[0].getBoundingClientRect().top > window.innerHeight * .4) {
|
||||
links.forEach(function (l) { l.classList.remove('is-active'); l.removeAttribute('aria-current'); });
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
/* ---------- Route (Take away) ---------- */
|
||||
var route = $('[data-route]');
|
||||
var routeState = null;
|
||||
function buildRoute() {
|
||||
if (!route) return null;
|
||||
var svg = $('.route__svg', route), path = $('path', svg), stops = $$('.stop', route);
|
||||
if (!stops.length || window.getComputedStyle(svg).display === 'none') return null;
|
||||
var box = route.getBoundingClientRect();
|
||||
var pts = stops.map(function (s) {
|
||||
var r = s.getBoundingClientRect();
|
||||
return { x: r.left - box.left + r.width * .5, y: r.top - box.top - 34 };
|
||||
});
|
||||
var start = { x: Math.max(40, pts[0].x - box.width * .2), y: pts[0].y + 6 };
|
||||
var d = 'M' + start.x + ' ' + start.y;
|
||||
var prev = start;
|
||||
pts.forEach(function (p, i) {
|
||||
var dx = p.x - prev.x;
|
||||
var lift = i % 2 ? 90 : -70;
|
||||
d += ' C' + (prev.x + dx * .45) + ' ' + (prev.y + lift) + ' ' + (p.x - dx * .45) + ' ' + (p.y - lift) + ' ' + p.x + ' ' + p.y;
|
||||
prev = p;
|
||||
});
|
||||
path.setAttribute('d', d);
|
||||
return { path: path, len: path.getTotalLength(), rider: $('.route__rider', route) };
|
||||
}
|
||||
function placeRider(progress) {
|
||||
if (!routeState) return;
|
||||
var pt = routeState.path.getPointAtLength(routeState.len * progress);
|
||||
var ahead = routeState.path.getPointAtLength(Math.min(routeState.len, routeState.len * progress + 4));
|
||||
var angle = Math.atan2(ahead.y - pt.y, ahead.x - pt.x) * 180 / Math.PI;
|
||||
var w = routeState.rider.offsetWidth, h = routeState.rider.offsetHeight;
|
||||
routeState.rider.style.transform = 'translate(' + (pt.x - w / 2) + 'px,' + (pt.y - h / 2) + 'px) rotate(' + (angle * .25) + 'deg)';
|
||||
}
|
||||
|
||||
/* ---------- Ohne GSAP: fertig ---------- */
|
||||
if (!hasGsap) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
return;
|
||||
}
|
||||
|
||||
var gsap = window.gsap, ST = window.ScrollTrigger;
|
||||
gsap.registerPlugin(ST);
|
||||
var rand = gsap.utils.random;
|
||||
|
||||
function splitWords(el) {
|
||||
(function walk(node) {
|
||||
Array.prototype.slice.call(node.childNodes).forEach(function (ch) {
|
||||
if (ch.nodeType === 3) {
|
||||
var frag = document.createDocumentFragment();
|
||||
ch.textContent.split(/(\s+)/).forEach(function (p) {
|
||||
if (!p) return;
|
||||
if (/^\s+$/.test(p)) frag.appendChild(document.createTextNode(p));
|
||||
else { var s = document.createElement('span'); s.className = 'pw'; s.textContent = p; frag.appendChild(s); }
|
||||
});
|
||||
ch.parentNode.replaceChild(frag, ch);
|
||||
} else if (ch.nodeType === 1 && ch.tagName !== 'BR') walk(ch);
|
||||
});
|
||||
})(el);
|
||||
return $$('.pw', el);
|
||||
}
|
||||
function splitChars(el) {
|
||||
var txt = el.textContent; el.textContent = '';
|
||||
var sr = document.createElement('span'); sr.className = 'sr-only'; sr.textContent = txt; el.appendChild(sr);
|
||||
return txt.split('').map(function (c) {
|
||||
var s = document.createElement('span'); s.className = 'pl'; s.textContent = c === ' ' ? '\u00a0' : c;
|
||||
s.setAttribute('aria-hidden', 'true'); s.style.display = 'inline-block';
|
||||
el.appendChild(s); return s;
|
||||
});
|
||||
}
|
||||
|
||||
if (reduce) {
|
||||
routeState = buildRoute();
|
||||
placeRider(1);
|
||||
return;
|
||||
}
|
||||
|
||||
/* ---- Hero-Intro ---- */
|
||||
var hero = $('.hero');
|
||||
if (hero) {
|
||||
var chars = [];
|
||||
$$('[data-hero-big] .part', hero).forEach(function (p) { chars = chars.concat(splitChars(p)); });
|
||||
var burgerImg = $('.hero__burger img', 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)
|
||||
.fromTo(chars, { scale: 0, opacity: 0, y: function () { return rand(40, 100); }, rotation: function () { return rand(-18, 18); }, transformOrigin: '50% 90%' },
|
||||
{ scale: 1, opacity: 1, y: 0, rotation: 0, duration: .75, stagger: .045, ease: 'back.out(2.2)' }, .05)
|
||||
.fromTo(burgerImg, { scale: .45, y: 140, rotation: -12, opacity: 0 }, { scale: 1, y: 0, rotation: 0, opacity: 1, duration: 1.1, ease: 'back.out(1.5)' }, .3)
|
||||
.fromTo('.hero__wm .wm-fill', { xPercent: -30, opacity: 0, rotation: -8 }, { xPercent: 0, opacity: 1, rotation: 0, duration: .8, ease: 'back.out(1.8)' }, .75)
|
||||
.fromTo($$('[data-sticker]', hero), { '--s': 0 }, { '--s': 1, duration: .6, stagger: .12, ease: 'back.out(3)' }, .9)
|
||||
.fromTo(['.hero__bottom .lead', '.hero__cta'], { y: 30, opacity: 0 }, { y: 0, opacity: 1, duration: .7, stagger: .1, ease: 'power3.out' }, .8)
|
||||
.add(function () {
|
||||
gsap.to(burgerImg, { y: -14, duration: 2.4, yoyo: true, repeat: -1, ease: 'sine.inOut' });
|
||||
});
|
||||
|
||||
if (window.matchMedia('(pointer: fine)').matches) {
|
||||
var qx = gsap.quickTo(burgerImg, 'x', { duration: .8, ease: 'power3.out' });
|
||||
var qr = gsap.quickTo(burgerImg, 'rotation', { duration: .8, ease: 'power3.out' });
|
||||
hero.addEventListener('mousemove', function (e) {
|
||||
var r = hero.getBoundingClientRect();
|
||||
var nx = (e.clientX - r.left) / r.width - .5;
|
||||
qx(nx * 40); qr(nx * 6);
|
||||
});
|
||||
}
|
||||
|
||||
var mm = gsap.matchMedia();
|
||||
mm.add('(min-width: 821px)', function () {
|
||||
var parts = $$('[data-hero-big] .part', hero);
|
||||
gsap.to(parts[0], { xPercent: -10, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
gsap.to(parts[1], { xPercent: 12, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
gsap.to('.hero__burger', { yPercent: -12, ease: 'none', scrollTrigger: { trigger: hero, start: 'top top', end: 'bottom top', scrub: true } });
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- Seiten-Hero (Unterseiten) ---- */
|
||||
var pageHero = $('.page-hero');
|
||||
if (pageHero) {
|
||||
var ph = $('[data-hero-big]', pageHero);
|
||||
if (ph) {
|
||||
var pchars = splitChars(ph);
|
||||
gsap.fromTo(pchars, { scale: 0, opacity: 0, y: function () { return rand(40, 90); }, rotation: function () { return rand(-16, 16); }, transformOrigin: '50% 90%' },
|
||||
{ scale: 1, opacity: 1, y: 0, rotation: 0, duration: .75, stagger: .05, ease: 'back.out(2.2)', delay: .05 });
|
||||
}
|
||||
var phImg = $('.page-hero__img img', pageHero);
|
||||
if (phImg) {
|
||||
gsap.fromTo(phImg, { scale: .5, y: 120, rotation: 10, opacity: 0 }, { scale: 1, y: 0, rotation: 0, opacity: 1, duration: 1.1, ease: 'back.out(1.5)', delay: .25 });
|
||||
gsap.to(phImg, { y: -12, duration: 2.4, yoyo: true, repeat: -1, ease: 'sine.inOut', delay: 1.4 });
|
||||
}
|
||||
}
|
||||
|
||||
/* ---- Wort-Pop für Headlines ---- */
|
||||
$$('[data-pop]').forEach(function (el) {
|
||||
var words = splitWords(el);
|
||||
gsap.fromTo(words,
|
||||
{ opacity: 0, scale: 0, y: function () { return rand(18, 40); }, rotation: function () { return rand(-14, 14); }, transformOrigin: '50% 90%' },
|
||||
{ opacity: 1, scale: 1, y: 0, rotation: 0, duration: .72, stagger: .06, ease: 'back.out(2.35)',
|
||||
scrollTrigger: { trigger: el, start: 'top 88%', once: true } });
|
||||
});
|
||||
|
||||
/* ---- Reveal (nutzt translate/opacity, damit CSS-Rotationen bleiben) ---- */
|
||||
var reveals = $$('[data-reveal]').filter(function (el) { return !el.closest('.hero'); });
|
||||
ST.batch(reveals, {
|
||||
start: 'top 90%', once: true,
|
||||
onEnter: function (batch) {
|
||||
gsap.fromTo(batch, { opacity: 0, '--ry': '40px' }, { opacity: 1, '--ry': '0px', duration: .9, stagger: .1, ease: 'power3.out' });
|
||||
}
|
||||
});
|
||||
|
||||
/* ---- Sticker "aufkleben" ---- */
|
||||
$$('[data-sticker]').filter(function (el) { return !el.closest('.hero'); }).forEach(function (el) {
|
||||
gsap.fromTo(el, { '--s': 0 }, { '--s': 1, duration: .7, ease: 'back.out(3)', scrollTrigger: { trigger: el, start: 'top 88%', once: 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 } });
|
||||
});
|
||||
|
||||
/* ---- Route ---- */
|
||||
if (route) {
|
||||
routeState = buildRoute();
|
||||
ST.create({
|
||||
trigger: route, start: 'top 75%', end: 'bottom 55%', scrub: .6,
|
||||
onUpdate: function (self) { placeRider(self.progress); },
|
||||
onRefresh: function (self) { routeState = buildRoute(); placeRider(self.progress); }
|
||||
});
|
||||
placeRider(0);
|
||||
}
|
||||
|
||||
/* ---- Footer: jonglierende Zutaten ---- */
|
||||
var jug = $('[data-juggle]');
|
||||
if (jug) {
|
||||
var spots = [9, 33, 60, 84];
|
||||
var tls = $$('.juggle', jug).map(function (el, i) {
|
||||
el.style.left = spots[i % spots.length] + '%';
|
||||
var apex = function () { return -Math.min(320, window.innerWidth * rand(.12, .22)); };
|
||||
var t = gsap.timeline({ repeat: -1, repeatRefresh: true, delay: i * .35, paused: true });
|
||||
t.to(el, { y: apex, rotation: function () { return '+=' + rand(180, 520); }, x: function () { return rand(-30, 30); }, duration: function () { return rand(.8, 1.1); }, ease: 'power2.out' })
|
||||
.to(el, { y: 0, duration: function () { return rand(.7, .95); }, ease: 'power2.in' })
|
||||
.to(el, { duration: function () { return rand(.15, .7); } });
|
||||
return t;
|
||||
});
|
||||
ST.create({
|
||||
trigger: jug, start: 'top bottom', end: 'bottom top',
|
||||
onToggle: function (self) { tls.forEach(function (t) { self.isActive ? t.play() : t.pause(); }); }
|
||||
});
|
||||
document.addEventListener('visibilitychange', function () {
|
||||
tls.forEach(function (t) { document.hidden ? t.pause() : (ST.isInViewport(jug) && t.play()); });
|
||||
});
|
||||
}
|
||||
|
||||
window.addEventListener('load', function () { ST.refresh(); });
|
||||
})();
|
||||
Reference in new issue
Block a user