web

dissolvenza del testo 

L'effetto di dissolvenza sul testo è una tecnica molto utilizzata nel web design per creare transizioni fluide e dinamiche. Con HTML, CSS e JavaScript, è possibile ottenere effetti visivi eleganti che migliorano l'esperienza dell'utente.

  • Con CSS, puoi gestire la dissolvenza usando la proprietà opacity combinata con transition o @keyframes per animazioni più avanzate.

  • Con JavaScript, puoi avere un maggiore controllo sull'effetto, modificando gradualmente l'opacità di un elemento con setInterval() o requestAnimationFrame().

          il mio computer  
 

Effetti di dissolvenza sul testo in html, css e javascript

Pubblicato il: 11-6-2025

Ultima Modifica: 11-6-2025

Ecco una guida completa su come creare un effetto di dissolvenza sul testo utilizzando HTML, CSS e JavaScript. Ti mostrerò diverse tecniche con esempi pratici.

Effetto di dissolvenza sul testo con CSS

Metodo con opacity e transition

Puoi creare un effetto di dissolvenza semplice utilizzando la proprietà opacity e transition.

Esempio:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dissolvenza CSS</title>
<style>
.testo {
opacity: 0;
transition: opacity 2s ease-in-out;
}
.testo.mostra {
opacity: 1;
}
</style>
</head>
<body>
<button onclick="document.querySelector('.testo').classList.add('mostra')">Mostra Testo</button>
<p class="testo">Questo testo appare con un effetto di dissolvenza!</p>
</body>
</html>

Spiegazione

  • Il testo parte con opacity: 0.

  • La classe .mostra applica opacity: 1 e grazie alla proprietà transition, il testo si dissolve gradualmente.

Effetto di dissolvenza sul testo con JavaScript e CSS

Per maggiore controllo, puoi usare JavaScript per modificare la trasparenza nel tempo.

Esempio con setInterval:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dissolvenza con JavaScript</title>
<style>
.testo {
opacity: 0;
}
</style>
</head>
<body>
<button onclick="fadeIn(document.querySelector('.testo'))">Mostra Testo</button>
<p class="testo">Testo che appare lentamente!</p>

<script>
function fadeIn(element) {
let opacity = 0;
element.style.opacity = opacity;
let interval = setInterval(() => {
if (opacity < 1) {
opacity += 0.05;
element.style.opacity = opacity;
} else {
clearInterval(interval);
}
}, 100);
}
</script>
</body>
</html>

Spiegazione

  • La funzione fadeIn() aumenta gradualmente opacity con setInterval().

  • Ogni 100ms incrementa opacity di 0.05 fino a raggiungere 1.

Effetto di dissolvenza con keyframes di CSS

Puoi anche usare le animazioni CSS per ottenere un effetto di dissolvenza più fluido.

Esempio con @keyframes:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dissolvenza Keyframes</title>
<style>
.testo {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<p class="testo">Questo testo svanisce gradualmente!</p>
</body>
</html>

Spiegazione

  • L’animazione fadeIn cambia opacity da 0 a 1 in 2 secondi.

  • L’effetto viene attivato automaticamente all’avvio della pagina.

Conclusione

Ora hai diverse tecniche per creare un effetto di dissolvenza sul testo usando CSS e JavaScript. Puoi scegliere il metodo più adatto in base alle esigenze del tuo progetto! 😃