El aspecto bidimensional limitante de los monitores de computadora de hoy en día restringe cómo se construyen los sitios web. Al diseñar diseños de sitios web de paralaje, ¡estos pueden traer efectos y gráficos a la belleza tridimensional ante sus ojos! A menudo creado con las bibliotecas de Adobe Flash o JavaScript, este efecto no se usa a menudo, pero ofrece una sensación única.
A continuación hay algunos ejemplos muy creativos que he reunido para la inspiración digital. Los diseñadores web de todo el mundo pueden reunir ideas para sitios web de estilo paralaje. No es un tema muy confuso, y una vez que tenga un estilo de diseño establecido en su mente, es fácil desentrañar algunos gráficos y codificar todo el conjunto.
Rastape
Aquí todo el diseño de fondo es representativo de una cadena de restaurantes. La navegación principal superior es fácil de encontrar y las animaciones son muy elegantes.
Al primer aterrizaje en la página, la música discordante se inicia automáticamente. Puede que esta no sea la mejor habilidad de presentación, pero muestra el carácter. Por suerte, el reproductor de audio hacia la parte superior de la pantalla se puede modificar fácilmente. También encontrarás datos de contacto hacia la parte inferior.
Billy's Downtown Diner
Billy's Diner proporciona un elegante sentido de clase al tema retro. Al mostrar una hermosa página con fuentes y colores creativos, el sitio web es fácil de navegar.
Los aspectos más destacados incluyen una navegación bien colocada y una tipografía brillante. Gran parte de la sensación del comensal se aplica a la animación del encabezado. Este ejemplo de desplazamiento de paralaje toca los tonos nostálgicos del clásico restaurante de los años cincuenta.
Feria Mundial de Atlantis
Este es personalmente uno de mis sitios web favoritos. Las animaciones de diseño son muy fluidas y el desarrollador web utilizó principalmente todas las técnicas de CSS para lograrlas. Tanto los principiantes como los profesionales deben maravillarse con esta obra de arte.
A medida que desciende a niveles más bajos del sitio web, puede encontrar información de contacto y espacios publicitarios en blanco. Puede notar que el efecto es seguir a una persona por un ascensor hasta las profundidades más profundas del océano hacia Atlantis. Las ilustraciones vectoriales en impresionantes para los diseñadores visuales de todo el mundo.
Diseños B5
Con B5 Design Studio, su desplazamiento de paralaje se mueve horizontalmente a través de la navegación. La página de inicio inicial presenta algunos enlaces a fuentes externas sin barra de desplazamiento lateral. No hay nada demasiado confuso acerca de la interfaz de usuario, que realmente se destaca.
Notará que todo el texto de la página está escrito a través de HTML y con un estilo CSS. No se ha aplicado Flash, ni siquiera con imágenes, y luego de un examen más detallado, los autores son impulsados por jQuery. Esto también se puede ver en su formulario de contacto que cuenta con información sobre herramientas útiles.
Snoggle Media
Este sitio web también ha sido creado con jQuery. Puede observar que ejecutan una navegación lateral que se mueve en sentido opuesto a B5, que es verticalmente hacia arriba y hacia abajo de la página. Su uso de colores de fondo brillantes combina bien con los tonos minimalistas.
El sitio ejecuta un blog que funciona bajo un tema similar. La compañía es más probable que esté ejecutando WordPress 3.x con una división jQuery en el HTML. También han capitalizado el SEO de manera fenomenal al ofrecer URL alternativas y únicas para que Google las rastree.
Diseño web Karlsruhe
Aunque está escrito exclusivamente en alemán, el diseñador del sitio web ha tenido mucho cuidado al respaldar el desplazamiento de paralaje. Todo el sitio web aparece como una vista en primera persona hacia un soporte de madera.
Las notas se colocan como navegación y el diseñador incluye ejemplos de sus trabajos anteriores. El estilo de cartera que presenta parece mucho más dinámico que muchos. Este puede ser otro gran uso de la biblioteca jQuery en el trabajo. Al hacer clic en una imagen aparece una vista previa y más información sobre el proyecto.
Estudio de relleno
Fill Studio es un ejemplo elegante de pensamiento muy minimalista. Puede encontrar ejemplos de tonos suaves en todo su sitio web. Falta mucho en la página principal, pero la navegación es simple y mantiene al visitante concentrado en solo unas pocas tareas.
Su página de portafolio es muy impresionante y demuestra hermosas obras artísticas. Cada uno se designa como un esquema de color único que se muestra al pasar el mouse. También muestran más información de proyectos y enlaces de contacto.
Kalendiar
Cuando pienso en el único Kalendiar destaca sobre el resto. Su sitio se enfoca en una vista similar en primera persona de un paisaje aparentemente desordenado. La tipografía y las imágenes gráficas se extienden y demuestran un poco de confusión.
Realmente tengo mucho respeto por su estilo único de arte. Es muy difícil diseñar sitios web, especialmente algo tan complejo. Creo que su título tiene mucho poder, además del hecho de que su idioma nativo no es el inglés y se pierde en una gran audiencia.
Titular de creatividad
Una hermosa agencia de diseño creativo que ofrece colores intensos y profundos para muchos de sus componentes de interfaz de usuario. Una vez más, encontrará sus enlaces principales y rutas de navegación hacia la parte superior del sitio.
El componente de paralaje es capaz de demostrar coordenadas únicas para contener información. Este estilo de diseño presenta una configuración de tablero o escritorio. Los usuarios son guiados junto con los enlaces a las áreas donde pueden encontrar información de la compañía, detalles de contacto y trabajos de ejemplo.
Senderos y caminos de Tennessee
Absolutamente adoro el sitio web de viajes de Tennessee. Presentan algunas hermosas animaciones de paralaje e incluso ofrecen un breve tutorial justo antes de que se cargue el sitio. Por supuesto, no es difícil trabajar a través de su sitio, pero sí ayuda a los discapacitados tecnológicos.
Hay una gran cantidad de información colocada dentro del sitio. Muchas de las atracciones enumeradas contienen páginas de Facebook que están vinculadas directamente desde el sitio. Todas las ventanas emergentes contienen texto real y se desarrollan bajo jQuery. La página en realidad presenta muchos menús, todos los cuales utilizan poderosas técnicas de animación flotante y de subpáginas.
Juego mush
Me encantan las ilustraciones vectoriales digitales asignadas a Mush.Su marca es adorable y realmente se destaca entre los muchos otros sitios web. Destacado como un fondo de paralaje, se puede ver el movimiento de los árboles y las ramas colgantes en el bosque.
Notarás que Mush ha incluido un breve video de demostración para su aplicación. ¡Se presenta en Windows Phone 7 y utiliza muchos motores gráficos geniales! Como siempre, encontrará información de contacto breve y enlaces hacia la sección de pie de página inferior.
Azote su sitio web
Whip Your Website es una aplicación limpia con algunas características brillantes. Puede ingresar una URL en la barra de direcciones para alterar su diseño. Todo está construido en HTML5 y presenta algunos efectos jQuery personalizados. ¡Es un lugar estupendo para jugar si tienes 15 minutos!
Diego Chávez
Dhype no es el epítome de los diseños de paralaje, aunque sí cuenta con una interfaz vibrante. Personalmente me encantan los efectos de fondo. Es funky, y realmente se suma a la personalidad de las empresas.
La mayoría de los enlaces del sitio mostrarán ventanas emergentes o páginas de diapositivas. Estos incluyen datos de contacto y trabajos de cartera. Dado que el sitio tiene pocas páginas, ¡hace que la navegación sea muy fácil! Es difícil perderse, lo cual es bueno ya que toda la información que necesita está enfocada al frente y al centro.
Netlash
Las energías creativas colocadas en el diseño de Netlash son extraordinarias. Me encanta su uso de la navegación de estilo del tablero de instrumentos, ya que da vida a muchas de las imágenes de fondo.
Puedes desplazarte verticalmente a través de las diferentes páginas. Esto permite la navegación sin enlaces o controles deslizantes jQuery y también muestra cómo se puede rastrear todo en una sola página. También notará que los detalles de contacto y los antecedentes de cambio de información de la compañía presentan la apelación de que ha visitado una página nueva.
Nicosia Longhi
La siguiente cartera incluye tantos ajustes fascinantes de la interfaz de usuario. La música de fondo es agradable y no interfiere con la navegación por el diseño. De hecho, diría que es un hermoso acento para el tema general del sitio.
Esto se acompaña de una discografía de obras musicales y otra información sobre los contactos. Toda su información también se muestra en las ventanas de jQuery sin volver a cargar la página. Esto ahorra mucha energía a largo plazo y deja a los usuarios sintiéndose inspirados.
GaBL?
Aparece cuando Gable se ejecuta a través de un motor jQuery con ventanas emergentes de blackbox. Estos se utilizan comúnmente para contener galerías de imágenes y pequeños fragmentos de información de la página. El menú de navegación se puede encontrar dentro de su galería de ilustraciones de paralaje, aunque es un poco confuso.
Gran parte de la información del sitio está bien diseñada y ofrece algunos recursos bastante sólidos. Disfruto mucho del diseño y, aunque no hay ninguna etiqueta en cada elemento, puedes desplazarte para averiguar a dónde conducen. Y no es tan malo simplemente explorar ya que cada página se abre en la misma ventana sin ninguna actualización.
Head2Heart
La galería de vectores de nubes parece trazar un camino entre el cielo. A medida que sigue los números de navegación en la parte inferior, es muy sencillo encontrar información y rutas hacia lo que está buscando.
Realmente me maravillo con la combinación de colores y el diseño de este sitio web. Hay tantas animaciones fantásticas que parecen tan fluidas en comparación. Su formulario de contacto muestra algunos trabajos vectoriales débiles y componentes de interfaz de usuario vibrantes. Si te gustan los sitios web de paralaje, este es uno de los que puedes visitar para inspirarte.
Esteban Muñoz
La cartera de Esteban ofrece una amplia gama de ejemplos. Su trabajo es fenomenal y se muestra proporcionalmente en la parte superior de su sitio web. Aquí es donde también puede encontrar enlaces de navegación que incluyen contenido en la misma página.
Los efectos de desplazamiento de paralaje se aplican en gran medida en su pie de página con el arte de la nube dibujado a mano. Cuenta con algunos enlaces externos únicos a fuentes externas que patrocinan su sitio web en galerías de diseño. Esta es una forma poderosa de generar confianza entre sus clientes y lograr más proyectos de trabajo.
Tarifa casa de campo
¡Otro diseño de paralaje con desplazamiento horizontal que encaja perfectamente en nuestro conjunto! La tarifa de la granja mantiene una configuración de cocina de campo antigua que se muestra en el fondo de cada sección. Toda la información adicional se incluye en una ventana emergente con texto real.
Todo el sitio parece ejecutarse en HTML y jQuery, que alimenta las animaciones. Encontrará enlaces de navegación estándar hacia la parte superior que representan detalles de contacto y premios de tarifas. Crean deliciosos postres y otros postres y han pasado por el negocio durante años.
BeerCamp en SXSW 2011
Beer Camp utiliza una tipografía muy vibrante para demostrar su trabajo. Gran parte de los títulos de encabezados y subtítulos son difíciles de leer, incluso para aquellos con gran vista. Al desplazarse hacia afuera con la rueda del mouse, puede hacer zoom en el texto que puede parecer pequeño inicialmente.
Además, a medida que navega entre los enlaces de encabezado, se muestran los efectos de animación. Esto se puede ver en cualquiera de sus páginas y demuestra un efecto fantástico. El sitio parece estar escrito en HTML que puede usar bibliotecas de fuentes jQuery.
Ben el guardaespaldas
Soy un gran fanático del trabajo de Ben. Ha creado un mundo digital dentro de su sitio web que te permite navegar por callejones oscuros dentro de su ciudad. No encontrará enlaces de navegación físicos ya que la única información se dirige hacia la parte superior e inferior de la página.
Ben también pone toda su galería en una página. Esto significa que no es refrescante, como es común con todas las galerías de paralaje que hemos visto hasta ahora. La verdadera inspiración aquí radica en los gráficos de fondo y el complejo estilo de animación jQuery. Soy un fanático del diseño de ben y me encantaría ver a otros diseñadores creando ambientes similares en sus sitios web.
TEDxPortland
TED es un evento maravilloso con algunos de los oradores más expertos. Su sitio web presenta algunos videos increíbles, y para su evento en Portland no podría estar más feliz con sus opciones de diseño.Todo el sitio web se basa en el desplazamiento de paralaje manteniendo el rumbo intacto.
Puede navegar por cada página con facilidad y sin ninguna actualización. El fondo negro proporciona un lienzo perfecto para que las letras blancas nítidas salten de la página. Puede elegir desplazarse con la barra de desplazamiento lateral en lugar de usar los enlaces de navegación. Sin embargo, este método es mucho más lento y requiere un poco de conocimiento para navegar manualmente.
Resolucionismo
Esta empresa de diseño web ha hecho muchas cosas bien en su diseño. Aplican muchos efectos de jQuery a lo largo de sus páginas para iluminar un poco las cosas. Puede encontrar los enlaces de su cartera rápidamente accesibles y con un jolty rebote de energía de animación.
Cada estudio de caso ofrece un enlace directo al proyecto, así como un video complementario para cualquier cliente potencial. Encontrará información de contacto y direcciones de Google Maps hacia la parte inferior de la página. Puede ordenar sus publicaciones individuales en la esquina superior derecha de cada panel.
David Beckham
El sitio web de David es muy minimalista, lo que demuestra lo simple que puede ser la transferencia de información. Se puede acceder a cada panel deslizante a través del sistema de navegación a la derecha. Una serie de puntos blancos está disponible y se puede hacer clic como secciones de navegación.
Los paneles incluyen un fondo diferente de David y también tienen letras blancas sobre un fondo negro. Hacia el fondo encontrarás recursos para contactos y créditos. También un elegante contador de píxeles que muestra cuántos píxeles individuales ha desplazado
Ap-o
Apo tiene un sitio web fantástico con hermosas animaciones de paralaje. En la esquina inferior derecha encontrará una flecha que lo llevará de cada sección de la página a la siguiente. Su sitio web se ejecuta en una atmósfera vertical, lo que hace que sea mucho más fácil desplazarse hacia abajo sin ningún efecto de jQuery.
Un inconveniente que he encontrado es que inicialmente no hay mucho sistema de navegación. Puede resultarle difícil pasar por cada página y extraer claramente la información que necesita. Sus fondos también son un poco duros para los ojos, que podrían suavizarse o curarse un poco más.
Víctima de vampiro
Ahora este es un sitio web aterrador. El diseñador incluía una gran cantidad de ilustraciones realistas de vampiros, monstruos y callejones oscuros para asustar incluso a los fantasmas más oscuros. Sin embargo, el desplazamiento de paralaje funciona de manera brillante! Es una adición fantástica en el tema espeluznante.
La información se presenta verticalmente, lo que se podría esperar de cualquier diseño de estilo de sitio web clásico. Los enlaces y el texto de la página son un poco difíciles de leer, ya que las imágenes de fondo discordantes realmente saltan sobre ti. Pero tengo que aplaudir a los diseñadores en un increíble esfuerzo creativo como nunca antes había experimentado.
Fabricación de Essai
Un aspecto que realmente me gusta de su diseño es la inclusión de la traducción de idiomas. Puede optar por la transición entre italiano o inglés desde la esquina derecha. El menú del sitio web también está oculto por defecto, una característica que es un poco confusa.
Las animaciones de sus páginas son brillantes y realmente presentan algunos efectos de paralaje increíbles. Las imágenes de fondo a menudo se repiten y se transmiten a través de su catálogo y páginas de contacto. También encontrará una brillante sección de portafolio que también presenta trabajos en formato de galería jQuery.
Elect-lo-nica
Este sitio web basado en Japón también funciona en los efectos de distorsión de paralaje y desplazamiento vertical. Puede encontrar algunos efectos de animación nítidos a medida que se desplaza hacia abajo, lo que muestra algunos hermosos gráficos vectoriales.
Todo el texto está escrito en japonés. Sin embargo, no es necesario que comprenda el contenido del sitio web junto con su estilo de diseño. Hacia la parte inferior puede encontrar una lista de pistas y algunos detalles de contacto adicionales. Disfruto de su adaptación de diseño, ya que representa una mentalidad muy simple.
Rohto japon
Rohto Japan es una empresa desplazada mucho más prominente. Su diseño se presenta de nuevo desplazándose horizontalmente y ofreciendo enlaces de desplazamiento. A lo largo de la capa inferior encontrará enlaces de redes sociales y contactos externos.
Por encima de estos están los principales enlaces de navegación. No se destacan mucho e incluso pueden mostrarse mejor en la parte superior de la página, que está casi vacía. Los detalles de la página son muy nítidos. También soy un gran fan de su estilo de animación que es rápido y fluido para la transición.
