Parallax Scrolling Made Easy con StickyStack.js

Efectos de paralaje llamar la atención rápido. Estos efectos mantener ciertos fondos a la vista mientras se desplaza por la página. Encontrará el desplazamiento de paralaje en muchos sitios web y temas de WordPress y son una gran parte del diseño web moderno..

También puedes construir un estilo de paralaje único utilizando la StickyStack.js enchufar. Sus construido en jQuery y mantiene cada sección de la página principal pegada a la parte superior a medida que se desplaza hacia abajo.

Esto crea el ilusión de un sitio web en capas donde cada pagina “pilas” encima de la otra Es realmente genial y bastante fácil de configurar por tu cuenta.

Si bien es bastante fácil de configurar, requiere cierta comprensión del desarrollo frontend.

Necesitas primero crear secciones de página individuales Dentro del contenedor principal. De esta manera tendrás Todo encerrado en el HTML., para que puedas apuntar a todo con la función StickyStack jQuery.

También viene con algunas opciones donde puede personalizar el contenedor principal, la elementos que deben apilarse, y una posible sombra de la caja si te gusta ese efecto.

Aquí está un muestra de código desde la página de GitHub:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Si bien esto no se ha actualizado en aproximadamente dos años, sigue siendo un complemento muy confiable. Eso Trabajé en todos los navegadores que probé. (Chrome, Safari, y Firefox) con Soporte para todas las versiones de jQuery..

Además, el archivo minificado es solo 2KB que es un tamaño decente para un plugin.

Para obtener más información, visite el repositorio principal y vea lo que StickyStack puede ofrecer. Creo que funciona mejor en sitios web de una sola página o Páginas de destino con grandes fondos de pantalla completa.

También puedes echar un vistazo a Demo en vivo en CodePen Si quieres ver cómo se ve esto en un sitio en vivo.