El "efecto Parallax" es una forma de crear páginas web muy vistosas haciendo que el fondo se mueva aparentemente más despacio que el resto de los contenidos de la página, revelando además nuevas secciones de manera continua, creando una sensación muy llamativa que ayuda a destacar información y a crear páginas más espectaculares.
Su nombre se toma del mundo de la astronomía, y posteriormente de los videojuegos, aunque ahí significa algo ligeramente diferente y más elaborado.
Puedes encontrar muchos ejemplos de su uso en la web, algunos más elaborados que otros. Por ejemplo, una de las últimas páginas que he visto que lo usan es la de Microsoft Band, el wearable avanzado que ha sacado el gigante informático y que usa un efecto Parallax básico pero que queda muy bien. Otra página que usa algo parecido a un efecto Parallax de forma espectacular es la página principal de Sony Be Moved: simplemente espectacular, aunque eso no lo puedes hacer solo con CSS ;-)
Lo que la mayor parte de la gente hace, es lo que puedes ver en la página de Microsoft band: imágenes (¡o vídeos!) de fondo que se mueven de manera aparentemente relativa al contenido de delante y que van revelando nuevas seccionas a medida que haces scroll en la página.
En Internet puedes encontrar fácilmente muchos artículos y tutoriales que te explican cómo conseguir ese efecto Parallax, pero en mi opinión adolecen de alguna de estas dos cosas:
- O se complican demasiado la vida, y utilizan JavaScript (o peor, jQuery) para hacer cosas para las que no son necesarios, cargando de paso tu página innecesariamente.
- O realmente no explican por qué funciona el efecto: se limitan a decirte cómo hacerlo pero sin que realmente entiendas el porqué y puedas construir sobre ello.
En el siguiente vídeo, extraído de mi curso on-line sobre creación profesional de páginas web con HTML5 y CSS3, explico con detalle cómo conseguir el efecto Parallax usando solamente CSS3, sin necesidad de escribir código. Además explico en qué se basa y por qué funciona, para que además de saber hacerlo lo entiendas y puedas aplicarlo a otras cosas:
El efecto está muy bien pero tampoco conviene abusar de él, así que úsalo con sabiduría ;-)
Puedes descargar los archivos de ejemplo usados en el vídeo desde aquí: campusMVP-Ejemplo-Efecto-Parallax.zip (840KB, por las imágenes)
¡Espero que te guste y te resulte útil!
Y recuerda, si quieres aprender de verdad HTML5 y CSS3 para desarrollo y diseño web, este es el mejor curso que vas a encontrar.
Fecha de publicación: