Vamos a programar #20 - SlideShow en JavaScript + CSS
Hola de nuevo a todos, hace algunos días contacté con alguien que me encontré en Internet con la intención de hacernos publicidad mutuamente, a lo mejor ya viste el banner que puse en la esquina superior derecha.
Primeramente creamos una animación a la que llamamos "FadeFromRight", lo que va a hacer es crear el objeto desde la posición -150px con una opacidad del 0 (Transparente) y hará una animación en la que se moverá hasta posición 0 y ademas, su nivel de opacidad sera de 1 (solido).
Después creamos una clase llamada ".FadeImage", en la cual ponemos que la animación que haga la imagen (o lo que sea que haga uso de esta clase), durará 0.5s.
Finalmente definimos un estilo para la etiqueta IMG.
Luego insertaremos las Imágenes que vayamos a usar, Es preferible que todas estén dentro de una capa, luego a cada una de las imágenes que conformaran el Slide Show, les pondremos el mismo nombre de clase, suponiendo que las imágenes que vayamos a usar se llaman Ban1, Ban2, Ban3 y Ban4, el código html para insertarlas luciria como el siguiente:
El código anterior recorrerá todos los elementos que estén en la clase "Banners" y a todos le asignara el estilo "none" que hará que los elementos no se vean, luego comprobará que el valor iterador esté en lo limites de la cantidad de elementos que la clase "Banners" posea, después al final, se establece que la función "ChangeImage" se ejecutará cada 5000ms (5 segundos).
Tras implementar el código anterior obtendremos algo como lo siguiente (Si solo ves cuatro imágenes fijas, prueba actualizar tu navegador):
No está demás recordar que para que esto funcione, necesitamos un navegador no tan viejo, ademas de que se debe de hacer referencia a las imágenes usando su dirección absoluta. Si quieres hacer uso del código así tal cual, debes de asegurarte primero de que las imágenes están en el mismo directorio y que se llaman Ban1, Ban2, etc.
Cómo siempre, el código completo lo puedes descargar desde mi dropbox, recuerda que puedes usarlo, modificarlo o hacerle lo que quieras, si te resulta útil, no olvides mencionar que lo encontraste en el blog de Xwork.
Para terminar. Si no has visitado la página Gent0.com. ¡Qué estás esperando?!, hay buen información acerca de está distro de linux.
Bien, por ahora es todo. Los leo luego.
P,D. H071?? (solo para los que saben).
EL problema es que no encontraba una forma de acomodar todas la cosas que ya había en la pagina principal, ¿Cómo debería acomodar esto?, la opción más sencilla era insertar todas las cosas una tras otra y esperar a que la pagina no se extendiera tanto. Si se pone una imagen diferente para cada página "amiga", si pongo al menos 3, ocuparía un buen espacio.
Para solucionar este problema decidí hacer un pequeño script que se encargue de intercambiar imágenes, así en lugar de poner 4 o 5 imágenes y desplazar todo 600 pixeles hacia abajo, puedo poner n numero de imágenes en un solo espacio de 320 * 110 (o el tamaño que sea la imagen más grande).
Para nuestro ejemplo tomemos las siguientes imágenes:
Al inicio estaba buscando una forma de hacerlo totalmente en javascript, pero alguien me dijo: "Si usas CSS3, es más sencillo". Entonces decidí hacer uso de ambas para lograrlo.
El código CSS.
El código CSS que vamos a usar es el siguiente:
@keyframes FadeFromRight{
from{
right:-150px;
opacity:0
}
to{
right:0;
opacity:1}
}
.FadeImage{
position:relative;
-webkit-animation:FadeFromRight 0.5s;
animation:FadeFromRight 0.5s
}
img{border-style:none}
Primeramente creamos una animación a la que llamamos "FadeFromRight", lo que va a hacer es crear el objeto desde la posición -150px con una opacidad del 0 (Transparente) y hará una animación en la que se moverá hasta posición 0 y ademas, su nivel de opacidad sera de 1 (solido).
Después creamos una clase llamada ".FadeImage", en la cual ponemos que la animación que haga la imagen (o lo que sea que haga uso de esta clase), durará 0.5s.
Finalmente definimos un estilo para la etiqueta IMG.
El código HTML.
Luego insertaremos las Imágenes que vayamos a usar, Es preferible que todas estén dentro de una capa, luego a cada una de las imágenes que conformaran el Slide Show, les pondremos el mismo nombre de clase, suponiendo que las imágenes que vayamos a usar se llaman Ban1, Ban2, Ban3 y Ban4, el código html para insertarlas luciria como el siguiente:
<div> <img class="Banners FadeImage" src = "BAN1.jpg"/> <img class="Banners FadeImage" src = "BAN2.jpg"/> <img class="Banners FadeImage" src = "BAN3.jpg"/> <img class="Banners FadeImage" src = "BAN4.jpg"/> </div>
Con el Código anterior estamos indicando que las 4 imágenes pertenecen a la clase "Banners" y también a la clase "FadeImage", con ello tomará los estilos que definimos antes para "FadeImage" y "IMG".
El Código JavaScript.
Para lograr el efecto que deseamos, hay que modificar los estilos, javascript nos permite hacerlo sin tanto problema. El código que nos permite cambiar los estilo de las imágenes es el siguiente:
var myIndex = 0;
ChangeImage();
function ChangeImage() {
var i;
var x = document.getElementsByClassName("Banners");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(ChangeImage, 5000);
}
El código anterior recorrerá todos los elementos que estén en la clase "Banners" y a todos le asignara el estilo "none" que hará que los elementos no se vean, luego comprobará que el valor iterador esté en lo limites de la cantidad de elementos que la clase "Banners" posea, después al final, se establece que la función "ChangeImage" se ejecutará cada 5000ms (5 segundos).
Tras implementar el código anterior obtendremos algo como lo siguiente (Si solo ves cuatro imágenes fijas, prueba actualizar tu navegador):
No está demás recordar que para que esto funcione, necesitamos un navegador no tan viejo, ademas de que se debe de hacer referencia a las imágenes usando su dirección absoluta. Si quieres hacer uso del código así tal cual, debes de asegurarte primero de que las imágenes están en el mismo directorio y que se llaman Ban1, Ban2, etc.
Cómo siempre, el código completo lo puedes descargar desde mi dropbox, recuerda que puedes usarlo, modificarlo o hacerle lo que quieras, si te resulta útil, no olvides mencionar que lo encontraste en el blog de Xwork.
Para terminar. Si no has visitado la página Gent0.com. ¡Qué estás esperando?!, hay buen información acerca de está distro de linux.
Bien, por ahora es todo. Los leo luego.
P,D. H071?? (solo para los que saben).
No hay comentarios.