ScrollReveal.JSAnimaciones html5 en segundos![](http://i.imgur.com/HR3WWhl.png)
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.
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:
<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:
<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/ConfigurationUn ejemplo de la declaracion para animar un titulo seria el siguiente:
<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/KeywordsOtro 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!