×
×

Jquery Smoove - Efectos al hacer scroll en tu contenido

Los que nos dedicamos al desarrollo web sabemos que es muy importante estar al tanto de las tendencias nuevas que van apareciendo en este sector. Uno de los efectos más modernos que podemos observar en varias páginas web recientemente diseñadas es que al hacer scroll aparezcan simultáneamente bloques de contenido.

Existen diversos plugin jquery que realizan esta función, pero el que más nos ha gustado es el desarrollado por abeMedia. Es gratuito, por cierto.

Para que os hagáis una idea de lo que estamos hablando vamos a crear un ejemplo y así podáis observar el potencial que nos ofrece. Después del ejemplo visual procederemos a explicar su funcionamiento e implementación. Ahí va!

 

Haz scroll hacia abajo para ver los ejemplos

Utiliza Smoove en el script para crear suaves efectos fade-in a medida que se desplaza hacia abajo
También puedes mover objetos a lo largo de la pantalla...
...o rotarlos
Puedes incluso usar divertidos efectos en 3D
Escalarlos y sesgarlos...
Fin de la demostración.

Para implementar estas funciones debemos descargarlos el conjunto de archivos desde la página de Github

Una vez descargado nos van a hacer falta 2 scripts esenciales:

/dist/jquery.smoove.js
/libs/jquery.js(podemos incluir esta librería de jquery o la que estemos utilizando. Si estamos en un CMS tendrá esta librería ya incluida, pero si vais a hacer la prueba en un HTML desde 0 utilizad ésta por ejemplo)

En vez de descargar y enlazar estos scripts también es posible enlazarlos directamente de la siguiente manera:



Jquery Smoove necesita ser activado vía Javascript para su funcionamiento. Su sintaxis es la siguiente:



Para nuestro ejemplo hemos utilizado la siguiente llamada jQuery:

Esto iniciará jQuery Smoove sobre el/los elemento/s que hayamos incluido.Para que sepáis las opciones que podéis inicializar, son las siguientes:

OPCIONES

Nombre Tipo Default Descripción
offset integer or string 150 La distancia hasta el fondo de la pantalla antes de objeto se deslice a la vista e.j. 10%.
opacity integer (0-100) 0 La opacidad del objeto antes de que aparezca a la vista.
perspective integer 1000 Perspectiva 3D en pixels.
transformOrigin string 50% 50% La transformación original en píxeles, porcentaje or palabra clave (izquierda, derecha, arriba o abajo).
skewY angle none Sesgar en 2D a lo largo del eje Y e.j. 90deg.
move string none Mover en 2D a lo largo del eje X y el eje Y e.g. 100px,50%.
move3d string none Movimiento 3D a lo largo del eje X e Y y el eje Z e.j. 10px,10px,10px.
moveX string none Movimiento del objeto a lo largo del eje X e.j. 10px or 10%.
moveY string none Movimiento del objeto a lo largo del eje Y e.j. 10px or 10%.
moveZ string none Movimiento del objeto a lo largo del eje Z e.j. 10px or 10%.
rotate string none Rotación en 2D e.j. 90deg.
rotate3d string none Rotación en 3D de los ejes X, Y y Z e.j. 1,1,1,90deg.
rotateX string none Rotación 3D a lo largo del eje X e.j. 90deg.
rotateY string none Rotación 3D a lo largo del eje Y e.j. 90deg.
rotateZ string none Rotación 3D a lo largo del eje Z e.j. 90deg.
scale decimal or string none Escala de 2D en los ejes (x,y) (e.j. 2.5 or 2,0.5).
scale3d string none Escala 3D en los ejes (x,y,z) (e.j. 2,3,0.5).
scaleX decimal none Escala 2D en el eje X.
scaleY decimal none Escala 2D en el eje Y.
skew angle none Sesgado 2D a lo largo del eje X el eje Y (e.j. 90deg,90deg).
skewX angle none Sesgado 2D a lo largo del eje X e.j. 90deg.
skewY angle none Sesgado 2D a lo largo del eje Y e.j. 90deg.


El CSS del ejemplo sería el siguiente:



Éste es el código HTML que hemos utilizado:





Con todo este material estamos seguros de que seréis capaces de crear webs dinámicas de gran calidad. No olvidéis comentar y compartir, y si utilizáis otra herramienta para crear este tipo de animaciones de elementos, ¡contádnoslo!.


Añadir nuevo comentario