pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update index.html

Browse source 
* Usunąłem animacje "Thanos snap" z CSS i JavaScript.
   * Dodałem nowe klasy CSS: fade-out i fade-in, które odpowiadają za płynne zanikanie i pojawianie
     się elementów.
   * Zmodyfikowałem funkcję setLanguage w JavaScript, aby używała tych klas. Teraz, gdy zmieniasz
     język, tekst będzie płynnie zanikał, a następnie pojawiał się w nowym języku.
This commit is contained in:
Paweł Orzech 2025-06-28 01:32:34 +02:00
parent a35939fa5a
commit be24402a04
1 changed files with 18 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
index.html
View file

@ -61,27 +61,14 @@
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* More prominent shadow for active */ box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* More prominent shadow for active */
} }
/* Thanos Snap Animations */ /* Fade animation for language change */
@keyframes snap-out { .fade-out {
0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); } opacity: 0;
100% { opacity: 0; transform: scale(0.5) translateY(50px) rotate(30deg); filter: blur(5px); } transition: opacity 0.3s ease-out;
} }
.fade-in {
@keyframes snap-in { opacity: 1;
0% { opacity: 0; transform: scale(0.5) translateY(-50px) rotate(-30deg); filter: blur(5px); } transition: opacity 0.3s ease-in;
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;
} }
</style> </style>
</head> </head>
@ -144,42 +131,21 @@
elementsToTranslate.forEach(el => { elementsToTranslate.forEach(el => {
const key = el.getAttribute('data-translate-key'); const key = el.getAttribute('data-translate-key');
const currentText = el.innerHTML;
const newText = translations[lang][key]; const newText = translations[lang][key];
// If the text is the same, no animation needed if (el.innerHTML === newText) {
if (currentText === newText) { return; // No change, no animation needed
return;
} }
// Create spans for current text and animate out el.classList.add('fade-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(() => { setTimeout(() => {
el.innerHTML = ''; // Clear after snap-out el.innerHTML = newText;
let newDelay = 0; el.classList.remove('fade-out');
const newChars = newText.split(''); el.classList.add('fade-in');
newChars.forEach((char, index) => { setTimeout(() => {
const span = document.createElement('span'); el.classList.remove('fade-in');
span.className = 'snap-in-char'; }, 300); // Remove fade-in class after animation
span.style.animationDelay = `${newDelay}ms`; }, 300); // Wait for fade-out to complete
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-pl').classList.toggle('active', lang === 'pl');
@ -229,4 +195,4 @@
</script> </script>
</body> </body>
</html> </html>