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 dan una nueva apariencia a cualquier sitio web si se implementa correctamente.
Hacer un sitio de desplazamiento de paralaje es a menudo 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 cuentan con una biblioteca de efectos de paralaje bien dotada para que sea más fácil y más rápido desarrollar una página web atractiva. .
DESCARGO DE RESPONSABILIDAD : antes de comenzar, tenga en cuenta que para usar estos complementos es necesario tener cierto conocimiento de las tecnologías web (HTML / CSS / Javascript). La mayoría de los complementos enumerados utilizan jquery, por lo que también podría ser necesario el conocimiento de Jquery.
Complementos de desplazamiento de paralaje
1. ScrollMagic
ScrollMagic es uno de los complementos de jQuery más populares y con más funciones que existen. Es una biblioteca javascript que te permite crear efectos de desplazamiento aparentemente mágicos. Usando ScrollMagic puedes animar basado en tu posición de desplazamiento. Esto significa que puede corregir, mover o animar elementos HTML mientras se desplaza, por el tiempo que desee, y también puede agregar fácilmente efectos de paralaje a su sitio web. Es altamente personalizable y también liviano (6kb cuando está comprimido). Entre otros complementos de scroll paralaje, Scroll Magic tiene la mejor documentación y recursos externos. Es perfectamente compatible con el móvil también.
ScrollMagic tiene muchos ejemplos enumerados. Míralos para obtener inspiración y orientación sobre el uso de esta biblioteca.
Acerca de:
Página de inicio: //janpaepke.github.io/ScrollMagic/
Creado por: Jan Paepke
Instalación:
1. CDN:
2. Descargar desde Github
2. skrollr
skrollr es una biblioteca ligera y pura de JavaScript y CSS, sin jQuery involucrado. Es básicamente el 'Scroll Magic simplified for CSS'. Para usar skrollr, no necesitas saber Javascript o cualquier jQuery. Solo HTML y CSS es suficiente. skrollr utiliza 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 te permite animar todas las propiedades CSS de tus elementos HTML.
Acerca de:
Página de inicio: //prinzhorn.github.io/skrollr/
Creado por: Prinzhorn
Instalación: Descargar desde Github
3. pagePiling.js 
Page Piling es un complemento de jQuery que te permite crear tu sitio web en diferentes secciones que se acumulan 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 (de escritorio, tableta y móvil) y funciona con la mayoría de los navegadores. Se degrada con gracia en navegadores antiguos que no admiten sus animaciones (como IE 7). Para usar el complemento, debe incluir un archivo CSS y un archivo Javascript dentro de su HTML. pagePiling.js se inicializa con 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: //alvarotrigo.com/pagePiling/
Creado por: alvarotrigo
Instalación: Descargar desde Github
4. Alton
Alton es un plugin jQuery 'scroll-jacking to us'. El desplazamiento de desplazamiento significa que el desplazamiento nativo de su navegador está deshabilitado en favor del desplazamiento dirigido que, cuando se inicia (con la rueda del mouse o el panel táctil), lo lleva al siguiente punto vertical de la pantalla, o la parte superior del siguiente contenedor.
Alton permite tres tipos de funciones separadas, llamadas 'Hero', 'Bookend' y 'Standard'. Estándar le permite usar el desplazamiento de página completa, con cada sección de 100% de altura. Un pergamino trae la siguiente sección o la sección anterior. El Bookend le permite crear una experiencia de tipo de libro de lectura, mientras que Hero le permite desplazarse solo a la sección "Héroe", y el resto de la página tiene (habilitado) desplazamiento nativo.
Acerca de:
Página de inicio: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Creado por: hoja de papel
Instalación: Descargar desde Github
5. Stellar.js
Stellar es un complemento de jQuery a través del cual puedes 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 utilizando 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 características 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: //markdalgleish.com/projects/stellar.js/
Creado por: Mark Dalgeish
Instalación: Descargar desde Github
6. multiScroll.js
Este complemento es creado por el mismo desarrollador (alvarotrigo) que creó el complemento pagePiling.js. Lo que básicamente hace el desplazamiento múltiple es que te permite crear un efecto donde cada sección de página se carga en dos partes divididas que se deslizan en su lugar a medida que se carga la página. Echa un vistazo a la página de inicio para ver cómo se ve esto en tu navegador. multiScroll.js le permite configurar 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: //alvarotrigo.com/multiScroll/
Creado por: alvarotrigo
Instalación: Descargar desde Github
7. ScrollMe
ScrollMe es un complemento para agregar efectos de desplazamiento de paralaje simples a tu 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 ligero y todas las animaciones son suaves, siempre y cuando las uses con moderación.
Acerca de:
Página de inicio: //scrollme.nckprsn.com/
Creado por: Nick Pearson
Instalación: Descargar desde Github
8. Desplazamiento de paralaje
Parallax Scroll es un complemento jQuery fácil de usar que te permite crear el efecto de desplazamiento de imagen 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 (mediante el uso de la propiedad CSS `background-image`. Puede hacer que los elementos respondan utilizando las consultas de CSS @media.
Acerca de:
Página de inicio: //parallax-scroll.aenism.com/
Creado por: Aen
Instalación: Descargar desde Github
9. Jarallax
Jarallax es una biblioteca de CSS y Javascript que se especializa en efectos de desplazamiento de paralaje. Jarallax se configura utilizando Javascript (No jQuery, solo JS de vainilla pura). Admite funciones de desplazamiento suavizado, suavizado 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 una excelente documentación sobre cómo personalizar Jarallax para sus necesidades. Jarallax también tiene videos tutoriales que muestran cómo configurar Jarallax para su sitio web y cómo comenzar.
Acerca de:
Página de inicio: //www.jarallax.com/
Creado por: Jarallax
Instalación: Descargar desde el sitio web de Jarallax.
10. Superscrollorama
Superscrollorama es un complemento basado en jQuery que admite animaciones de desplazamiento. Es impulsado por TweenMax y Greensock Tweening Engine, lo que aumenta el rendimiento de la animación y la suavidad. Las animaciones de Superscrollorama se llaman a través de jQuery, y puede usar la mayoría de las funciones de TweenMax.js también. Desafortunadamente, estas animaciones no son totalmente compatibles con los dispositivos móviles (porque los dispositivos de pantalla táctil manejan el desplazamiento de una manera diferente). Sin embargo, utilizando 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 control de desplazamiento, y: el desplazamiento x del control de desplazamiento)
Acerca de:
Página de inicio: //johnpolacek.github.io/superscrollorama/
Creado por: johnpolacek
Instalación: Descargar desde Github
VEA TAMBIÉN: Los 10 mejores generadores de sitios estáticos
![entretenimiento - El estado de la industria musical [FOTOS]](https://gadget-info.com/img/entertainment/673/state-music-industry.png)
