strong - Usando CSS para el efecto de fundido en la carga de la página
style html (3)
¿Se pueden usar las Transiciones CSS para permitir que un párrafo de texto aparezca de manera gradual en la carga de la página?
Realmente me gusta cómo se ve en http://dotmailapp.com/ y me encantaría usar un efecto similar usando CSS.
Nota: el dominio ya se ha comprado y ya no tiene el efecto mencionado. Una copia archivada se puede ver http://dotmailapp.com/ .
Ilustración
Teniendo este marcado:
<div id="test">
<p>This is a test</p>
</div>
Con la siguiente regla 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;
}
¿Cómo se puede activar la transición en la carga?
Método 1:
Si está buscando una transición de auto-invocación, entonces debería usar animaciones CSS3 , no son compatibles también, pero este es exactamente el tipo de cosas para las que fueron diseñadas.
CSS
#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; }
}
Manifestación
Soporte del navegador
Todos los navegadores modernos, IE 10+: http://caniuse.com/#feat=css-animation
Método 2:
Alternativamente, puede usar jQuery (o JS normal, vea el tercer bloque de código) para cambiar la clase en carga:
jQuery
$("#test p").addClass("load");
CSS
#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;
}
JS simple (no en demo)
document.getElementById("test").children[0].className += " load";
Manifestación
Soporte del navegador
Todos los navegadores modernos, IE 10+: http://caniuse.com/#feat=css-transitions
Método 3:
O bien, puede utilizar el método que utiliza .Mail :
jQuery
$("#test p").delay(1000).animate({ opacity: 1 }, 700);
CSS
#test p {
opacity: 0;
font-size: 21px;
margin-top: 25px;
text-align: center;
}
Manifestación
Soporte del navegador
jQuery 1.x : todos los navegadores modernos, IE 6+: http://jquery.com/browser-support/
jQuery 2.x : todos los navegadores modernos, IE 9+: http://jquery.com/browser-support/
Este método es el más compatible, ya que el navegador de destino no necesita admitir transiciones o animaciones CSS3.
En respuesta a la pregunta de @AMK sobre cómo hacer transiciones sin jQuery. Un ejemplo muy simple que tiré juntos. Si tuviera tiempo de pensar en esto un poco más, podría eliminar el javascript por completo:
<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>
Puede usar el atributo onload="" HTML y usar JavaScript para ajustar el estilo de opacidad de su elemento.
Deja tu CSS como propusiste. Edite su código HTML para:
<body onload="document.getElementById(test).style.opacity=''1''">
<div id="test">
<p>This is a test</p>
</div>
</body>
Esto también funciona para fundir la página completa cuando termine de cargar:
HTML:
<body onload="document.body.style.opacity=''1''">
</body>
CSS:
body{
opacity:0;
transition: opacity 2s;
-webkit-transition: opacity 2s; /* Safari */
}
Consulte el sitio web de W3Schools: transitions y un artículo para cambiar estilos con javascript .