8 fragmentos de CSS y JavaScript para agregar efectos de desplazamiento a tu sitio web — Speckyboy

El desplazamiento es una de las necesidades más aburridas del diseño digital. ¿O no? Esto es fácilmente pasado por alto tanto por los diseñadores como por los usuarios. Sin embargo, pasamos la mayor parte del día moviéndose hacia arriba y hacia abajo. Hay algo que decir a favor de hacer un esfuerzo adicional.

Afortunadamente, existe la oportunidad de hacer más. Los efectos rodantes pueden añadir diversión a tu mezcla. También son excelentes para agregar contexto y llamar la atención sobre contenido importante. Algunos efectos incluso crean una sensación de inmersión.

Los desarrolladores web han encontrado todo tipo de casos de uso creativos. Revisamos los archivos de CodePen y encontramos ocho ejemplos principales de cómo CSS y JavaScript pueden mejorar la experiencia del usuario. Quedamos impresionados con los resultados.

A continuación, encontrará de todo, desde elementos básicos hasta impresionantes presentaciones visuales. Seguro que encontrarás inspiración para tu próximo proyecto. ¡Empecemos!

Panel de activación de desplazamiento avanzado

Creador: Ashish Ranjan

Esta es una forma única de desplazarse por las secciones de una página web. Este bolígrafo crea un efecto “apilado” en el que cada nueva sección se superpone a la última sección. La sección anterior se acerca y se desvanece, lo que le permite leer el contenido actual sin interrupción.

Sorprendentemente, desplazarse hacia arriba invierte el efecto. Esta técnica utiliza activadores de desplazamiento GSAP para hacer que las páginas largas parezcan más cortas.

ver bolígrafo Presentación PinStack: panel ScrollTrigger avanzado por Ashish Ranjan

Desplazar texto y rotar galería 3D

Creado por Luis Alberto Martínez Rianjo

Esta galería en 3D da vida a los clásicos carrusel sobre su cabeza. Combina texto en desplazamiento con un cubo giratorio, sincronizados en perfecta armonía. Tenga en cuenta el sombreado y la textura utilizados para crear una sensación de realismo.

La navegación basada en botones le permite evitar el desplazamiento por completo (si lo prefiere).

ver bolígrafo Seis caras/Vaca andante Autor: Luis Alberto Martínez Rianjo

efecto de desplazamiento de estrella

Creador: Aleksa Rakocevic

El efecto de desplazamiento no tiene por qué ser en negrita. A veces los visitantes necesitan y aprecian la sutileza. Este fondo de cielo estrellado tiene paralaje Patrones con un toque de brillo.

El resultado es una navegación divertida y elegante. Considere usarlo para blogs u otro contenido extenso.

ver bolígrafo Efecto de desplazamiento de estrellas Autor: Alexa Rakocevich

Comportamiento de desplazamiento suave

Creador: Margarita

Para mantener una estética sutil, el efecto de desplazamiento de este bolígrafo es una excelente manera de embellecer sus artículos. A medida que avanza por la página, el texto aparece suavemente.

lenguaje de marcado de hipertexto scroll-behavior Se utiliza para garantizar un funcionamiento fluido y agregar algo de estilo al contenido estático. Esto funciona para casi todo el mundo.

ver bolígrafo Nunca fue una competencia – historia completa a través de margarita

espiral de bucle infinito

Creador: Toc

¿Estás buscando una galería de fotos completamente retorcida? Esta obra maestra en espiral seguramente llamará la atención. Desplácese hacia abajo y esta galería de cintas en 3D rotará a través de cada imagen.

Utilice el mouse o el dedo para cambiar la perspectiva. Los resultados son suaves como la seda y mejorarán tu carpeta proyecto.

ver bolígrafo espiral de bucle infinito Vía Trafigura

Desplazamiento CSS-línea de tiempo resaltado de palabras

Creado por Daniel Heim

Esta es una manera de enumerar sus servicios y/o logros con estilo. A medida que se desplaza, el texto de la izquierda permanece igual, mientras que el texto de la derecha salta a la siguiente palabra o frase.

se utiliza scroll-snap-align y scroll-snap-type Las propiedades CSS mantienen las presentaciones limpias y ordenadas. JavaScript establece propiedades basadas en las acciones del usuario. El resultado es una forma atractiva de generar impacto a través de la tipografía.

ver bolígrafo Desplazamiento CSS-línea de tiempo resaltado de palabras Daniel Heim

borde de sección elástica

Creado por Tom Miller

Desplazarse de una sección de página a otra no tiene por qué ser aburrido. Pequeños efectos como esta animación “animada” pueden agregar contexto y valor de entretenimiento al proceso. Cuando llegues al final de una sección, serás recibido por un rebote.

Aquí tienes una idea: cuando llegues al final de la página, agrega un poco de confeti. Después de todo, ¡hay que celebrar a los visitantes leales!

ver bolígrafo borde de sección elástica Tom Miller

Columna de desplazamiento inverso

Creador: Ryan Yu

El desplazamiento de varias columnas de la galería de fotos recuerda a una máquina tragamonedas. Las columnas están sincronizadas, pero la sección central se mueve en direcciones opuestas. Es divertido e inmersivo sin abrumar al usuario.

Una vez más, el disparador de desplazamiento GSAP es el secreto para lograr este efecto.

ver bolígrafo Columna de desplazamiento inverso Autor: Yu Ruien

Utilice efectos de desplazamiento para mejorar la experiencia del usuario

El desplazamiento no tiene por qué ser una ocurrencia tardía en sus proyectos de diseño. El ejemplo anterior demuestra lo que se puede lograr con sólo un poco de codificación e imaginación.

En algunos casos, estos efectos pueden ser la estrella del espectáculo. considerar galería de fotos en nuestra revisión. Se vuelven más interesantes e interactivos cuando vas más allá de los diseños de cuadrícula preestablecidos. Obtendrá una apariencia y funcionalidad de alta gama.

Por otro lado, la sutileza tiene su lugar cuando se trata de añadir efectos de desplazamiento a páginas más tradicionales. Un toque de elegancia puede transformar el contenido estático en algo más memorable.

La decisión es tuya. Considere a su audiencia y Necesidades de accesibilidady elija el efecto que tenga más sentido.

¿Quieres ver efectos de desplazamiento aún más geniales? echa un vistazo a nuestro Colección de bolígrafos de código!

Más fragmentos de efectos CSS