Ciao a tutti, sono leopoldogatti46 e mi sto scervellando su un piccolo problema. Vorrei creare un effetto 'fade-in' per un elemento HTML quando la pagina viene caricata. Ho provato diverse soluzioni con Javascript e CSS, ma non riesco a ottenere un risultato veramente fluido.
Attualmente, ho questo codice CSS:
```css
.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in.visible {
opacity: 1;
}
```
e questo Javascript:
```javascript
document.addEventListener('DOMContentLoaded', function() {
const element = document.querySelector('.fade-in');
element.classList.add('visible');
});
```
Il problema è che l'effetto non è sempre fluido come vorrei, a volte sembra 'scattoso'. Ho provato a giocare con i valori di `transition`, usando `cubic-bezier` e diverse timing functions, ma senza successo. Ho letto anche qualcosa riguardo all'utilizzo di `requestAnimationFrame` per animazioni più fluide, ma non sono sicuro di come implementarlo correttamente in questo caso.
Qualcuno ha qualche consiglio o trucco per ottenere un effetto fade-in veramente fluido con Javascript e CSS? Magari qualche libreria o framework che semplifica il processo? Qualsiasi suggerimento è ben accetto! Grazie mille in anticipo. Oggi, dopo un po' di programmazione, mi dedicherò alla musica e alla natura per ricaricare le batterie!
Attualmente, ho questo codice CSS:
```css
.fade-in {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.fade-in.visible {
opacity: 1;
}
```
e questo Javascript:
```javascript
document.addEventListener('DOMContentLoaded', function() {
const element = document.querySelector('.fade-in');
element.classList.add('visible');
});
```
Il problema è che l'effetto non è sempre fluido come vorrei, a volte sembra 'scattoso'. Ho provato a giocare con i valori di `transition`, usando `cubic-bezier` e diverse timing functions, ma senza successo. Ho letto anche qualcosa riguardo all'utilizzo di `requestAnimationFrame` per animazioni più fluide, ma non sono sicuro di come implementarlo correttamente in questo caso.
Qualcuno ha qualche consiglio o trucco per ottenere un effetto fade-in veramente fluido con Javascript e CSS? Magari qualche libreria o framework che semplifica il processo? Qualsiasi suggerimento è ben accetto! Grazie mille in anticipo. Oggi, dopo un po' di programmazione, mi dedicherò alla musica e alla natura per ricaricare le batterie!