Agregar animaciones con scrollReveal.js

ScrollReveal.JS
Animaciones html5 en segundos

Hoy les traigo una herramienta que les va a volar la cabeza, si alguna vez tuvieron que lidiar con el problema de animar elementos del DOM al hacer scroll sabrán que no es una tarea fácil, requiere combinar varias técnicas de css, html y javascript en cada zona de la pagina.

Con scrollReveal podemos lograr nuestro cometido de manera muy sencilla y de forma declarativa, solo declarando en las etiquetas html como queremos que se muevan.

Un demo es el sitio oficial: http://scrollrevealjs.org/
Verán que al hacer scroll para abajo irán apareciendo los elementos de distintas maneras (se puede lograr el mismo efecto al subir pero esto es opcional).

Ya use este plugin en varios proyectos y realmente estoy fascinado.

La descarga la hacen desde el repositorio de github: https://github.com/jlmakes/scrollReveal.js
Link directo al script: https://github.com/jlmakes/scrollReveal.js/blob/master/dist/scrollReveal.min.js

Aclarar que necesitan utilizar html5 ya que para declarar los métodos usa la etiqueta data-sr

Entonces solo necesitan agregar la libreria en el html:

Code: [Select]

<script src='/js/scrollReveal.min.js'></script>
    <script>

      window.sr = new scrollReveal();

    </script>

Recomiendo incorporar la creación del objeto en el onLoad de jquery, eso me ahorro algunos dolores de cabeza con la carga de la pagina
Al crear el objeto le pueden pasar un json con propiedades que tendra por defecto la animacion.

Un ejemplo seria:

Code: [Select]

<script src='/js/scrollReveal.min.js'></script>
<script>

  var config = {
    reset:  true,
    mobile: true
  }

  window.sr = new scrollReveal( config );

</script>
En el ejemplo, los efectos se harán en ambos sentidos del scroll y también funcionara en aplicaciones moviles (Siii, tus sitios responsives con animaciones)
Mas configuraciones:
https://github.com/jlmakes/scrollReveal.js/wiki/Configuration

Un ejemplo de la declaracion para animar un titulo seria el siguiente:

Code: [Select]

<h1 data-sr="wait 2s, ease-in-out 100px">Titulo animado</h1>
Con esto la animación tardar en realizar desde que se esta en foco 2 segundos y la hará con un efecto ease-in-out de 100px.
Como ven solo declaran las opciones como clave - valor separadas por coma y listo!

Tenemos varias opciones de animación y con creatividad podemos hacer sitios muy lindos con poco codigo.
Acá el link para que vean mas animaciones: https://github.com/jlmakes/scrollReveal.js/wiki/Keywords

Otro recomendado, espero que le peguen un ojo y cualquier duda que tengan comentan que yo le agarre la mano y posiblemente los pueda ayudar.
Abrazo!

😍

Una gran herramienta en especial cuando usas un diseño parallax, no crees?

Una gran herramienta en especial cuando usas un diseño parallax, no crees?

Si, facilita muchisimo la vida cuando quieres hacer diseños con esa onda parallax, lo use en varios proyectos externos a SMF y va realmente de maravilla por eso la recomendacion.
Saludos!