Advertisement
  1. Web Design
  2. ScrollMagic
Webdesign

Cómo construir una pegajosa barra lateral de Scroll de la página con ScrollMagic.js

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Santosa (you can also view the original English article)

En este tutorial, usaremos ScrollMagic.js, una librería JavaScript muy popular, para construir una barra lateral que se vuelve pegajosa en el scroll de la página. En tres pasos (HTML, CSS y JavaScript) describiremos todo el proceso.

Aquí es lo que vamos a crear (consulta la versión de pantalla completa para experimentar su magia completo y darle algunos ♥):

La barra lateral se cubrió sólo cuando la ventana del navegador al menos 768px amplia y alcanza el borde superior de la ventanilla. Pantallas de menor tamaño experimentaron una disposición apilada en su lugar.

¿Qué es ScrollMagic.js?

Para la mejor descripción de ScrollMagic, saldremos más a su página de Github:

"La biblioteca de javascript para las interacciones de desplazamiento mágico."

Creado por Jan Paepke, puede ser efectivamente combinado con la plataforma de animación de Greensock (GSAP) para la construcción de animaciones JavaScript complejo y atractivos. Para entender mejor las capacidades de ScrollMagic, revisa esta lista de ejemplos y echar un vistazo a estos tutoriales y cursos sobre Tuts +.


Introducción a ScrollMagic.js

Para empezar con ScrollMagic, primero tienes que incluir en sus proyectos. Se puede descargar visitando su repositorio GitHub, mediante el uso de un gestor de paquetes (por ejemplo, MNP) o por la carga de los activos necesarios a través de una CDN (por ejemplo, cdnjs).

Para nuestra demostración, elegiremos la última opción. Con esto en mente, si te fijas en la pestaña de configuración de nuestra pluma de demo, verás que he incluido un archivo JavaScript externo:

Demo Set Up

También he incorporado Babel para compilar el código ES6 hasta ES5.

1. el código HTML

Nuestro HTML consta de dos secciones de ayudante y un post. El post contiene dos apartados: los datos del post y lateral del poste. En un escenario real el contenido del post podría corresponder a un blog, una habitación de hotel o un programa de la escuela.

Aquí está el marcado:

2. el CSS

No definir ningún estilo especial para nuestro ejemplo. Curiosamente, aunque utilizamos grid CSS diseño el contenido del post de pantallas medianas y para arriba (≤768px).

Aquí está parte del CSS:

3. el JavaScript

Con el HTML y CSS en su lugar, estamos listos para examinar el código JavaScript encargado de disparar ScrollMagic.

Tenga en cuenta que la mejor manera de comprender el funcionamiento de este plugin es leer su documentación. Otra buena fuente de información es chuleta de ScrollMagic creado por Petr Tichy.

Aquí está nuestro código JavaScript:

Vamos a describir brevemente las acciones necesarias:

  1. Empezamos por crear un controlador.
  2. A continuación, creamos una escena con opciones personalizadas y añadir al controlador.
  3. Si la anchura de la ventana es en 768px menos y la barra lateral alcanza el borde superior de la ventanilla, pin para una duración definida en la escena. En nuestro caso, la duración deseada se calcula restando la altura de los datos del post de la altura del contenido de la barra lateral.
  4. Como la ventana es redimensionada, comprobamos su anchura. Si es menor de 768px, la barra lateral sigue siendo parte del flujo normal del documento, de lo contrario se vuelve pegajosa.

4. el explorador

El plugin sí mismo tiene gran explorador. Más allá de la ayuda del plugin, nuestra demo hace uso de CSS Grid, por lo que sólo funcionará en los navegadores que soportan este método de diseño.

Conclusión

En este tutorial, hemos conseguido construir una barra lateral que se vuelve pegajosa como que baje de la página. Nuestra implementación básica no es la cosa más de gran alcance que se puede construir con esta increíble biblioteca, pero esperemos que útil suficiente para aprovecharse de ella en un próximo proyecto.

Por último, si estás familiarizado con cualquier otros enfoques ScrollMagic más eficaces para la construcción de nuestro demo, háganoslo saber en los comentarios.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.