Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration

Diseño Web Inspiración: Scrollin', Scrollin', Scrollin'.

by
Read Time:3 minsLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
15+ Tools for Building Your Portfolio on the Web
Discoverability and Feedback in Web Design

Spanish (Español) translation by Rodney Martinez (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é.

Empieza aquí, luego mueva...

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:

httpwwwgugliericomhttpwwwgugliericomhttpwwwgugliericom
www.guglieri.com

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.

httpseufrankbodycomhttpseufrankbodycomhttpseufrankbodycom
eu.frankbody.com

El código JavaScript (o más bien jQuery) detrás es el siguiente:

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.

Zoo - Responsive One Page Parallax ThemeZoo - Responsive One Page Parallax ThemeZoo - Responsive One Page Parallax Theme
Zoo - Responsive tema parallax de Una Página
Startuply Multi-Purpose Startup ThemeStartuply Multi-Purpose Startup ThemeStartuply Multi-Purpose Startup Theme
Startuply — Tema Multi-Proposito
Borderland - A Daring Multi-Concept ThemeBorderland - A Daring Multi-Concept ThemeBorderland - A Daring Multi-Concept Theme
Borderland - Un tema multi-concepto audaz
Scroller - Parallax Scroll Responsive ThemeScroller - Parallax Scroll Responsive ThemeScroller - Parallax Scroll Responsive Theme
Scroller - Parallax, Scroll y un Tema Responsive
ROSA - An Exquisite Restaurant WordPress ThemeROSA - An Exquisite Restaurant WordPress ThemeROSA - An Exquisite Restaurant WordPress Theme
ROSA - Un tema exquisito para restaurante en WordPress 

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!

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.