Últimamente he visto muchas páginas web con el efecto de parallax scrolling, como que está de moda y es que se pueden hacer muchas cosas como animaciones en textos en imágenes, utilizando únicamente códigos. Encontré una selección de 25 páginas que lo utilizan de una manera muy creativa. Ya antes había publicado un ejemplo de este efecto de parallax pero aplicado a una fotografía para animarla en un video. Ahora traigo efecto pero aplicados al diseño en páginas web. Pero primero me gustaría explicar qué es y como se logra ese efecto por si alguien lo quiere aplicar en sus diseños. El parallax scrolling es una técnica que permite animar con movimientos todos los elementos de una web, al mismo tiempo o por separado, mientras te desplazas en ella con la barra de desplazamiento o con el tercer botón del mouse. Este efecto se logra colocando todos los elementos de una web por capas, así si quieres mover solo el texto y dejar estático el fondo lo puedes hacer.

Cómo se logra el efecto parallax scrolling

 

Ese tipo de animaciones se logra colocando algo de código en las páginas. Para crear el efecto básico que es dejar el fondo estático y lo que se mueva sea el texto mientras navegamos de arriba a bajo, se utilizan los atributos data-type y data-speed, algo de CSS y código jQuery. En internet hay una infinidad de tutoriales, pero este que encontré me pareció muy bien explicado y lo mejor es que puedes descargar un archivo para que lo abras en tu computadora y mires como está hecho.

El anterior fue un tutorial de los simples, pero encontré otro en donde literalmente animan todo lo que se ve en una página. Aparecen y desaparecen textos, lo mismo hacen con galerías de imágenes, desvanecen textos, los giran, hacen volar por toda la página, cambian el color de fondo al mismo tiempo que le cambian el color al los textos. Ese tutorial se puede ver en acción directamente en la página, en donde también explican con que código se logra el efecto y lo mejor es que puedes descargar un archivo para que lo abras desde tu computadora y lo edites a tu gusto.

Buenos ejemplos de diseño web con efecto parallax

 

efecto parallax scrolling en web

 

En la página que encontré vienen 25 ejemplos con ese efecto, pero yo solo hablaré de tres que fueron los que me parecieron los diseño más creativos y el último que no viene en esa selección pero que me parece el mejor de todos. El primer ejemplo de una página italiana de productos textiles. Todo el sitio se navega moviendo el tercer botón del ratón y en todas partes hay un efecto o sucede algo cuando colocas el puntero del ratón sobre un botón. Además de todo eso el diseño es muy elegante e intuitivo. Acá la dirección | [Codetex Group]

 

efecto parallax restaurante

 

El segundo trata sobre un restaurante que se encuentra en Londres y da muchos servicios a los clientes. En esta página puedes navegar arriba, abajo y de izquierda a derecha. No tiene tantos efectos pero las fotos que hay de fondo hacen que la página luzca muy elegante, no exageran en las animaciones pero las transiciones entre las secciones la hacen de una manera muy sutil. Acá dejo la dirección para que entren y le muevan a todo lo que encuentren | [Marco Grill]

 

efecto parallax agencia publicidad

 

La tercera es de una agencia publicitaria en Grecia. En ésta página no sales para nada del home, todo sucede en la primera página, salen del típico diseño cuadrado o rectangular ellos juegan con los rombos como botones, cuando les das clic a uno de ellos, despliegan una animación con el trabajo que ellos hicieron. Acá dejo la dirección para que ustedes mismos vean los efectos | [Mindworks]

 

currículum vítae interactivo

 

Y la última y pero para mi la mejor implementación del efecto parallax scrolling en una página es la de un currículum vítae interactivo, del cual ya había hecho un post pero que traigo de nuevo por que en verdad vale la pena que entren y naveguen entre el. Es una especie de video juego, tienes que ir avanzando, brincando objetos, nadando y mientras lo haces se van desplegando animaciones que contienen datos de la persona. Acá dejo la dirección para que jueguen un rato en ella | [interactive resume of Robby Leonardi]

Error 404 es esa página que nos sale cuando no encontramos lo que queremos en alguna página web. Por alguna razón ahora se volvió muy popular tener un mensaje original en esa página de error. Encontré una página que hace recopilación de los mejores y más creativos errores.

 

error 404

 

Los errores 404 son muy comunes en las páginas web, aparecen cuando una página no se encuentra, de hecho todas las páginas y blogs en internet tienen una con ese error. Pueden escribir mal la dirección de cualquier página para que puedan ver el error, hasta éste blog tienen una es solo texto, pero no es nada creativa como las que se pueden ver en la página que encontré y que se encarga de hacer una recopilación para mostrar las mejores y las más creativas. Al verlos dan ganas de hacer un diseño mejor para mi blog. Esta página también puede funcionar como inspiración para los diseñadores web. Yo hice una selección de las cuatro páginas que me gustaron más, pude hacer muchas más por que hay algunos muy originales, pero mejor les dejo la dirección de la página para que los vean ustedes mismos, pueden votar por los mejores o mandar su propio diseño. Es importante que den clic sobre la imagen para que los lleve a la página con el error 404, por que algunas tienen animaciones o en algunas debes de hacer algo para salir de ese error. | [Best 404 error pages on the web]
error 404

 

La primera es el error de una página de música en donde puedes encontrar nuevos grupos, una especie de red social de música. Su error me gustó por que te transporta a los diseños que se podían ver en el año de 1998. Hay gifs, hay texto escrito con Comic Sans, hay un unicornio dentro de otro unicornio con brillitos (una formula siempre ganadora). Y la página según sus diseñadores funciona mejor en un navegador Netscape 1.0 con una conexión a 56.6k | [Tastebuds 404 nlol]

 

error 404

 

La segunda es la de umbro, que es una empresa que hace uniformes y todo tipo de objetos vinculados con el deporte. Su error lo relacionan con una formación dentro del campo de fútbol, un 4-0-4. Cuatro atacan y cuatro defienden, mientras los medios están en la banca tomando un café | [Formación 4-0-4]

 

error 404

 

El tercero es el error de la misma página que recopila diseños de errores en otras páginas. Me gustó por que te pone un juego de esos que jugábamos en el NES, no sólo hay texto diciéndote que te equivocaste de dirección o que la información que buscabas no existe o te deja un link para llevarte a la página de inicio, es mejor que eso. Te deja un juego para que pierdas el día y no salgas de su página | [Wild gunman]

 

error 404

 

El cuarto y último es una página que te permite crear un personaje pixeleado, también tiene relación con el NES. Pero en esta ocasión es un cartucho de los que se ponían en esa consola y que cuando no funcionaba, lo sacabas de la cansola y le soplabas a los conectores, con eso “mágicamente” el problema se solucionaba y el cartucho seguía funcionando como nuevo | [EightBit]

Una página que te enseña a como usar google font en cualquier sitio sin necesidad de editar código, te muestra el resultado de inmediato, tan solo hace falta seleccionar un tipo de fuente.

 

como usar google font

Aplicación we que te enseña a como usar google font

 

Google font, te permite utilizar muchas tipografías en tu página web, para que sean visible en cualquier computadora, independientemente de que la tenga instalada o no. Gracias a eso tenemos mucha libertad creativa al momento de hacer un diseño de una página web, no tenemos que estar atados a utilizar unicamente en nuestro trabajo las tipografías que vienen pre-instaladas en todas las computadoras. De hecho éste blog utiliza tipografías de Google font. Es muy fácil utilizarlas, solo copias unos códigos y los pegas en tu página, y todavía es más fácil entender como funciona gracias a una página que encontré y que quiero compartir en este blog.

 

Se trata de TypeWonder, es una página que te permite cambiar la tipografía de cualquier página web existente en internet, sin necesidad de modificar su código. Unicamente lo que tienes que hacer es escribir la dirección de la página, elegir entre todas las fuentes que puedes encontrar en Google font, si prueban esta página se podrán dar cuenta de que hay muchos diseños, para todo tipo de gustos y de diseños, finalmente dan clic en el botón que dice; use! y podrán ver la página con la tipografía que seleccionaron. Pueden cambiar la fuente dando clic en el botón superior que dice Change font, casi de inmediato podrán ver reflejado el cambio de tipografía en su web.

 

Y también tiene la opción de conseguir el código por si vieron una fuente que les gusta y la quieren implementar en su página. Son dos líneas de códigos que deben de colocar en para que se vean en su diseño, una la deben de poner en su página y el otro lo ponen en el archivo donde tienen el código CSS, así de fácil y sencillo. Deja la dirección acá para que hagan pruebas en todas las páginas que conozcan y vean si les gusta antes de implementarlo definitivamente en sus sitios | [TypeWonder Beta]

Botones para paginas web con un buen diseño, recopilados en una cuenta de tumblr muy útil para los que se dedican al diseño web y quieren inspiración.
botones para paginas web
botones para paginas web

Varios ejemplos de buenos diseños de botones para paginas web

 

Hace unos días publicaba la dirección de una cuenta en tumblr, que se dedicaba a publicar fotografías de objetos como botellas, cajas, anuncios donde apareciera tipografía antigua y que podría ayudar a los que andan buscando inspiración para hacer sus diseños. Ahora les comparto otra página que sigo y también está en tumblr, trata sobre diseños de botones en páginas web así de simple pero muy útil. El creador de esa página va recopilando los botones que alguien más hizo y utilizó en alguna página, él toma una captura de imagen y las publica.

 

El nombre de esa página es House of buttons y el nombre de la persona encargada del proyecto es Jason Long. Son cientos de botones publicados, hay de todo tipo: con forma circular, rectangular, minimalistas, con muchos colores, con texto, sin el, botones que tienen efectos cuando pasas es puntero sobre ellos, etc. Otras cosa interesante es que no solo publica la imagen y ya, también pone el enlace de la página donde lo encontró, para que lo veas dentro del diseño. Hay muchos que solo son puros ejemplos y no puedes hacer nada más que mirarlos y dar clic para que veas como funcionan, pero hay varios que puedes ir a ver y si te gustan como están diseñador o te agrado el efecto que hacen, los puedes descargar. Dependiendo de como esté hecho el botón, lo puedes descargar en formato PSD, AI, copiar y pegar un texto con el código.

 

Pero yo creo que lo mejor de esta página es entrar para inspirarte, navegas un rato mirando los diseños, luego tu puedes hacer tu propia versión juntando ideas de varios que te gusten, acá dejo la dirección por si quieren ir a ver | [House of buttons]

Diseños de web que son totalmente diferente a lo que estamos acostumbrados a ver, la navegación en ellos es muy interactiva.
diseños de web
diseños de web
diseños de web
diseños de web

 

Normalmente no me gusta mucho las páginas que están hechas completamente con el programa Flash, de hecho se supone que ya es obsoleto, casi ningún teléfono móvil o tableta lo soportan. Es decir sólo se ve en una computadora de escritorio. Pero los ejemplos que encontré son tan creativos y diferentes que se acepta y hasta no tengo problemas con esperar un rato a que se carguen las animaciones. Todas las páginas que encontré tienes que interactuar con ellas para navegar, para ir abriendo nuevas secciones o para cerrarlas.

Ejemplos diseños de web creativos

 

La primer página que hice clic para entrar es la de Salt Films. En donde el puntero del mouse se convierte en una mano gigante, con ella debes de ir haciendo “clic” sobre los vínculos o tomar los saleros y agitarlos para entrar a ver los trabajos en sus portafolios. Cada que haces clic en algún lugar aparece una animación, sonido o efecto.

 

Otra muy interesante es la del portafolio de una fotógrafa llamada Lena Sanz, igual que la página anterior esta hecha totalmente en flash, el puntero del mouse también toma otra forma, con el vas navegando entre las fotografías dentro de su portafolio, vas dando clic para ir avanzando o para ir retrocediendo

 

Esta otra que es el portafolio de un diseñador gráfico llamado Yodabaz, lo interesante de ésta página es el fondo, el cual no permanece estático y cambia cada que entras en una sección.

 

Estos son sólo algunos ejemplos que me gustaron, y que para entender mejor lo que les digo, entren ustedes mismos a esas páginas y naveguen un rato, aunque ya nadie recomiende hacer páginas con esa tecnología igual y se pueden inspirar mirando todos esos ejemplos de diseño web para que ustedes desarrollen sus propias ideas. En esta página hicieron una recopilación con más de 18 ejemplos con los mejores diseños web con navegaciones creativas | [Creative Websites with Unusual Navigation]

juegos en linea
juegos en linea

 

Gracias a HTML5 y a WebGL, podemos jugar directamente en el navegador juegos en linea, sin necesidad de descargar plugins o complementos extraños a nuestras computadoras, y son juegos en 3D donde hay mucha interacción, música y muchos detalles realistas. Un par de ejemplos son los que me encontré y por eso vine al blog a recomendar que entren a jugar y a interactuar dando clic para que el personaje se mueva por todo el entorno o en el otro ejemplo para que vean el ejemplo tan realista del agua y los reflejos que produce el sol en el agua.

 

Los autores de estos dos demos dicen que están trabajando en esto por que es el futuro de los juegos en linea, ellos quieren que sus juegos puedan ser vistos en cualquier navegador, así como en cualquier dispositivo móvil, en todas las tabletas que hay en el mercado. Como está hecho en html5, no hay necesidad de hacer descargas, sólo entras a la página y prácticamente te pones a jugar, por que no se tarda nada en cargar los juegos.

Son dos los demos que hay disponibles de Pearl Boy para que los prueben, dicen que están en base alfa es decir que no están terminados y aun así sorprenden por la calidad, ya me imagino cuando el juego este totalmente terminado, entren a ver los juegos y den clic por todas partes para que vean lo que pasa con el personaje y con el entorno donde pasan muchas cosas, hay cajas que pueden ir moviendo y tirando por precipicios. Y en la página de los creadores de estos juegos, pueden encontrar más información de la tecnología que utilizan y pueden ver más demos igual de impactantes que los que aquí les hablo.

 

Acá dejo los enlaces para que vean el demo del juego en barco y ahí encuentran el otro link en la parte inferior derecha para que vean el otro demo del personaje en el mar | [Pear Boy] Y aquí la dirección da la página de los creadores de los juegos para que vean más de estos demos | [Goo Engine]

PacMan
Búsqueda personalizada
Categorias
Archivos
Me Gusta