Pues eso amig@s,
Si quieren añadir un efecto tipo fade in en vuestra página web, solo es necesario añadir (aparte de cargar la librería jQuery en el <head> el siguiente código antes de finalizar el </body>:
<script type="text/javascript">
$(document).ready(function(){
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').fadeIn(500);
});
</script>
Espero que les resulte útil!.
martes, 12 de noviembre de 2013
lunes, 11 de noviembre de 2013
Como animar una serie de imagenes en HTML5 (Crear una animación tipo gif)
Pues eso amig@s,
Si necesitan realizar una animación en HTML5 cargando una serie de imagenes, al más puro estilo de un GIF animado, con el siguiente código pueden hacerlo:
<html>
<head>
<title>Demo: Crear animación por Edu Arana</title>
<script type='text/javascript'>//<![CDATA[
onload = function startAnimation() {
var frames = document.getElementById("animacion").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
//]]>
</script>
</head>
<body>
<p><div id="animacion">
<img src="anima/1.gif" />
<img src="anima/2.gif" />
<img src="anima/3.gif" />
<img src="anima/4.gif" />
<img src="anima/5.gif" />
</div>
</p>
</body>
</html>
Donde en el DIV animacion insertamos un IMG con la imagen que necesitemos animar. Funciona tanto en IE como así también en Chrome.
Espero les resulte útil.
Salu2.
Si necesitan realizar una animación en HTML5 cargando una serie de imagenes, al más puro estilo de un GIF animado, con el siguiente código pueden hacerlo:
<html>
<head>
<title>Demo: Crear animación por Edu Arana</title>
<script type='text/javascript'>//<![CDATA[
onload = function startAnimation() {
var frames = document.getElementById("animacion").children;
var frameCount = frames.length;
var i = 0;
setInterval(function () {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
}, 100);
}
//]]>
</script>
</head>
<body>
<p><div id="animacion">
<img src="anima/1.gif" />
<img src="anima/2.gif" />
<img src="anima/3.gif" />
<img src="anima/4.gif" />
<img src="anima/5.gif" />
</div>
</p>
</body>
</html>
Donde en el DIV animacion insertamos un IMG con la imagen que necesitemos animar. Funciona tanto en IE como así también en Chrome.
Espero les resulte útil.
Salu2.
lunes, 4 de noviembre de 2013
Como hacer que una imagen parpadeé en Javascript
Con el siguiente código, se puede lograr el efecto de que una imagen con un name concreto cree el efecto de parpadeo:
<script type="text/javascript">
function parpadea() {
var imagen = document.images["parpadear"];imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
}
setInterval("parpadea()", 500); //Aquí definimos el tiempo en milisegundos.
</script>
<img name="parpadear" src="url de la imagen que desean colocar" alt="imagen parpadeante" />
Espero les resulte útil.
Suscribirse a:
Entradas (Atom)