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

68
index.html
View file

@ -61,27 +61,14 @@
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); }
/* Fade animation for language change */
.fade-out {
opacity: 0;
transition: opacity 0.3s ease-out;
}
@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;
.fade-in {
opacity: 1;
transition: opacity 0.3s ease-in;
}
</style>
</head>
@ -144,42 +131,21 @@
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;
if (el.innerHTML === newText) {
return; // No change, no animation needed
}
// 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
el.classList.add('fade-out');
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
el.innerHTML = newText;
el.classList.remove('fade-out');
el.classList.add('fade-in');
setTimeout(() => {
el.classList.remove('fade-in');
}, 300); // Remove fade-in class after animation
}, 300); // Wait for fade-out to complete
});
document.getElementById('lang-pl').classList.toggle('active', lang === 'pl');