Los mejores plugins de desplazamiento Parallax

Probablemente se haya encontrado con sitios de desplazamiento largo, ya que son muy comunes hoy en día. Los sitios de desplazamiento de paralaje son una de las opciones más interesantes disponibles dentro de esta categoría de diseño, ya que las imágenes se mueven para ofrecer un efecto de paralaje. Cuando el usuario se desplaza por la página, las animaciones se suceden y, en general, el sitio web transmite una sensación de frescura y exclusividad, siempre y cuando se implemente como es debido. El problema es que crear un sitio con desplazamiento de paralaje puede ser una tarea desalentadora y hay que saber mucho de Javascript, CSS y diseño para obtener un buen resultado. Hemos preparado una lista de los mejores plugins de Parallax scrolling que te ayudarán a crear sitios con parallax scrolling. Además, cuentan con una completa librería de efectos parallax que te permiten desarrollar páginas de gran aspecto de forma más rápida y sencilla. Tenga en cuenta que para utilizar estos plugins, necesita tener algunos conocimientos de tecnologías web como HTML, Javascript y CSS. Además, la mayoría de las opciones enumeradas necesitan también Jquery.

Alton

This is a jQuery scroll-jacking to us plugin, which means that the browser’s native scroll is deactivated in order to offer targeted scrolling that moves you to the next vertical point on the screen, once it is initiated by your mouse wheel or touchpad. Alton supports three different types of functions known as Standard, Hero and Bookend. Standard lets you use full page scrolling with every section of 100% height. The next section or the previous section is pushed up-front by the scroll. Hero lets you scroll jack only the Hero section along with the rest of the page. Bookend, as the name suggests gives you the possibility of creating a bookend style experience.

pagePiling.js

This is a jQuery plugin that gives you the possibility of creating a website into different sections that are piled on top of each other. As you scroll, or access the URL, every section appears in a neat sliding animation. pagePiling.js works with all platforms including desktop, tablet and mobile and it works with the majority of browsers available. It even delivers nice results in older browsers that don’t have animation support. To be able to use pagePiling.js, you need to add a CSS and a Javascript file inside your HTML.

ScrollMagic

Este es un plugin jquery popular que viene con una extensa lista de características. Con ScrollMagic, puede crear sorprendentes efectos de desplazamiento y animaciones basadas en la posición de desplazamiento. Es posible mover, fijar o animar elementos HTML mientras se desplaza, durante el tiempo que desee. Además, es posible añadir efectos de paralaje a sus sitios web sin problemas. ScrollMagic soporta muchas opciones de personalización y es una solución ligera. Además, ofrece una gran documentación y recursos.

Skrollr

This lightweight pure Javascript and CSS library doesn’t involve jQuery. In essence, it is a simplified version of Scroll Magic for CSS. In order to use Skrollr, you don’t have to have knowledge of jQuery or Javascript. As long as you can manage HTML and CSS, you will be fine. Skrollr uses data attributes to allow you to animate any HTML element. However, one of the main downsides is that animation only works as teh page is being scrolled, when not, the effects are not available.

MultiScroll.js

Del mismo creador de pagePiling.js, multiscroll es un plugin que permite crear efectos en los que cada sección se carga en dos partes separadas que se deslizan a medida que se carga la página. Puedes echar un vistazo a la página de inicio para ver cómo queda en el navegador. Con multiScroll.js, puedes configurar la velocidad de desplazamiento, la opción de desplazamiento con el teclado, el easing y muchas otras opciones. Esto te permite personalizar el efecto para conseguir el resultado exacto que esperas.

ScrollMe

This plugin lets you add simple parallax scroll effects to your page. It can rotate, scale, translate and change the opacity of elements on the page’s elements, while you scroll down. Javascript is not needed to use ScrollMe and as long as you have knowledge of CSS, you will be able to implement it. You can add the class “animateme” and the relevant data attributes to animate any HTML element. ScrollMe is the most practical solution to add CSS effects. It is lightweight and the animations run smoothly.

Stellar.js

Este es un plugin jQuery que te permite añadir efectos de parallax scrolling fácilmente. Para utilizarlo, primero es necesario ejecutar la función $.stellar(). Es posible configurar los ajustes de animación para elementos individuales utilizando atributos de datos en ese elemento. Stellar también permite tener fondos de paralaje, que se reposicionan al desplazarse. Offsets es una característica práctica soportada por Stellar.js. Esto asegura que todos los elementos vuelvan a su posición original una vez que su padre desplazado encuentre el borde de la pantalla, más o menos tu propio desplazamiento opcional, permitiéndote crear complejos patrones de paralaje sin complicaciones.