Parallax. Puntos de adición de efectos (II)

En el anterior artículo vimos en qué consiste la técnica ‘parallax’ y cómo implementarla en nuestra página web. En este artículo veremos los puntos de adición de efectos. Además, ya hemos creado el siguiente ejemplo, donde se ponen en práctica.

Estos efectos serán los siguientes:

  • Fade. A medida que ‘scrolleamos’ por nuestra página, van apareciendo imágenes adicionales, pero no de una manera inmediata, sino suavemente. A este efecto se le puede añadir un ligero movimiento de la imagen durante su aparición.
  • Slide. Durante nuestra visita por la página, de repente aparece una imagen desde alguno de los laterales de la pantalla. También lo podemos hacer en concordancia con el ‘scroll’.
  • Botón ‘GoToTop’. Cuando empezamos a descender por la página, nos aparece un botón en la parte inferior derecha de la pantalla que, al clickarlo, nos subirá la pantalla al inicio de la página.
  • Menú. Generalmente en la parte superior de la pantalla, y fijado ahí, un menú nos permitirá movernos automáticamente por las distintas secciones de la página.

 

Cómo funcionan los puntos de adición de efectos en parallax

En primer lugar, vamos a definir qué son los puntos de adición de efectos en parallax.

En resumen, se trata de:

  • Por un lado, programar un evento que, al hacer scroll en la página, sepa en qué pixel vertical concreto de la página estamos.
  • Y por otro lado, programar unos puntos en la página que desencadenen los efectos.

De esta manera, cuando el evento detecta que pasa por uno de los puntos programados, se ejecuta el efecto deseado.

Pero la mejor manera de entender este mecanismo, es mediante el primer efecto.

 

Efecto fade

En primer lugar, vamos a ver el código HTML:

Por otra parte, los estilos CSS:

Finalmente, la función jQuery:

Ahora, vamos a explicar un poco el código:

La posición del scroll en la parte superior del navegador nos la da $(document).scrollTop(). No obstante, yo quiero que los efectos se ejecuten cuando yo los empiece a ver por debajo, para lo que añado $(window).height(), que es el alto de la ventana del navegador.

En cuanto a esta última función, debo avisar que, para que funcione correctamente, al inicio de la página debemos evitar la etiqueta <html> y poner la etiqueta <!DOCTYPE html>.

La posición del efecto nos la marca la parte superior de la div en la que se encuentran los ‘fades’. Esto nos viene dado por $(div).offset().top.

En el momento en que aparece la parte superior del objeto ( un poco más, 20 píxeles ) por la parte inferior de la ventana del navegador, se producen los dos fades; el 1, normal, y el 2 con un ligero desplazamiento final.

Sin embargo, si no hemos llegado o volvemos a subir el scroll, las imágenes desaparecen.

 

Efecto slide

En realidad, la única diferencia entre los efectos fadeslide reside precisamente en el efecto en si mismo. El resto del código es más o menos, igual.

Para empezar, el código HTML:

En cuanto al estilo CSS:

Finalmente, el código jQuery:

A pesar de lo dicho, hay ligeros cambios. A la capa “automatico” le he modificado un poco sus dimensiones, para que la imagen pueda salir por el margen izquierdo de la pantalla. Por otro lado, tenemos que averiguar los anchos de las capas y de las imágenes, para poder establecer los recorridos que tenemos. Finalmente, para el segundo slide, tenemos que buscar proporcionalizar su movimiento con el movimiento de scroll.

 

Botón ‘GoToTop’

Este efecto concreto lo he extraído de este artículo de Miguel Angel Alvarez.

Este es un botón que nos aparece a poco hemos comenzado a hacer scroll página abajo, y nos sirve para subir hasta la parte superior de la página con un solo click.

El código es muy sencillo. El HTML suele ir al final de la página:

Los estilos CSS:

Finalmente, jQuery:

En primer lugar, vemos que la primera función es más de lo mismo que los anteriores efectos.

En cuanto al segundo evento, tenemos dos formas de insertarlo en el código: con y sin el evento ready. Si no utilizamos este evento, el código script deberá aparecer a continuación de su definición HTML. Para poder ubicarlo en la cabecera, empleamos el evento ready.

 

El menú

Para finalizar los efectos que podemos añadir a un parallax, vamos a ver el comportamiento del menú.

Para empezar, el menú del parallax suele ser un menú horizontal que se encuentra debajo de la cabecera (logo y título de la página). Cuando se baja por la página, el menú ascenderá hasta llegar a la parte superior del navegador, momento en que se quedará fijado.

Además, las opciones del menú suelen ser enlaces a las diferentes secciones de la misma página, que, al clicarlas, nos llevan directamente a ellas. Así, la navegación por la página parallax se hace más dinámica y fluida.

En primer lugar, vamos a ver el código HTML.

Con respecto al estilo CSS, buscaremos la forma de hacer la lista horizontal:

Finalmente, veamos cómo se desarrolla jQuery:

En resumen, el primer evento es igual a todos los eventos de los efectos anteriores, y el segundo es equiparable al del botón ‘GoToTop’.

 

Conclusiones

Una página web mejora mucho con el efecto parallax. Pero si al parallax le añades efectos gestionados por el scroll de la página, el resultado puede ser mucho más espectacular.

Todo lo que hemos explicado aquí, lo podéis ver en el siguiente ejemplo.

En el próximo y último artículo de esta mini-serie sobre el efecto parallax, haremos un resumen final, con sugerencias e ideas, y veremos cómo podemos implementar todo esto en WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *