Tecnología y Coaching para Emprendedores

20+ Páginas Web con Excelentes Efectos de Desplazamiento

proyecto-web

El diseño web no hace más que evolucionar y de un modelo basado en tablas hemos llegado a sitios cada vez más sofisticados y con mayores efectos de desplazamiento o scrolling. Seguro que de aquí a 15 años lo que hoy nos parece tan logrado nos parecerá algo arcaico y prehistórico, pero en estos momentos es lo último en tendencias de diseño web.

En este artículo encontrarás una colección de páginas web con excelentes efectos de desplazamiento, bien en el menú de navegación, bien en el background. Estos ejemplos son ideales para conseguir inspiración para nuestros próximos proyectos web, así que.. ¡inspírate!

1. Jorge Rigabert

Simplemente me encanta, pues no sólo cambia el background cuando nos desplazamos por el sitio web, sino que también lo hacen los colores del logo. Añadiría poner más fluidez en la transición entre pantallas, pero por lo demás me parece un sitio web muy logrado.

ejemplo pagina web

2. Batman 3D

Página web del ilustrador alemán Achim Loobes con efectos muy logrados. El menú de navegación se desplaza al pasar el cursor por encima, mostrando una imagen. En la imagen de fondo que aparece en cada página, si ponemos el ratón encima veremos que también se desplaza con el movimiento del ratón.

batman3d

3. Head 2 Heart

Página Web hecha con navegación horizontal muy original. Para avanzar has de ir pulsando a las flechas. También te puedes desplazar con el menú de navegación inferior, me parece un diseño muy acertado y creativo.

head2heart

4. Netlash-bSeen

El modelo de navegación está basado en preguntas con su respectiva ilustración en plan viñeta, lo que es muy original. El desplazamiento es suave y la opción de volver al principio muy clara.

netlashbseen

5. Egopop

Cuando mueves el ratón por encima de la imagen central, los personajes se mueven contigo, lo que le da un toque muy gracioso. Efecto ideal para sitos web orientados a niños.

egopop

6. Emm & Enn

Efectos muy logrados. Al desplazarte por el menú de navegación aparece un foco justo debajo. Cuando mueves el ratón por la imagen central, se desplaza el niño y las nubes. Y cuando pones el ratón encima de la niña escondida detrás de un taburete, ésta se levanta y aparece.

emm and enn

7. Kisko Labs

En este caso el menú de navegación se desplaza arriba del todo y se queda allí fijo mientras navegamos por el resto del sitio web.

kiskolabs

8. BeerCamp

Esta web está hecha con un efecto de zoom muy interesante y poco visto en el mundo del diseño web.

beercamp

9. XHTML Slicing

Las imágenes que cuelgan se desplazan con el movimiento del ratón. La única crítica es que al desplazarse toda la cuerda de manera paralela no da un efecto óptico real, por lo que se podría mejorar si giraran con un punto fijo de pivote.

xhtmlslicing

10. Bowtie

Lo que más me gusta de este diseño web de una sola página es que el inicio está en la mitad. Así, en todos los diseños que he visto hasta ahora se empieza por arriba del todo y nos desplazamos hasta llegar al contacto, en cambio en este diseño empiezas por el medio y te puedes mover para arriba y para abajo. El menú de navegación es de lo más original y me encanta el personaje hecho en flash que sale en el lateral.

bowtie

11. MYM Creative

El diseño del ascensor que se desplaza con la navegación me parece de lo más original, sólo añadiría que fuera más rápido y se desplazara al ritmo de la web.

mymcreative

12. Freestyle Night

El diseño está muy logrado, sobre todo los backgrounds, la única crítica que le haría es que al desplazarse por la web el desplazamiento no es del todo suave y pega algunos saltos, por lo demás un sitio web muy atractivo.

freestyle-night

13. Guia de App Galaxy

Como esta web va sobre el lanzamiento de una aplicación, la navegación funciona al revés de lo habitual, empezando por abajo del todo y desplazándose hacia arriba. ¡Muy original!

app-galaxy

14. We Bleed Design

Si bien no es un tipo de diseño que a mi me entusiasme, debo reconocer que es original y creativo. Da el efecto visual de desplazamiento de largas distancias, lo que está muy bien.

we-bleed-design

15. Places in New Zealand

Las imágenes del background son extraordinarias y el diseño muy logrado. Las únicas pegas que le veo es que el desplazamiento no es suave, y que las animaciones van demasiado rápido, pero en términos de diseño la idea es muy buena.

new-zealand

16. Activate

Si bien tarda un poco en cargarse, en el momento que haces clic en el tapón de la botella te das cuenta que el efecto óptico ha valido la pena.

activate-drinks

17. Lewers

Cuando haces clic en una de las opciones del menú de navegación, el background se desplaza hacia la izquierda, lo que es muy original, pues normalmente el desplazamiento es hacia la derecha.

lewers

18. Ladio

Diseño basado en flash con efectos ópticos de desplazamiento muy logrados, me ha gustado mucho.

ladio

19. Langaard

Combinación de desplazamiento vertical y horizontal. Es un ejemplo clásico, y el desplazamiento es suave aunque, para mi gusto, demasiado rápido.

langaard

20. BountyBev

Web con un diseño muy logrado, pues da el efecto de desplazamiento por carretera hasta el destino.

bounty

21. Visuall

Aquí el desplazamiento es en diferentes direcciones, original porque no es previsible.

visuall

Conclusión

Ahora que estoy planificando mi web personal, aprovecharé todos estos enlaces para inspirarme y ver que saco en claro. Hay efectos que me parecen muy, pero que muy logrados, por lo que creo que vale la pena tener en cuenta estos sitios web cuando necesitemos inspiración para crear efectos de desplazamiento orinales.


Comentarios

  • Romina Shanti

    Estan muy padres la mayoria, el único problema de algunos es la velocidad. Hay que tener cuidado con eso, porque mucho usuarios no esperan mas de unos segundos y si no carga simplemente cierran la pestaña.

    • Sandra

       Efectivamente, Romina, en sí en la selección que he hecho he dejado fuera muchos sitios web porque tardaban demasiado en cargarse..

      • ricardo

        Hola Sandra, soy nuevo en diseño web y me gustaria saber como puedo lograr hacer esos efectos de desplazamientos, algun tuto bueno es que no conosco mucho de codigos. Gracias por la respuesta que me puedas dar.