Gadgetshowto
Los sitios de desplazamiento largo se han convertido en una tendencia de diseño web muy común. Uno de los subtipos más interesantes 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 apariencia fresca 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 llevarlo a cabo. Aquí hay una lista de Los mejores complementos de desplazamiento de Parallax lo que no solo le facilita la creación de sitios de desplazamiento de paralaje, sino que también tiene 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 utilizar estos complementos se requieren algunos conocimientos de tecnologías web (HTML / CSS / Javascript). La mayoría de los complementos enumerados utilizan jquery, por lo que también puede ser necesario tener conocimientos de Jquery.
Complementos de desplazamiento de Parallax
1. ScrollMagic
ScrollMagic es uno de los complementos de jquery más populares y ricos en funciones que existen. Es una biblioteca de JavaScript que le permite crear efectos de desplazamiento aparentemente mágicos. Con ScrollMagic puede animar según su posición de desplazamiento. Esto significa que puede arreglar, mover o animar elementos HTML mientras 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 en gzip). Entre otros complementos de desplazamiento de paralaje, Scroll Magic tiene la mejor documentación y recursos externos. También es perfectamente compatible con el móvil..
ScrollMagic tiene muchos ejemplos enumerados. Échales un vistazo para obtener inspiración y orientación sobre el uso de esta biblioteca..
Acerca de:
Inicio: http://janpaepke.github.io/ScrollMagic/
Creado por: Jan Paepke
Instalación:
1. CDN:
2. Descarga de Github
2. skrollr
skrollr es una biblioteca de JavaScript y CSS pura y liviana, 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 es suficiente. 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 suspenso. skrollr le permite animar todas las propiedades CSS de sus elementos HTML.
Acerca 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 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 ordenada animación deslizante. pagePiling.js es compatible con todas las plataformas (escritorio, tableta y móvil) y funciona con la mayoría de los navegadores. Se degrada con gracia en navegadores más 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 mediante la función (document) .ready:
$ (documento) .ready (function ()
$ ('# pagepiling'). pagepiling ();
);
Para inicializaciones más avanzadas, vaya a README.md.
Acerca de:
Inicio: http://alvarotrigo.com/pagePiling/
Creado por: alvarotrigo
Instalación: Descargar desde Github
4. Alton
Alton es un complemento de 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 en la pantalla, o la parte superior del siguiente contenedor..
Alton permite tres tipos de funciones independientes, llamadas "Héroe", "Sujetalibros" y "Estándar". Estándar le permite utilizar el desplazamiento de página completa, con cada sección de 100% de altura. Un pergamino muestra la siguiente sección o la sección anterior. Sujetalibros te permite crear una experiencia tipo sujetalibros, mientras que Hero te permite desplazarte solo por la sección 'Hero', y el resto de la página tiene (reactivado) el desplazamiento nativo.
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 (). Los ajustes de animación para elementos individuales se pueden 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 principal desplazamiento se encuentre con el borde de la pantalla, más o menos su propio desplazamiento opcional. Esto le permite crear patrones de paralaje intrincados con mucha facilidad. (Documentación estelar)
Acerca 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 hace básicamente el desplazamiento múltiple es que le permite crear un efecto en el que 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. Consulte la página de inicio para ver cómo se ve esto en su navegador. multiScroll.js te permite configurar la velocidad de desplazamiento, la aceleración, la opción de desplazamiento del teclado y muchas más propiedades para que puedas personalizar el efecto exactamente como lo necesitas..
Acerca 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 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 usa mejor para agregar efectos CSS. Es liviano y todas las animaciones son fluidas, siempre que las use con moderación..
Acerca de:
Inicio: http://scrollme.nckprsn.com/
Creado por: Nick Pearson
Instalación: Descargar desde Github
8. Pergamino Parallax
Parallax Scroll es un complemento jQuery fácil de usar que te 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 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 consultas CSS @media.
Acerca de:
Inicio: http://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 está configurado 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 videos tutoriales que muestran cómo configurar Jarallax para su sitio web y cómo comenzar..
Acerca de:
Inicio: http://www.jarallax.com/
Creado por: Jarallax
Instalación: descarga desde el sitio web de Jarallax
10. Superscrollorama
Superscrollorama es un complemento basado en jQuery que admite animaciones de desplazamiento. Está impulsado por TweenMax y Greensock Tweening Engine, que aumenta el rendimiento y la suavidad de la animación. Las animaciones de supercrollorama 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 una manera diferente). Sin embargo, utilizando el método setScrollContainerOffset, se puede acceder a los efectos 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:
Inicio: http://johnpolacek.github.io/superscrollorama/
Creado por: johnpolacek
Instalación: Descargar desde Github
VEA TAMBIÉN: Los 10 mejores generadores de sitios estáticos
