8 fragmentos de CSS y JavaScript para agregar efectos de desplazamiento a su sitio web …

Viajar es una de las tareas m√°s b√°sicas que les pedimos a los usuarios que realicen. Y, a juzgar por la cantidad de desplazamiento en sitios web y aplicaciones de hoy, estamos pidiendo mucho.

Agregar efectos basados ‚Äč‚Äčen desplazamiento puede ser una excelente manera de mejorar la experiencia del usuario. Es decir, siempre y cuando no interfieran con la capacidad de explorar extensiones largas de contenido. Los efectos deber√≠an facilitar las cosas y agregar un poco de estilo a la mezcla.

Aquí hay una colección de efectos de desplazamiento y utilidades que impresionarán a sus visitantes y (con suerte) se mantendrán fuera de su camino.

Seccion por Seccion

Las p√°ginas web modernas generalmente se dividen en varias secciones de contenido, cada una con sus propios elementos distintos. Este fragmento √ļtil agrega un bot√≥n (disponible en varios estilos) en la parte inferior de la pantalla que permite a los usuarios hacer clic y desplazarse a la siguiente secci√≥n. Use la ID de CSS junto con jQuery para que la navegaci√≥n funcione.

Vea el lápiz de demostración: el botón de desplazamiento CSS de Naoya

Todas las indicaciones dicen que te est√°s moviendo

Los indicadores de desplazamiento se han vuelto muy populares en los sitios ricos en contenido. Comunican qué tan lejos está el usuario de una historia en un método fácil de digerir. La bonificación para esta solución es solo CSS.

Vea el l√°piz indicador de desplazamiento CSS solo por Mike (@MadeByMike)

Puedes desplazarte si quieres

Bueno, ese estiramiento no es necesariamente un efecto en s√≠ mismo. Pero tiene un prop√≥sito. A menudo, los dise√Īadores usan im√°genes de fondo de pantalla completa y otros elementos que pueden hacer que el desplazamiento sea ambiguo para el usuario. Con eso, peque√Īos elementos como este icono de desplazamiento animado informan a los usuarios que s√≠, que habr√° m√°s contenido por venir. No es adecuado para todas las situaciones, pero hay momentos en que tiene sentido.

Vea el rotulador de animación Micro CSS del sitio de desplazamiento Ryan Mulligan

El increíble encabezado de contracción

Los titulares adhesivos como este se han convertido en un elemento b√°sico a lo largo de los a√Īos. ¬ŅPorque? Pueden agregar un mont√≥n de conveniencia al usuario. La capacidad de navegar a otras √°reas de un sitio web sin tener que desplazarse a la parte superior de la p√°gina simplemente facilita la vida. Como de costumbre, este ejemplo se reduce a un elemento m√°s compacto a medida que desplaza la p√°gina.

Ver encabezado de desplazamiento de Blake Bowen

Desliza a la derecha

Aquí hay otra versión del encabezado de la pegatina. Esta vez, está configurado para un sitio web de una página. La navegación superior resalta automáticamente la sección de contenido actual y permite a los usuarios cambiar rápidamente entre ellas.

Consulte Navegación del control deslizante de Ettrics Sticky (Responsive)

Colores de vuelo

Echemos un vistazo a otro fragmento que ser√≠a ideal para sitios de una sola p√°gina o p√°ginas largas con m√ļltiples secciones de contenido. Use CSS y un poco de jQuery para cambiar el color de fondo a medida que se desplaza hacia abajo (y s√≠, funciona a la inversa). Tambi√©n puede consultar un script que hace lo mismo, pero con gradientes.

Ver el bolígrafo Cambiar el color de fondo mientras se desplaza la versión 2 por JP Nothard

Convertir vertical a horizontal

¬ŅAlguna vez ha querido que su sitio se desplace horizontalmente en lugar de verticalmente? Puede hacerlo sin ning√ļn script sofisticado, por supuesto. ¬ŅPero qu√© pasa si no quieres una barra de desplazamiento horizontal? En ese caso, necesitar√≠as algo como este ejemplo. Utiliza un script llamado jInvertScroll, que convierte su sitio en un desplazamiento lateral, completo con efectos de paralaje.

Vea el l√°piz de desplazamiento lateral jInvertScroll by SitePoint

Animar en desplazamiento

Una de las tendencias más importantes hoy en día es animar el contenido cuando ingresa a la ventana gráfica. Cuando se hace con buen gusto, puede llamar la atención sobre cada sección. Pero yendo demasiado lejos y más como un acto de circo en línea. Si decides bucear, considera este tramo. Está alimentado por la biblioteca AOS (desplazamiento animado).

Ver el l√°piz AOS – animaciones Snik

Scroll, usuario web

En el pasado, el pensamiento predominante era evitar el desplazamiento a toda costa. Ahora, las redes sociales y los tel√©fonos inteligentes nos han permitido cubrir largos per√≠odos con nuestros pulgares (y cursores). Entonces, tambi√©n podr√≠amos hacerlo divertido y √ļtil.

Esto es lo que pretenden hacer los fragmentos anteriores. Cubren una variedad de casos de uso y, en la mayoría de los casos, evitan ser molestos. De eso se trata construir un UX sólido.

¬ŅBuscas m√°s ideas? ¬°Eche un vistazo a nuestra colecci√≥n CodePen para obtener fragmentos de desplazamiento adicionales!