From a35939fa5a66a8361d82b2c50512ca01c7a78ed5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Orzech?= Date: Sat, 28 Jun 2025 01:31:12 +0200 Subject: [PATCH] Update index.html MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Animacje "Thanos Snap": Dodałem nowe animacje CSS (@keyframes snap-out i @keyframes snap-in) oraz logikę JavaScript, która: * Przy zmianie języka, każda litera obecnego tekstu "rozpada się" (znika z efektem rozmycia i zmniejszenia). * Następnie, po krótkim opóźnieniu, litery nowego tekstu "pojawiają się" (z efektem rozmycia i powiększenia). * Animacja jest kaskadowa, co oznacza, że każda litera animuje się z niewielkim opóźnieniem w stosunku do poprzedniej, tworząc płynny efekt. --- index.html | 67 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 65 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 413b037..812f4f1 100644 --- a/index.html +++ b/index.html @@ -60,6 +60,29 @@ filter: grayscale(0); box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* More prominent shadow for active */ } + + /* Thanos Snap Animations */ + @keyframes snap-out { + 0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); } + 100% { opacity: 0; transform: scale(0.5) translateY(50px) rotate(30deg); filter: blur(5px); } + } + + @keyframes snap-in { + 0% { opacity: 0; transform: scale(0.5) translateY(-50px) rotate(-30deg); filter: blur(5px); } + 100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); filter: blur(0); } + } + + .snap-out-char { + display: inline-block; + animation: snap-out 0.6s forwards; + will-change: transform, opacity, filter; + } + + .snap-in-char { + display: inline-block; + animation: snap-in 0.6s forwards; + will-change: transform, opacity, filter; + } @@ -116,9 +139,49 @@ const setLanguage = (lang) => { document.documentElement.lang = lang; document.title = translations[lang].page_title; - document.querySelectorAll('[data-translate-key]').forEach(el => { - el.innerHTML = translations[lang][el.getAttribute('data-translate-key')]; + + const elementsToTranslate = document.querySelectorAll('[data-translate-key]'); + + elementsToTranslate.forEach(el => { + const key = el.getAttribute('data-translate-key'); + const currentText = el.innerHTML; + const newText = translations[lang][key]; + + // If the text is the same, no animation needed + if (currentText === newText) { + return; + } + + // Create spans for current text and animate out + let delay = 0; + const chars = currentText.split(''); + el.innerHTML = ''; // Clear current content + + chars.forEach((char, index) => { + const span = document.createElement('span'); + span.className = 'snap-out-char'; + span.style.animationDelay = `${delay}ms`; + span.textContent = char; + el.appendChild(span); + delay += 30; // Delay for each character + }); + + // After animation out, replace with new text and animate in + setTimeout(() => { + el.innerHTML = ''; // Clear after snap-out + let newDelay = 0; + const newChars = newText.split(''); + newChars.forEach((char, index) => { + const span = document.createElement('span'); + span.className = 'snap-in-char'; + span.style.animationDelay = `${newDelay}ms`; + span.textContent = char; + el.appendChild(span); + newDelay += 30; // Delay for each new character + }); + }, delay + 100); // Wait for all snap-out animations + a little extra }); + document.getElementById('lang-pl').classList.toggle('active', lang === 'pl'); document.getElementById('lang-en').classList.toggle('active', lang === 'en'); localStorage.setItem('language', lang);