• 0
  • 3 RepliesReplies
  • 11337 ReadTimes Read
  • 0 PointsPoints

Topic: Agregar animaciones con scrollReveal.js

Usuario: 4kstore
Rango: Moderador Global
Mensajes: 4916
Points: 8111
Mi web: http://www.smfsimple.com
Perfil: View Profile
Pais:
ar
Agregar animaciones con scrollReveal.js
October 16, 2015 - 07:58 19:58
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.



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!

You do not have permission to give points
point 0 Points

This topic did not receive points.

Usuario: Papá distante
Rango: Moderador Global
Mensajes: 3504
Points: 168
Perfil: View Profile
Pais:
de
Re:Agregar animaciones con scrollReveal.js
Reply #1 October 17, 2015 - 10:47 10:47
😍

Usuario: Shunsito
Rango: Nuevo Usuario
Mensajes: 192
Points: 4
Mi web: http://zstudios.cf
Perfil: View Profile
Pais:
ve
Re:Agregar animaciones con scrollReveal.js
Reply #2 December 27, 2015 - 05:22 05:22
Una gran herramienta en especial cuando usas un diseño parallax, no crees?

Usuario: 4kstore
Rango: Moderador Global
Mensajes: 4916
Points: 8111
Mi web: http://www.smfsimple.com
Perfil: View Profile
Pais:
ar
Re:Agregar animaciones con scrollReveal.js
Reply #3 December 27, 2015 - 08:53 08:53
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!

 

TAGS



top

Smfsimple.com es un sitio destinado a brindar un servicio de soporte y herramientas para foros realizados con el sistema de foros gratuito simplemachines.org. Contamos con un selecto equipo de desarrolladores y conocedores del sistema, sus foros estaran en buenas manos.
This site is not affiliated with or endorsed by Simple Machines