Los 10 mejores complementos de desplazamiento de Parallax

Los sitios de desplazamiento largo se han convertido en una tendencia de diseño web muy común. Uno de los subtipos más geniales de esto son los sitios de desplazamiento de paralaje, donde las imágenes se mueven para emitir un efecto de paralaje. A medida que el usuario se desplaza hacia abajo en la página, las animaciones se activan y, en general, le da una nueva apariencia a cualquier sitio web si se implementa correctamente.

Crear un sitio de desplazamiento de paralaje suele ser tedioso porque requiere un conocimiento profundo de CSS, Javascript y un buen diseño web para lograrlo. Aquí hay una lista de los mejores complementos de desplazamiento de paralaje que no solo le facilitan la creación de sitios de desplazamiento de paralaje, sino que también tienen una biblioteca de efectos de paralaje bien dotada para que le resulte más fácil y rápido desarrollar una página web atractiva. .

DESCARGO DE RESPONSABILIDAD : antes de comenzar, tenga en cuenta que para usar estos complementos se requiere algún conocimiento de tecnologías web (HTML/CSS/Javascript). La mayoría de los complementos enumerados utilizan jquery, por lo que también es posible que se necesite conocimiento de Jquery.

Complementos de desplazamiento de paralaje

1. Magia de desplazamiento

ScrollMagic es uno de los complementos de jquery más populares y ricos en funciones que existen. Es una biblioteca de javascript que te permite crear efectos de desplazamiento aparentemente mágicos. Con ScrollMagic, puede animar en función de su posición de desplazamiento. Esto significa que puede corregir, mover o animar elementos HTML a medida que se desplaza, durante el tiempo que desee, y también agregar fácilmente efectos de paralaje a su sitio web. Es altamente personalizable y también es liviano (6kb cuando está comprimido). Entre otros complementos de desplazamiento de paralaje, Scroll Magic tiene la mejor documentación y recursos externos. Es perfectamente compatible con el móvil también.

ScrollMagic tiene muchos ejemplos en la lista. Consúltelos para obtener inspiración y orientación sobre el uso de esta biblioteca.

Acerca de:

Página de inicio: http://janpaepke.github.io/ScrollMagic/

Creado por: Jan Paepke

Instalación:

1. Red CDN:

2. [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/janpaepke/ScrollMagic”]

2. Skrollr

skrollr es una biblioteca liviana de Javascript puro y CSS, sin jQuery involucrado. Es básicamente el ‘Scroll Magic simplificado para CSS’. Para usar skrollr, no necesita saber Javascript ni jQuery. Solo HTML y CSS son suficientes. skrollr usa atributos de datos para animar cualquier elemento HTML que desee. Una de las principales desventajas de skrollr es que las animaciones solo funcionan mientras se desplaza la página. De lo contrario, todos los efectos se ponen en espera. skrollr le permite animar todas las propiedades CSS de sus elementos HTML.

Acerca de:

Página de inicio: http://prinzhorn.github.io/skrollr/

Creado por: Prinzhorn

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/Prinzhorn/skrollr”]

3. pagePiling.js

Page Piling es un complemento de jQuery que le permite crear su sitio web en diferentes secciones que se apilan una encima de la otra. Al desplazarse, o al acceder a la URL, cada sección se revela en una animación deslizante ordenada. pagePiling.js es compatible con todas las plataformas (ordenador, tableta y móvil) y funciona con la mayoría de los navegadores. Se degrada con gracia en los navegadores más antiguos que no admiten sus animaciones (como IE 7). Para usar el complemento, debe incluir un archivo CSS y Javascript dentro de su HTML. pagePiling.js se inicializa mediante la función (documento).ready:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

Para inicializaciones más avanzadas, vaya a README.md.

Acerca de:

Página de inicio: http://alvarotrigo.com/pagePiling/

Creado por: alvarotrigo

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/pagePiling.js”]

4. Alto

Alton es un complemento jQuery ‘scroll-jacking to us’. Scroll jacking significa que el desplazamiento nativo de su navegador está deshabilitado a favor del desplazamiento dirigido que, cuando se inicia (con la rueda del mouse o el panel táctil), lo lleva al siguiente punto vertical en la pantalla, o a la parte superior del siguiente contenedor.

Alton permite la funcionalidad de tres tipos separados, llamados ‘Hero’, ‘Bookend’ y ‘Standard’. Estándar le permite usar el desplazamiento de página completa, con cada sección del 100% de altura. Un pergamino presenta la siguiente sección o la sección anterior. Bookend te permite crear una experiencia tipo sujetalibros, mientras que Hero te permite desplazarte solo en la sección ‘Hero’, con el resto de la página teniendo (rehabilitado) el desplazamiento nativo.

Acerca de:

Página de inicio: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/

Creado por: paper-leaf

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/paper-leaf/alton/”]

5. Stellar.js

Stellar es un complemento jQuery a través del cual puede agregar fácilmente efectos de desplazamiento de paralaje. Para ejecutar, primero debe ejecutar la función $.stellar(). Los ajustes de animación para elementos individuales se pueden configurar usando atributos de datos en ese elemento.

Stellar incluso le permite tener fondos de paralaje, que son fondos que se reposicionan en el desplazamiento. Una de las funciones más útiles de Stellar.js son las compensaciones.

Todos los elementos volverán a su posición original cuando su padre desplazado se encuentre con el borde de la pantalla, más o menos su propio desplazamiento opcional. Esto le permite crear patrones de paralaje intrincados muy fácilmente. (Documentación estelar)

Acerca de:

Página de inicio: http://markdalgleish.com/projects/stellar.js/

Creado por: Mark Dalgeish

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/markdalgleish/stellar.js”]

6. multidesplazamiento.js

Este complemento es creado por el mismo desarrollador (alvarotrigo) que creó el complemento pagePiling.js. Lo que hace básicamente el desplazamiento múltiple es que le permite crear un efecto en el que cada sección de la página se carga en dos partes divididas que se deslizan en su lugar a medida que se carga la página. Consulte la página de inicio para ver cómo se ve esto en su navegador. multiScroll.js le permite establecer la velocidad de desplazamiento, la aceleración, la opción de desplazamiento del teclado y muchas más propiedades para que pueda personalizar el efecto exactamente como lo necesita.

Acerca de:

Página de inicio: http://alvarotrigo.com/multiScroll/

Creado por: alvarotrigo

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/alvarotrigo/multiscroll.js”]

7. Desplazarme

ScrollMe es un complemento para agregar efectos simples de desplazamiento de paralaje a su página. Puede escalar, rotar, traducir y cambiar la opacidad de los elementos de la página, a medida que se desplaza hacia abajo. ScrollMe no requiere Javascript, y solo el conocimiento de CSS es suficiente. Al agregar la clase “animateme” y los atributos de datos requeridos, puede animar cualquier elemento HTML. ScrollMe se utiliza mejor para agregar efectos CSS. Es liviano y todas las animaciones son fluidas, siempre que las use con moderación.

Acerca de:

Página de inicio: http://scrollme.nckprsn.com/

Creado por: Nick Pearson

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/nckprsn/scrollme”]

8. Desplazamiento de paralaje

Parallax Scroll es un complemento de jQuery fácil de usar que le permite crear el efecto de desplazamiento de imágenes de paralaje que se encuentra en sitios como Spotify. Es bastante simple de usar: solo especifique las clases de CSS requeridas para los titulares de imágenes. En lugar de usar etiquetas , para usar este complemento debe usar elementos que tengan una imagen de fondo especificada (usando la propiedad CSS `background-image`. Puede hacer que los elementos respondan usando CSS @media queries.

Acerca de:

Página de inicio: http://parallax-scroll.aenism.com/

Creado por: Aen

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/aentan/Parallax-Scroll”]

9. Jarallax

Jarallax es una biblioteca de CSS y Javascript que se especializa en efectos de desplazamiento de paralaje. Jarallax se configura usando Javascript (sin jQuery, solo JS puro y simple). Admite funciones de desplazamiento suavizado, aceleración y animación de paralaje. Jarallax es compatible con la mayoría de los navegadores, en todas las plataformas. El sitio web de Jarallax tiene excelente documentación sobre cómo personalizar Jarallax para sus necesidades. Jarallax también tiene tutoriales en video que muestran cómo configurar Jarallax para su sitio web y cómo comenzar.

Acerca de:

Página de inicio: http://www.jarallax.com/

Creado por: Jarallax

Instalación: [vc_button title=”Descargar desde el sitio web de Jarallax” target=”_blank” color=”default” size=”size_small” href=”http://www.jarallax.com/?page=download”]

10. Superscrollorama

Superscrollorama es un complemento basado en jQuery que admite animaciones de desplazamiento. Está alimentado por TweenMax y Greensock Tweening Engine, que aumenta el rendimiento y la suavidad de la animación. Las animaciones de Superscrollorama se llaman a través de jQuery, y también puede usar la mayoría de las funciones de TweenMax.js. Desafortunadamente, estas animaciones no son totalmente compatibles con los dispositivos móviles (porque los dispositivos de pantalla táctil manejan el desplazamiento de forma diferente). Sin embargo, al usar el método setScrollContainerOffset, se puede acceder a los efectos de Superscrollorama en dispositivos móviles.

Aquí está el código para hacer esto:

.setScrollContainerOffset(x, y)

(x: el desplazamiento x del contenedor de pergaminos, y: el desplazamiento x del contenedor de pergaminos)

Acerca de:

Página de inicio: http://johnpolacek.github.io/superscrollorama/

Creado por: johnpolacek

Instalación: [vc_button title=”Descargar desde Github” target=”_blank” color=”default” size=”size_small” href=”https://github.com/johnpolacek/superscrollorama”]

VER TAMBIÉN: Los 10 mejores generadores de sitios estáticos