el origen del slider…

Independientemente del camino que tomemos para armar y dar la funcionalidad de un slider, el siguiente código dará una idea de cómo es el funcionamiento y estructura.

La idea general central es, generar un código HTML sin tanta personalización en atriburos (id, clases de CSS, names) y que por si solo sea tomado y animado para dar el efecto de estos elemtos tan utilizados actualmente en una variedad de sitios.

Se parte de la estructura HTML.

<div id=”contenedor”>
  <div id=”imagenes”>
      <div><a href=”inna1.html”><img src=”img1.jpg” alt=”” /></a></div>
      <div><a href=”inna2.html”><img src=”img2.jpg” alt=”” /></a></div>
      <div><a href=”inna3.html”><img src=”img3.jpg” alt=”” /></a></div>
      <div><a href=”inna4.html”><img src=”img4.jpg” alt=”” /></a></div>
  </div>
</div>

Nota, de acuerdo a la forma en que será propuesto el ejercicio es necesario crear un contenedor principal, en este caso llamado “contenedor” y otro que es el que se desplazará cada cierto tiempo.

Ahora es necesaria la personalización de estos DIV’s con CSS

#contenedor
{
      border:1px solid red;
      height:100px;
      width:300px;
      overflow:hidden;
}
#contenedor #imagenes
{
      position:relative;
}

una vez definida la apariencia y limitado los espacios la función que será llamada al momento del cargado de la página.

<body onload=”rotarImagen()”>

el código es:

<script type=”text/javascript” language=”javascript”>
      var nImg = 1;
      var pos=100;
      var intervalo=10;
      function rotarImagen()
      {
            if ((pos*(-1))<((document.getElementById(‘imagenes’).children.length-1)*100))
            {
                  document.getElementById(‘imagenes’).style.top = (pos-intervalo) + “px”;
                  pos = pos – intervalo;
            }
            else
            {
                  document.getElementById(‘imagenes’).style.top = “0px”;
                  pos = 0;
            }
      if ((pos%100)!=0) setTimeout(“rotarImagen()”,50);
      else setTimeout(“rotarImagen()”,2000);
     }
</script>

Como pueden ver la transición de las imágenes está en función de su tamaño y se provoca un desplazamiento secuencial del contenedor “Imagenes” que tiene una pausa menor cuando el desplazamiento ha cumplido con el tamaño de la imagen, esto da la apariencia de transición.

En caso de querer incorporar algún otro efecto de transición como difuminado de la imagen se debe modificar el alpha de la imagen (valor entre 0 y 1) y así dar otro efecto de movimiento.

A partir de este pequeño código es que podemos encontrar slides tan elaborados como nuestra imaginación (o el diseñador gráfico) lo requiera.

Saludos

Varias transiciones en CSS 3…

Como sabemos CSS3 está incorporando atributos que facilitan la vida, me refiero evitar meternos con JS sin necesidad.

Ahora les muestro una forma rápida de incorporar varios movimientos en una figura, por ejemplo, rotar e incrementar el tamaño de alguna imagen, o crecer y desvanecer, etc, cualquier combinación es posible.

Primero veamos por separado:

<body style=”margin:150px;”>
   <div>
   </div>
</body>

A este único elemento div que tenemos le daremos unas características iniciales, para lo cual utilizamos algunos atributos de CSS.

div
{
background:red;
width:200px;
height:200px;

//especificamos que su aparencia será tener una rotación de 5 grados
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);

//Especificamos que ademas tendrá una transformación la cual tardará en este caso 5s, 
//todavía no especificamos que transformación tendrá, solo que se hará en el tiempo especificado.

transition: transform 5s;
-moz-transition: -moz-transform 5s;
-webkit-transition:-webkit-transform 5s;
-o-transition: -o-transform 5s;
}

Hasta el momento tenemos:

  1. El objeto div creado
  2. Los estilos con lo que aparecerá de entrada
  3. Se ha especificado que tendrá una transición que durará 5 segs.

Ahora es momento de especificar que transformación tendrá en el tiempo que se ha especificado.

div:hover
{
-webkit-transform:rotate(-10deg) scale(1.5);
-moz-transform:rotate(-10deg) scale(1.5);
-o-transform:rotate(-10deg) scale(1.5);
-ms-transform:rotate(-10deg) scale(1.5);
transform:rotate(-10deg) scale(1.5);
}

Como se aprecia, la transformación consiste en dos cosas, una rotación hasta los -10 grados y ademas crecerá 50% de su tamaño real.

De esta manera podemos agregar la cantidad de transformaciones necesarias sobre el objeto.

Saludos

Transición y transformacion con CSS

Este ejemplo está basado en Original Hover Effects with CSS3, pero lo he resumido para que sea un poco más claro de entender principalmente para aquellos que no estén muy involucrados o que estén iniciando con CSS.

Entonces la cosa está así, como HTML tenemos la siguiente estructura:

<div>
    <img src=”sha.jpg” />
    <div>Mouse arriba</div>
    <div>
        <h2>Transición con CSS3</h2>
        <p>Transición y transformación con CSS3.</p>
        <a href=”http://a.uaslp.mx/e2CSs6z8“>Enlace original</a>
    </div>
</div>

El código anterior no involucra nada en especial, unos cuantos DIV, IMG, P, H2, A que son elementos básicos al estructurar un documento HTML.

Nota: Este ejemplo utiliza imagenes, dos para ser exactos, pueden hacer uso de cualquier imagen de su agrado, solo asegurense que tienen el tamaño apropiado para ser usadas, en este caso se usando de 200 x 15 pixeles.

Ahora vamos definiendo los estilos para cada uno de los elementos del documento HTML que se mostro anteriormente:

.vista{
/*Características generales del DIV*/

width: 200px;
height: 150px;
margin: 10px;   
float: left;   
border: 10px solid #fff;   
overflow: hidden;   
position: relative;    /*se especifica que la posicion sea relativa*/
text-align: center;
/*especificamos un sombreado al DIV*/

-webkit-box-shadow: 2px 2px 5px #000000;   
-moz-box-shadow: 2px 2px 5px #000000;   
box-shadow: 2px 2px 5px #000000;   
background: #FFFFFF url(bgpiel.jpg) no-repeat center center;
}

.vista .mascara {
/*Características generales del DIV máscara que quedará ocupará el mismo espacio*/

width: 200px;
height: 150px;
position: absolute;   
overflow: hidden;   
top: 0;   
left: 0;     
background-color: rgba(255, 231, 179, 0.3);
/*Se especifica el comportamiento en transición de todo el DIV*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;   
-ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;   
filter: alpha(opacity=0);   
opacity: 0;
}

.vista img {
display: block;   
position: relative;
/*se declara la apariencia de la imagen sin ningun evento, indicando su tamaño orignal (1)*/

-webkit-transform: scaleY(1);   
-moz-transform: scaleY(1);   
-o-transform: scaleY(1);   
-ms-transform: scaleY(1);   
transform: scaleY(1);
/*declaración de como se efecturará la transición de la IMG*/

-webkit-transition: all 0.7s ease-in-out;   
-moz-transition: all 0.7s ease-in-out;   
-o-transition: all 0.7s ease-in-out;   
-ms-transition: all 0.7s ease-in-out;   
transition: all 0.7s ease-in-out;
}

El DIV mascara contiene 3 elementos, un H2, un P y un A a los cuales tambien se les dan características de transición, para que tengan un movimiento propio e independiente del DIV máscara.

.vista h2 {   
text-transform: uppercase;   
color: #fff;   
text-align: center;   
position: relative;   
font-size: 14px;   
border-bottom: 1px solid rgba(0, 0, 0, 0.3);   
background: transparent;   
margin: 5px 20px 0px 20px;
/*Despues de las caractérísticas generales se especifica su transformación, en este caso se escalará*/

-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
color: #333;
/*Se declara como será la transición de la transformación especificada.*/

-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;   
-o-transition: all 0.5s linear;   
-ms-transition: all 0.5s linear;   
transition: all 0.5s linear;
}

.vista .descripcion {  
font-family: Georgia, serif;  
font-style: italic;  
font-size: 12px;  
position: relative;  
color: #fff;  
padding: 10px 20px;  
text-align: center;  color: #333;
/*Una vez declaradas las características generales de P, se declara la transformación, en este caso como en el H2, se escalará*/

-webkit-transform: scale(0);  
-moz-transform: scale(0);
 -o-transform: scale(0);  
-ms-transform: scale(0);  
transform: scale(0);
/*Se declara la forma en que se realizará la transición del escalado para este elemento*/

-webkit-transition: all 0.5s linear;  
-moz-transition: all 0.5s linear;  
-o-transition: all 0.5s linear;  
-ms-transition: all 0.5s linear;  
transition: all 0.5s linear;
}

/*Para el elemento A, se hace básicamente lo mismo que para los elementos P y H2, declarar sus apariencia, su transformación y su transición*/
.vista a.info

{   
display: inline-block;   
text-decoration: none;   
padding: 7px 14px;   
background: #000;   
color: #fff;   
text-transform: uppercase;   
-webkit-box-shadow: 0 0 1px #000;   
-moz-box-shadow: 0 0 1px #000;   
box-shadow: 0 0 1px #000;      
-webkit-transform: scale(0);   
-moz-transform: scale(0);   
-o-transform: scale(0);   
-ms-transform: scale(0);   
transform: scale(0);   
-webkit-transition: all 0.5s linear;   
-moz-transition: all 0.5s linear;
   -o-transition: all 0.5s linear;
   -ms-transition: all 0.5s linear;
   transition: all 0.5s linear;
}

/*Por ultimo un elemento DIV que aparecerá posicionado arriba de la imagen, para la cual se parte del posicionamiento relativo (que es despues de la IMG) y apartir de ahí se reccorre 70px hacia arriba, para después especificar como será su transición. Para este elemento DIV comenzará con estar visible y al final de la transición será invisible*/
.vista .aviso {

  position:relative;
  top: -70px;
  background-color:#FFFFFF;
  -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=.7)”;
     filter: alpha(opacity=.7);
     opacity: .7;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    transition: all 0.5s linear;
}

Ahora, se declararán las características de los elementos de acuerdo a al reacción del mouse cuando se encuentre arriba de ellos (hover), estos conjuntos de estilos pueden considerarse como los puntos finales despues de la transición es decir, por ejemplo, si para el elemento IMG se especifico una transición y el hover de la imagen especifica que tendrá una escalado de 10, significa que la transición será de su tamaño original a un tamaño de 10 veces más.

Por lo tanto aqui no se especifican las transiciones, sino las caracteristicas de como será el elemento al final de la transición.

.vista a.info: hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}

.vista:hover img {
   -webkit-transform: scale(10);
   -moz-transform: scale(10);
   -o-transform: scale(10);
   -ms-transform: scale(10);
   transform: scale(10);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;
}

.vista:hover .mascara {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover h2, .vista:hover .descripcion, .vista:hover a.info {
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=100)”;
   filter: alpha(opacity=100);
   opacity: 1;
}

.vista:hover .aviso {
   -ms-filter: “progid: DXImageTransform.Microsoft.Alpha(Opacity=0)”;
   filter: alpha(opacity=0);
   opacity: 0;

Con los elementos establecidos anteriormente tendrás un efecto interesante de presentación de información, sin necesidad de utilizar algun complemento de JS o cualquier variante, sólo HTML y CSS3.

Si este código lo colocas en una página web podrás ver su funcionamiento, sin embargo con sus respectivas limitantes, que ya se podrán imaginar cual es: IE no soporta hasta el momento las características de transición (para algunos esto es de esperarse). Sin embargo las características de opacidad, transformación si lo son por lo que, lo unico que no veremos es la transición de un estado a otro.

Descarga el ejemplo completo[19KB]

En la red encotrarás mucha información relativa a los atributos de transición, opacidad y transformación como en w3schools o desarrolloWeb, por mencionar algunos.

saludos

Igar