Si possono usare transizioni CSS per permettere la dissolvenza di un paragrafo di testo al caricamento della pagina?
Mi piace molto come appariva su http://dotmailapp.com/ e mi piacerebbe usare un effetto simile usando i CSS. Il dominio è stato acquistato e non ha più l'effetto menzionato. Una copia archiviata può essere vista su Wayback Machine.
Avendo questo markup:
<div id="test">
<p>This is a test</p>
</div>
Con la seguente regola CSS:
#test p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
Come può essere innescata la transizione sul carico?
Se stai cercando una transizione auto-invitante allora dovresti usare CSS 3 Animazioni. Anche loro non sono supportate, ma questo è esattamente il tipo di cose per cui sono state fatte.
#test p {
margin-top: 25px;
font-size: 21px;
text-align: center;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
Tutti i browser moderni e Internet Explorer 10 (e successivi): http://caniuse.com/#feat=css-animation
br/>
In alternativa, puoi usare jQuery (o semplice JavaScript; vedi il terzo blocco di codice) per cambiare la classe al caricamento:
$("#test p").addClass("load");
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
-webkit-transition: opacity 2s ease-in;
-moz-transition: opacity 2s ease-in;
-ms-transition: opacity 2s ease-in;
-o-transition: opacity 2s ease-in;
transition: opacity 2s ease-in;
}
#test p.load {
opacity: 1;
}
document.getElementById("test").children[0].className += " load";
Tutti i browser moderni e Internet Explorer 10 (e successivi): http://caniuse.com/#feat=css-transitions
br />
Oppure, puoi usare il metodo che usa .Mail:
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
jQuery 1.x: Tutti i browser moderni e Internet Explorer 6 (e successivi): http://jquery.com/browser-support/ br /> jQuery 2.x: Tutti i browser moderni e Internet Explorer 9 (e successivi): http://jquery.com/browser-support/
Questo metodo è il più cross-compatibile in quanto il browser di destinazione non ha bisogno di supportare CSS 3 transizioni o animazioni.
Puoi usare l'attributo HTML onload=""
e usare JavaScript per regolare lo stile di opacità del tuo elemento.
Lascia il tuo CSS come hai proposto. Modifica il tuo codice HTML per:
<body onload="document.getElementById(test).style.opacity='1'">
<div id="test">
<p>This is a test</p>
</div>
</body>
Questo funziona anche per mettere in dissolvenza la pagina completa quando finisce il caricamento:
HTML:
<body onload="document.body.style.opacity='1'">
</body>
CSS:
body{
opacity: 0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Controlla il sito web di W3Schools: transizioni e un articolo per cambiare gli stili con JavaScript.
In risposta alla domanda di @A.M.K'su come fare transizioni senza jQuery. Un esempio molto semplice che ho messo insieme. Se avessi il tempo di pensarci ancora un po', potrei essere in grado di eliminare del tutto il codice JavaScript:
<style>
body {
background-color: red;
transition: background-color 2s ease-in;
}
</style>
<script>
window.onload = function() {
document.body.style.backgroundColor = '#00f';
}
</script>
<body>
<p>test</p>
</body>