Print Shop.

Splash vibrant colors on your shirts with our fun illustrations. These sketches will add pizzazz to your daily wear, making them and you really shine.
  • Client: Print & Drink
  • Category: Web Design
  • Tags: Print, Service
/** * Minimaler, performanter Scramble-Animator ohne Club-Plugin. * Idee: pro Zeichen einen "Reveal-Timestamp" bestimmen und bis dahin Zufallszeichen rotieren. */ (function() { const RANDOM_CHARS = "!-_\\/[]{}—=+*^?#___________0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"; function scrambleTo(el, finalText, duration = 1.2, delay = 0) { const startTime = performance.now() + (delay * 1000); const total = Math.max(finalText.length, (el.textContent||'').length); const from = (el.textContent || '').padEnd(total, ' '); const to = (finalText || '').padEnd(total, ' '); const revealTimes = []; const now = performance.now(); // verteilt die "Aufdeck"-Zeitpunkte pro Zeichen über die Gesamtdauer for (let i = 0; i < total; i++) { const pct = i / (total - 1 || 1); // leicht ungleichmässig, damit es natürlicher wirkt const jitter = (Math.random() - 0.5) * 0.2; const t = Math.max(0, Math.min(1, pct + jitter)); revealTimes[i] = t; } function frame(t) { if (t < startTime) { requestAnimationFrame(frame); return; } const progress = Math.min(1, (t - startTime) / (duration * 1000)); let out = ""; for (let i = 0; i = r) { out += to[i]; } else { // solange noch nicht "aufgedeckt": zufälliges Zeichen out += RANDOM_CHARS[Math.floor(Math.random() * RANDOM_CHARS.length)]; } } el.textContent = out; if (progress { document.querySelectorAll('.gsap-scramble').forEach((el) => { const finalText = el.getAttribute('data-text') || el.textContent.trim(); const duration = parseFloat(el.getAttribute('data-duration')) || 2.4; const delay = parseFloat(el.getAttribute('data-delay')) || 0; const triggerMode = (el.getAttribute('data-trigger') || 'self').toLowerCase(); // Startzustand: zeigt sofort irgendwas Lesbares (optional leer) el.textContent = finalText; // ScrollTrigger einrichten ScrollTrigger.create({ trigger: triggerMode === 'parent' && el.parentElement ? el.parentElement : el, start: "top 85%", // beginnt, wenn das Element in den Viewport kommt once: true, // nur einmal animieren onEnter: () => { // vor Start kurz "verrauschen", damit der Effekt sichtbar ist el.textContent = "".padEnd(finalText.length, ' '); scrambleTo(el, finalText, duration, delay); } }); }); }); })();