Slider animado con efecto parallax en CSS3

por .

Para comenzar con este artículo y la recomendación posterior debo decirles que tengan cuidado con su aplicación en sitios públicos ya que, como siempre aclaro, la utilización de CSS3 no está homogeneizada en todos los exploradores. Dicho esto, procedo a explicarles de qué se trata esta palabra parallax.

Hace algunos años, los diseñadores avanzados que utilizaban Flash para realizar animaciones hicieron abuso de este efecto para agregar un movimiento moderno y fuera de lo que comúnmente se veía en la web hasta ese momento. El parallax es un deslizamiento del eje del elemento primero hacia atrás de forma lenta y luego desapareciendo rápidamente hacia adelante, hay muchas variaciones, pero en este caso es la primera vez que veo uno aplicado a través de un slider que utiliza solo imágenes y código.

Vista previa de slider con efecto parallax

Para utilizarlo sobre proyectos propios, podemos hacerlo de forma bastante simple, siempre que tengan conocimientos básicos de código. Veremos que cada slider posee un título en h2, un enlace y una imagen, les recomiendo utilizar una transparente en .png para evitar problemas con los fondos (aunque esto será todo un problema en IE6).

<div id="da-slider" class="da-slider">

<div class="da-slide">

<h2>Some headline</h2>

<p>Some description</p>

<a href="#" class="da-link">Read more</a>

<div class="da-img">

<img src="images/1.png" alt="image01" />

</div>

</div>

<div class="da-slide">

<!-- ... -->

</div>

<!-- ... -->

<nav class="da-arrows">

<span class="da-arrows-prev"></span>

<span class="da-arrows-next"></span>

</nav>

</div>

Para controlar el comportamiento de cada uno de estos elementos, lo haremos a través de una clase de dirección, por ejemplo: para enviarla a la derecha, utilizamos «da-slide-toright». Habrá cuatro clases diferentes para definir direcciones y orígenes.

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

Una vez definidas las clases, podemos controlar cada uno de los elementos:

/* Slide in from the right*/

.da-slide-fromright h2{

animation: fromRightAnim1 0.6s ease-in 0.8s both;

}

.da-slide-fromright p{

animation: fromRightAnim2 0.6s ease-in 0.8s both;

}

.da-slide-fromright .da-link{

animation: fromRightAnim3 0.4s ease-in 1.2s both;

}

.da-slide-fromright .da-img{

animation: fromRightAnim4 0.6s ease-in 0.8s both;

}

/* Adjust animations for different behavior of each element: */

@keyframes fromRightAnim1{

0%{ left: 110%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim2{

0%{ left: 110%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim3{

0%{ left: 110%; opacity: 0; }

1%{ left: 10%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim4{

0%{ left: 110%; opacity: 0; }

100%{ left: 60%; opacity: 1; }

}

Hay algunas opciones para editar el comportamiento desde el plugin cslider a saber:

$('#da-slider').cslider({

current : 0,

// index of current slide

bgincrement : 50,

// increment the background position

// (parallax effect) when sliding

autoplay : false,

// slideshow on / off

interval : 4000

// time between transitions

});

De esta forma, cambiando los elementos básicos de imágenes, títulos y las propiedades del movimiento, podremos personalizar este slider de forma ideal sin necesidad de animar con Flash. Es una excelente herramienta para conocer los alcances y posibilidades que ofrece CSS3 a diferencia de su predecesor, pero aún tenemos el problema de la incompatibilidad con ciertos exploradores. Aún así, para quienes trabajan en forma local, puede resultar muy útil.

Ver Demo de Parallax Content Slider | Descargar código | Tympanus

Categorizado en: