Yurko Brovko
0 
1344
106
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 por la página, las animaciones se activan y, en general, le da una nueva apariencia a cualquier sitio web si se implementa correctamente.
Hacer un sitio de desplazamiento de paralaje a menudo es 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 Parallax 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 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 conocer Jquery.
Complementos de desplazamiento de paralaje
1. ScrollMagic
ScrollMagic es uno de los complementos jquery más populares y ricos en funciones que existen. Es una biblioteca javascript que te permite crear efectos de desplazamiento aparentemente mágicos. Con ScrollMagic puedes animar según tu posición de desplazamiento. Esto significa que puede arreglar, mover o animar elementos HTML a medida que se desplaza, por la duración que desee, y también puede 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. También es perfectamente compatible con dispositivos móviles.
ScrollMagic tiene muchos ejemplos en la lista. Míralos en busca de 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. CDN:
2. Descargar desde Github
2. skrollr
skrollr es una biblioteca ligera de Javascript y CSS puro, sin jQuery involucrado. Es básicamente el 'Scroll Magic simplificado para CSS'. Para usar skrollr, no necesita saber Javascript ni ningún 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 quedan 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: 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 apilan unas encima de otras. 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 CSS y un archivo Javascript dentro de su HTML. pagePiling.js se inicializa con la función (document) .ready:
$ (documento) .ready (función ()
$ ('# 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: descargar desde Github
4. Alton
Alton es un plugin de jQuery 'scroll-jacking to us'. El desplazamiento de desplazamiento 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 la parte superior del siguiente contenedor.
Alton permite tres tipos de funcionalidades separadas, llamadas 'Hero', 'Bookend' y 'Standard'. Estándar le permite utilizar el desplazamiento de página completa, con cada sección de 100% de altura. Un desplazamiento muestra la siguiente sección o la sección anterior. Bookend te permite crear una experiencia de tipo bookend, mientras que Hero te permite desplazarte solo por la sección 'Hero', y el resto de la página tiene un desplazamiento nativo (reactivado).
Acerca de:
Página de inicio: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Creado por: paper-leaf
Instalación: descargar desde Github
5. Stellar.js
Stellar es un complemento de jQuery a través del cual puede agregar fácilmente efectos de desplazamiento de paralaje. Para ejecutar, primero debe ejecutar la función $ .stellar (). La configuración de animación para elementos individuales se puede configurar utilizando atributos de datos en ese elemento.
Stellar incluso te 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 desplazamiento principal se encuentre con el borde de la pantalla, más o menos su propio desplazamiento opcional. Esto le permite crear patrones intrincados de paralaje muy fácilmente. (Documentación estelar)
Acerca de:
Página de inicio: http://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, le permite crear un efecto donde la sección de cada 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 configurar la velocidad de desplazamiento, la flexibilizació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: descargar desde Github
7. ScrollMe
ScrollMe es un complemento para agregar efectos de desplazamiento de paralaje simples a su página. Puede escalar, rotar, traducir y cambiar la opacidad de los elementos en 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 usa mejor para agregar efectos CSS. Es liviano y todas las animaciones son suaves, siempre que las use con moderación..
Acerca de:
Página de inicio: http://scrollme.nckprsn.com/
Creado por: Nick Pearson
Instalación: descargar desde Github
8. Rollo de paralaje
Parallax Scroll es un complemento jQuery fácil de usar que le 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 CSS necesarias para los titulares de imágenes. En lugar de usar 
Jarallax es una biblioteca CSS y Javascript que se especializa en efectos de desplazamiento de paralaje. Jarallax se configura usando Javascript (sin jQuery, solo JS puro de vainilla). 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 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: descargar desde el sitio web de Jarallax
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 de la animación y la suavidad. Las animaciones de supercrollorama se llaman a través de jQuery, y también puede usar la mayoría de las funciones 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 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 contenedor de desplazamiento, y: el desplazamiento x del contenedor de desplazamiento)
Acerca de:
Página de inicio: http://johnpolacek.github.io/superscrollorama/
Creado por: johnpolacek
Instalación: descargar desde Github
VEA TAMBIÉN: 10 mejores generadores de sitios estáticos