Animaciones CSS3 más jQuery de forma sencilla y elegante

Últimamente estoy trabajando bastante con animaciones y efectos basados en CSS3 más jQuery. Lo cierto es que a medida que voy avanzando, la práctica hace que la imaginación trabaje cada vez más. Es por esto que voy a plantear algunas ideas sencillas, que pueden dar un toque de elegancia y dinamismo a nuestros trabajos.

Este primer ejemplo, es una manera práctica y muy sencilla. Se trata de lograr un efecto o animación, cuando efectuamos una interacción con la web, por ejemplo cuando pasamos el ratón sobre un enlace. Este ejemplo puede resultar muy efectivo para mostrar información sobre el propio enlace. Hacemos :hover sobre el enlace, y se dispara la animación. El span de dentro del enlace, está posicionado de manera absoluta, y de principio está fuera del propio enlace. Utilizando el :hover, :focus y :active, posicionamos más arriba el span. Hasta aquí todo medianamente lógico y sencillo, pero si utilizamos transiciones CSS3, (transition), podemos desplazar el span de manera suave y no tan brusca.

-webkit-transition: all .5s ease .3s;
   -moz-transition: all .5s ease .3s;
    -ms-transition: all .5s ease .3s;
     -o-transition: all .5s ease .3s;
        transition: all .5s ease .3s;

Básicamente, a todo elemento al que apliquemos transiciones, se verá afectado por ellas, por eso, al pasar el ratón por nuestro enlace, el span sube suavemente. Aquí abajo lo veréis mucho más detallado.

See the Pen Easy CSS3 transition by Enrique (@bosspetta) on CodePen.

Bien, ahora pasemos a cosas más serias. Anteriormente hemos tocado un ejemplo sencillo, que se dispara al interactuar con la página web. Ahora vamos a lograr cargar nuestros efectos a medida que vamos haciendo scroll. Para ello nos vamos a servir de una increíble librería JavaScript que se llama WOW, y realmente le queda bien el nombre.

En la página de WOW en GitHub nos explican con detalle la sencillísima instalación y uso de la misma.

  1. Enlazamos con nuestra hoja de estilos en la que tengamos las animaciones y efectos:
    <link rel="stylesheet" href="css/animate.css">
    Más adelante hablaré de Animate.css, una fantástica hoja de estilo para animaciones CSS3.
  2. Enlazamos e iniciamos WOW:
    <script src="js/wow.min.js"></script>
    <script>
    new WOW().init();
    </script>

Y listo Evaristo. Bueno, a medias, WOW es genial pero no sobrenatural. Una vez enlazados los estilos de animación y el js de WOW, cada vez que queramos que un elemento quede bajo el influjo de WOW, y el efecto o animación se dispare a medida que hacemos scroll, debemos incluir la clase wow, tal que así hermanos:

<div class="wow"> Contenido a revelar al hacer scroll </div>

El contenedor se mostrará al hacer scroll, pero lo que buscamos, es que se disparen los efectos de animación CSS3. Y es aquí cuando entra en acción el otro súper héroe de la película. Es muy, pero que muy recomendable empaparse de la sintaxis para animaciones CSS3. Quedando esto súper claro, tenemos en la red muchas opciones para ahorrarnos tiempo en un proyecto, o simplemente para utilizar porque aún nuestras experiencias con animaciones no son lo suficientemente potables. A día de hoy, la mejor que he encontrado, sencilla y rápida, el complemento perfecto para WOW, es Animate.css. En su web tenemos efectos predefinidos, muy pero que muy resultones. Buscamos el que queramos, nos guste más o se amolde mejor a nuestras necesidades, e incluimos el nombre del efecto (están en el select) como segunda clase en nuestro contenedor. Y digo bien, segunda, ya que para la primera clase hemos usado WOW. Tal que así:

<div class="wow bounceInUp">  Content to Reveal Here  </div>

Ahora, el efecto seleccionado, bounceInUp, se disparará cuando el scroll llegue a su altura. En la misma web de WOW, podemos comprobar el efecto de la combinación de WOW y Animate.css. Repito, hechos el uno para el otro.

Es todo, al menos por el momento. Espero que esto os anime (núnca mejor dicho) a entrar a saco en las animaciones y efectos CSS3. Aunque eso sí, sed responsables y no abuséis, que ya sabéis, todo en su justa medida.

wow-and-animate

4 thoughts on “Animaciones CSS3 más jQuery de forma sencilla y elegante

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>