Inspiración en diseño web Desplazamiento, Desplazamiento, Desplazamiento

Todos los navegadores web tienen una cosa en común: casi sin excepción nos permiten desplazarnos por el contenido. El desplazamiento nos lleva desde la parte superior de un documento hasta la parte inferior. Pero permite mucho más que eso, y para bien o para mal, los diseñadores web han estado desafiando a la barra de desplazamiento desde hace algún tiempo, viendo cómo se puede utilizar para interactuar con la web..

Como es habitual en estos posts de inspiración; vamos a ver algunos ejemplos en la naturaleza, examinar algunas de las técnicas utilizadas, señalar algunos tutoriales y cursos para ayudarlo a aprender lo que encontramos, y enumerar algunos ejemplos inspiradores en Envato Market.

Inspiración

Comenzaremos con forbetter.coffee (diez puntos para la URL) que comienza con un grano de café, luego sigue su progreso en la página a medida que se muele, se filtra y se vierte en una taza de café..

Empieza aquí, luego desplaza ...

Esto está en el espíritu del ejemplo de desplazamiento clásico lostworldsfairs.com. La posición del grano de café es fijo En todo momento, se mantiene fijo en el navegador a medida que el fondo se desplaza. Eventualmente se encuentra con ciertos puntos de referencia, con lo cual su posición se cambia a relativo y se desplaza por la parte superior de la pantalla, solo para ser reemplazado por diferentes elementos. Todo esto se hace con scrollmagic.io..

Susan Lin usa un efecto similar (aunque una estética completamente diferente) en su página personal. Prepárate para sentir nostalgia por los juegos de rol de 8 bits mientras el sprite de Susan se desplaza hacia abajo a través del paisaje pixelado:

Prepárese para un tutorial detallado sobre cómo se logra esto muy pronto!

www.voog.com utiliza el desplazamiento a diferentes efectos. Su diseño dividido combina colores brillantes e imágenes de fondo intercambiables, fijas en sus posiciones enmascaradas.

Todo esto se hace con JavaScript, aunque puede lograr un efecto de fondo enmascarado muy similar, como lo muestra Kezz Bracey, con nada más que CSS.

Paralaje

¿Cómo hemos llegado tan lejos sin mencionar el paralaje? Vamos a arreglar eso ahora, con la ayuda de @claudioguglieri. Echa un vistazo a su página de inicio, que comienza con una carta abierta bellamente presentada. Desplácese hacia abajo y experimente la profundidad sugerida por las hojas y los pétalos de rosa cuando pasan flotando:

www.guglieri.com

Se puede encontrar paralaje más sutil en sublime.fyi; una agregación curada de charlas de diseño y entrevistas por parte de algunas figuras muy reconocibles. Desplácese hacia abajo y vea capas de gráficos e imágenes duotono a la deriva:

Firewatch es impresionante. Impresionante en los gráficos pintados del juego, en el concepto, en su comercialización. Y su página web sigue su ejemplo. Desplácese hacia abajo para obtener una sensación de profundidad y entorno, y también escalar, a medida que se contrae en relación con el paisaje..

El siguiente ejemplo es un poco diferente, ya que la posición de desplazamiento de la ventana se utiliza para influir en un detalle muy pequeño. frankbody.com tiene un panel de menú que se adhiere a la parte superior izquierda de la ventana gráfica, luego, a medida que se desplaza, su patrón de fondo cambia sutilmente.

eu.frankbody.com

El JavaScript (o más bien jQuery) detrás de él es el siguiente:

// función activada en la ventana scroll $ (window) .on ('scroll', function () // almacenar la posición vertical actual de la barra de desplazamiento var scroll_top = $ (window) .scrollTop (); // cambiar inline css regla, basada en el factor de scroll_top $ ('. menu'). css ('background-position-y', scroll_top * -.1););

Siéntase libre de separar esto en este ejemplo:

Mercado de envato

Echemos un vistazo a algunos temas y plantillas de desplazamiento inspiradores para la venta en Themeforest.

Zoo - Responsive One Page Parallax ThemeStartuply - Tema de inicio multiusosBorderland - Un tema multi-concepto atrevidoScroller - Parallax, Scroll & Responsive ThemeROSA - Un exquisito restaurante tema de WordPress

Aprenda acerca de los eventos de desplazamiento

Si está interesado en crear sus propias obras maestras de desplazamiento, visite el curso reciente de Craig Campbell, Scroll Events Made Easy. En él, aprenderá acerca de los conceptos básicos de los eventos de desplazamiento, luego compilará varios ejemplos utilizando bibliotecas existentes como parallax.js, wow.js y skrollr.js. Toma este curso por $ 9.

Además, marque Parallax Scrolling for Web Design, para redondear su aprendizaje.

Solucionar problemas de rendimiento de representación

Cuando juegas con el desplazamiento y el posicionamiento, potencialmente estás jugando con la capacidad del navegador para repintar la escena. En este gran consejo rápido de Harry Roberts, demuestra algunos problemas de rendimiento utilizando el inspector del navegador..

Has llegado al fondo

Eso es todo para este resumen de inspiración, nos vemos en el siguiente.!