() translation by (you can also view the original English article)
Los navegadores web tiene una cosa en común: casi sin excepción, nos permiten desplazarnos a través del contenido. Desplazarnos desde la parte superior del documento hasta el fondo. Pero nos permite aún más que eso para bien o para mal, los diseñadores web han sido desafiados por la barra de desplazamiento por algún tiempo, ahora viendo como puede ser utilizado para interactuar con la web.
Como siempre en estas publicaciones de inspiración, vamos a ver algunos ejemplos, examinaremos algunas de las técnicas usadas, apuntar a algunos tutoriales y cursos para ayudarle a aprender lo que encontramos, y enumerar algunos ejemplos de inspiración en Envato Market.
Inspiración
Empezaremos con forbetter.coffee (diez puntos por la URL) el cual comienza con un grano de café, luego sigue su progreso bajando la página a medida que crece, filtrado y vertido en una taza de café.
Esto está en el espíritu del ejemplo clásico de desplazamiento lostworldsfairs.com La posición del grano de café está fixed a través de todo, por lo tanto, permanece fijo en el navegador mientras se desplaza por el fondo. Eventualmente, encuentra ciertos puntos tras lo cual su posición está cambiada a relative y éste se desplaza afuera de la parte superior de la pantalla, solamente para ser reemplazado por diferentes elementos. Todo esto está hecho con scrollmagic.io.
Susan Lin use un efecto similar (aunque completamente diferente) en su página de inicio personal. Prepárese para sentirse nostálgico por la dramatización de los juegos de 8bit como el duende bajando a través de un paisaje pixeleado.
Prepárese para un tutorial detallado de cómo puede lograr hacer esto, ¡muy pronto!
www.voog.com usa diferentes efectos de desplazamiento. Su composición dividida, combina con los colores brillantes e intercambiando las imágenes del fondo, fijado en su posición enmascarada.
Todo esto, está hecho en JavaScript, aunque puede lograr un efecto de fondo enmascarado muy similar, como lo muestra Kezz Bracey, con nada más que CSS.
Parallax
¿Cómo hemos llegado tan lejos sin mencionar parallax? Vamos a arreglar eso ahora, con la ayuda de @claudioguglieri. Examine está página de inicio, la cual empieza con una hermosa presentación de una carta abierta. Desplácese hacia abajo y experimente la profundidad sugerida por las hojas y los pétalos de rosas que van flotando:
Claudio usa este tipo de cosas en la mayoría de sus sitios web, revise el sitio www.wedontneedroads.co mientras usted está.
Puede encontrar más parallax sutil en sublime.fyi, una organización de charlas de diseño y entrevistas por algunos figuras muy reconocidas. Desplácese hacia abajo y vea las capas de gráficos duotonos e imágenes que cambian al pasado:
Firewathc es impresionante. Impresionante en el juego de los gráficos pintados, en el concepto en su marketing. Y su sitio web sigue. Desplácese hacia abajo para ganar una sensación de profundidad y del ambiente, y también de escala mientras usted recude en relación al paisaje.
Este próximo ejemplo es un poco diferente, en ese la ventana desplaza su posición usado por la influencia de bastantes detalles pequeños. frankbody.com tiene un panel de menú que queda pegado en la parte superior izquierda del puerto de vista, luego; mientras usted se desplaza, su patrón de fondo cambia sutilmente.
El código JavaScript (o más bien jQuery) detrás es el siguiente:
1 |
// function triggered on window scroll
|
2 |
$(window).on('scroll', function() { |
3 |
|
4 |
// store the current vertical position of the scroll bar
|
5 |
var scroll_top = $(window).scrollTop(); |
6 |
|
7 |
// change inline css rule, based on factor of scroll_top
|
8 |
$('.menu').css('background-position-y', scroll_top * -.1); |
9 |
});
|
Siéntase libre de sacar esto aparte en este ejemplo:
Envato Market
Echemos un vistazo a algunos temas de desplazamiento como inspiración y como plantillas de ventas en Themeforest.
Aprenda más sobre los Eventos de Desplazamiento.
Si usted está interesado en crear sus propias piezas maestras de desplazamiento, entonces revise el reciente curso de Craig Campbell Eventos Scroll Hechos con Facilidad. En él, usted aprenderá acerca de los básicos eventos scroll, luego construirá varios ejemplos usando bibliotecas existentes tales como parallax.js, wow.js y skrollr.js Tome este curso por $9.
Adicionalmente, revise Parallax Scrolling para el Diseño Web, para completar su aprendizaje.
Problemas con la interpretación de rendimientos.
Cuando usted está jugando con el desplazamiento y la posición, usted está potencialmente jugando con las habilidades del navegador para repintar la escena. En este magnífico consejo de Harry Roberts, demuestra algunos problemas de rendimientos usando el inspector del navegador.
Ha llegado al fondo.
Esto es todo para este resumen de inspiración, ¡lo veré en la siguiente!
