Un buen diseño web debe tener como primer objetivo su target. Si además estamos al tanto de las últimas tendencias y técnicas de diseño web, aumentaremos las posibilidades de éxito.

Hoy en día «prácticamente» no tenemos límites a la hora de diseñar, de un modo u otro, casi todo se puede hacer, por eso mismo es obligatorio ser conocedor de estas técnicas, conociéndolas podremos acudir a ellas en función del diseño al que nos enfrentemos.

En este post vamos a ver en qué consiste el Scroll Parallax, vais a poder descargar código gratis y ver algunos ejemplos de efectos que podemos conseguir con esta técnica.

Parallax Scrolling es sin duda un enorme paso hacia adelante y un tremendo reto para diseñadores, ya que ahora no nos limitamos a pensar en cómo rellenar el dichoso papel en blanco. Diseñar una web parallax es en cierto modo, jugar a ser «director de cine». Una sucesión de escenas van a cambiar por completo el escenario que mostramos al usuario, además, tendremos que pensar de qué modo pasamos de una escena a otra, movimientos, máscaras, transparencias, vídeos y fotografías se suceden uno tras otro o simultáneamente, para situarse en su posición correcta cada vez que el usuario se detiene a examinar cada pantalla. Además, tendrás que pensar en cómo conservar la usabilidad de esta web, fijando el menú en una posición absoluta, haciendo que se mueva con el resto de la web… En definitiva es un reto a la imaginación, mucho mayor que cualquier otro tipo de web, es pura creatividad, esta creatividad es la que va a diferenciar una web espectacular de una normal, aunque esta normalidad va a estar acentuada por la vistosidad de esta técnica.

La web parallax se distingue del resto entre otras cosas, en que depende 100% del scroll de la página. Ya que existen dos tipos de scroll, el vertical y el horizontal, nos encontramos con dos tipos de parallax, aquellas en el que la transición de pantallas se hace a través de un movimiento vertical y las que se suceden en movimiento horizontal.
Las más comunes son las de movimiento vertical. Los motivos a mi juicio son dos, el primero por ser el scroll vertical el movimiento al que estamos acostumbrados para navegar una página, el segundo motivo es práctico, la mayoría de los ratones tienen una rueda que mueve la pantalla en vertical, es más cómodo pues navegar moviendo esa rueda.

La acción del ratón es la que desencadena la sucesión de movimientos, además lo hace de modo reversible, es decir tanto hacia adelante como hacia atrás. Esta interacción del usuario con la web provoca diversión, expectación y sorpresa, juega con ello pero no satures.

Otra de las características de una parallax, es que juega con los movimientos y las velocidades, se consiguen alucinantes efectos al mover objetos en dirección opuesta al movimiento del scroll y a velocidades distintas.

 

CÓDIGO GRATUITO PARA CREAR TU WEB PARALLAX

Varios son los sitios en los que puedes descargarte gratuitamente código para maquetar tu web parallax, a continuación os dejo un par de ellos, si conocéis más añadidlos en comentarios.

• Crear tu web parallax con Stellar.js
• Crear tu web parallax con CSS y jQuery
• Crear tu web parallax con scroll horizontal
• Crear tu web parallax con jQuery
• Crear tu web parallax con súper efectos para fuentes
• Crear tu web parallax con un patrón de movimiento

EJEMPLOS DE QUÉ PODEMOS HACER CON UNA WEB PARALLAX

En la red podréis encontrar ya muchísimas webs hechas con parallax, en este post sólo vamos a poner una pequeña selección, no por su espectacularidad (que la tiene), si no por diferenciar un poco la cantidad de efectos que podemos producir con este tipo de tecnología.

NIKE

NIKE – Como siempre Nike utiliza siempre la última tecnología para crear sus páginas web. En este caso lo que me llama la atención de esta página es la simulación de un movimiento oblicuo al hacer scroll vertical. También es digno de destacar el efecto 3D que crea para mostrar cómo se forma la zapatilla.

BAGIGIA

BAGIGIA – He colocado esta web para que veáis qué manera más original de controlar el movimiento de la web y la sucesión de contenidos a través de una cremallera horizontal. Además utiliza muy bien la simulación de 3D,que simplemente consiste en ir cargando distintas imágenes para cada coordenada del scroll.

JAN PLOCH

JAN PLOCH – Esta web es un ejemplo de como no hace falta complicarse la existencia para mostrar un producto de un modo muy original. La botella se va vaciando según vamos acabando de leer el contenido de la web. El efecto es muy sencillo, una capa marrón con la silueta de la botella transparente que va moviéndose con el scroll, a la vez que deja ver la capa con el líquido que tiene por debajo. Un ejemplo parecido lo podéis ver en la web http://krystalrae.com/ en el que utiliza este mismo efecto para ir cambiando de ropa a la modelo.

SUPER SCROLL ORAMA

SUPER SCROLL ORAMA – Un magnífico ejemplo de lo que podemos hacer con texto. Además tenemos la suerte de poder descargarnos el código.

JQUERY SCROLL PATH

JQUERY SCROLL PATH – Esta web tiene la particularidad de conseguir ir moviéndose siguiendo un patrón previamente programado. Además tenemos la suerte de poder descargar el código.

EFECTO 3D

EFECTO 3D – En este caso, en lugar de ir mostrando una web a través de un scroll vertical u horizontal, usamos el movimiento del ratón (el desplazamiento del cursor) para hacer que las capas se muevan cada una en un sentido, provocando la sensación de estar frente a un objeto en 3D. Además podemos descargar el código.