Mostrando entradas con la etiqueta transiciones. Mostrar todas las entradas
Mostrando entradas con la etiqueta transiciones. Mostrar todas las entradas

martes, 12 de abril de 2011

Más transiciones, sliders y slideshows - Vagabundia


Esta es una variación del ejemplo anterior donde se utilizaban transiciones para crear algo similar a un slider de imágenes.



En este caso, en lugar de desplazar el contenedor, intentaremos que las imágenes se muestren con un efecto de fade y por lo tanto, aunque los principios son los mismos, la forma de detectar las cosas variará y necesitaremos más datos para identificar cada imagen.




Otra vez, armamos una lista con imágenes del mismo tamaño con una serie de enlaces debajo de ella:
<div id="demoANIM2">
<div id="demoANIM2imagenes">
<img id="img_1" src="URL_IMAGEN1" class="visible" />
<img id="img_2" src="URL_IMAGEN2" class="novisible" />

<img id="img_3" src="URL_IMAGEN3" class="novisible" />
<-- agregamos todas las que se nos ocurran (en el ejemplo hay siete) -->
<img id="img_7" src="URL_IMAGEN7" class="novisible" />
</div>
</div>

<div id="demoANIM2links">
<a onclick="srcdemoANIM2(1);" href="javascript:void(0);">1</a>
<a onclick="srcdemoANIM2(2);" href="javascript:void(0);">2</a>
<a onclick="srcdemoANIM2(3);" href="javascript:void(0);">3</a>

<-- agregamos un enlace para cada una de las imágenes -->
<a onclick="srcdemoANIM7(7);" href="javascript:void(0);">7</a>
</div>


La diferencia básica es que acá le agregamos un ID distinto a cada imagen y una clase que será class="visible" en la primera o en aquella que querramos mostrar por defecto y class="novisible" en el resto de ellas.


Por supuesto, el CSS que puede ir antes que todo eso o en el HEAD de nuestro sitio:
<style>
#demoANIM2 { /* es el DIV contenedor */
/* lo dimensiono del mismo tamaño que la imagen (en este ejemplo de 500x375) */
height: 375px;
width: 500px;
margin: 0 auto; /* lo centro */
overflow: hidden; /* impido que se deborde */
position: relative; /* establezco esta propiedad para poder ubicar las imágenes de manera absoluta */
}
#demoANIM2imagenes { /* es el contendor interno donde están las imágenes */
/* lo fijo arriba */
position:absolute;
left: 0;
top: 0;
/* le doy el tamaño de cada imagen */
height: 375px;
width: 500px;
/* y le digo que cualquier cambio sea animado */
-moz-transition:all 1s ease-in-out;
-webkit-transition:all 1s.ease-in-out;
-o-transition:all 1s.ease-in-out;
transition:all 1s ease-in-out;
}
#demoANIM2imagenes img { /* fuerzo a que las imágenes se vean todas iguales */
height: 375px;
width: 500px;
}
#demoANIM2imagenes img.visible { /* la imagen es visible */
opacity:1;
filter: alpha(opacity=100);
}
#demoANIM2imagenes img.novisible { /* la imagen está oculta */
opacity:0;
filter: alpha(opacity=0);
}
/* y le pongo un poc de estilo a los numeritos que sirven de enlace */
#demoANIM2links {
border-bottom: 1px solid #345;
margin: 0 auto;
padding: 10px 0;
text-align: center;
width: 500px;
}
#demoANIM2links a {
background-color: #345;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 0 4px #ABC inset;
margin: 0 2px;
padding: 4px 8px;
}
#demoANIM2links a:hover {
box-shadow: 0 0 8px #ABC inset;
color: #FFF;
}
</style>
Lo que haremos para que esto funcione como slideshow es variar la opacidad de las imágenes permutando su clase y eso lo haremos con JavaScript:
<script>
//<![CDATA[
// establezco cuál es la imagen visible inicial
var imgvisible = "img_7";

function srcdemoANIM2(num) {
// la imagen a ser mostrada
var id = "img_" + num;
var mostrar = document.getElementById(id);
// la que ahora esta visible
var actual = document.getElementById(imgvisible);
// si son la misma no hago nada
if(mostrar==actual) {return false;}
// permutos su clase ocultando la visible y mostrando otra
actual.className="novisible";
mostrar.className="visible";
// y guardo ese dato
imgvisible = id;
//]]>
</script>
En Firefox 4, Safari, Chrome y Opera veremos como las imágenes aparecencon un efecto de fade y en el resto de los navegadores se mostrarán de manera simple.





















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:

martes, 5 de abril de 2011

Transiciones con CSS e imágenes - Vagabundia


Hay muchas ideas y demos dando vuelta por la web que muestran lo que puede hacerse con las transiciones; por lo general, la mayoría de ellos siempre hablan de Chrome pero basta agregar los prefijos adecuados para que tambien funcionen en Opera y Firefox 4. Estos son algunos ejemplos que nos permiten generar efectos con imágenes. Pero hay muchos más.




En todos ellos, el HTML es similar y tiene este esquema:
<div class="demoIMG">
  <img class="novisible" src="URL_UNA_IMAGEN" />
  <img class="visible" src="URL_OTRA_IMAGEN" />
</div>
En un DIV normal, colocamos dos imágenes a las que le agregamos clases y definimos sus reglas generales:
<style>

  .demoIMG { /* el rectángulo contenedor */
    position:relative; /* indicamos esto para poder posicionar su contenido de maera absoluta */
    height:330px; /* le damos una cierta altura */
    margin:0 auto; /* lo centramos */
    width:500px; /* le damos un cierto ancho */
  }
  .demoIMG img { /* el contenido */
    left: 0; /* posición izquierda */
    position:absolute; /* indicamos que su posición es absoluta con respecto al contenedor */
    top: 0; /* posición superior */
  }
  /* y ponemos propiedades en las clases de cada imagen */
  /* la primera no será visible por defecto */
  .demoIMG img.novisible {opacity:0;filter:alpha(opacity=0);}
  /* y se verá cuando pongamos el cursor encima del DIV */
  .demoIMG:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
  /* la segunda se ocultara siempre que pongamos el cursor encima del DIV o de la imagen */
  .demoIMG:hover img.visible {opacity:0;filter:alpha(opacity=0);}
  .demoIMG img.visible:hover {opacity:0;filter:alpha(opacity=0);}  
</style>
Si sólo pusiéramos eso, veríamos una imagen, la que tiene la clase visible; la otra estaría debajo ya que ambas ocupan la misma posición.



Poniendo el cursor encima, cambian:




Agregando las propiedades de transición, haremos lo mismo pero animando ese cambio de opacidad así que sólo agregamos la propiedad a todas las imágenes:
#demoIMG img {
  .......
  /* esto, hará que cualquier cambio en las imágenes, se muestren con una animación */
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}



Y jugamos un poco, agregando transformaciones en una o en ambas imágenes.



En este otro ejemplo, al cambio de la opacidad anterior, le sumamos una tranformación de escala así que cuando permuten, lo harán "aumentando" de tamaño:
#demoIMG img.novisible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}
#demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
#demoIMG:hover img.visible {
  -moz-transform:scale(0);
  -webkit-transform:scale(0);
  -o-transform:scale(0);
  -ms-transform:scale(0);
}


En este último ejemplo, se hace lo mismo, variando la escala y ocultando la primera con un efecto de rotación:
#demoIMG img.novisible {
  -moz-transform:scale(1,0);
  -webkit-transform:scale(1,0);
  -o-transform:scale(1,0);
  -ms-transform:scale(1,0);
}
 #demoIMG:hover img.novisible {
  -moz-transform:scale(1);
  -webkit-transform:scale(1);
  -o-transform:scale(1);
  -ms-transform:scale(1);
}
 #demoIMG:hover img.visible {
  -moz-transform:rotate(360deg) scale(0);
  -webkit-transform:rotate(360deg) scale(0);
  -o-transform:rotate(360deg) scale(0);
  -ms-transform:rotate(360deg) scale(0);
}



















TABLA - FUENTES - FONTS


SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font








free counters


Disculpen las Molestias




TABLA - INFORMÁTICA - UTILIDADES

Publicado por en No hay comentarios:
Etiquetas:
Suscribirse a: Entradas (Atom)

Correo Vaishnava

Mi foto
Correo Devocional