Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

VÍDEO: Cómo crear un efecto Parallax únicamente usando CSS3

Video-Efecto-parallax-PoradaEl "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.

José M. Alarcón Aguín Fundador de campusMVP, es ingeniero industrial y especialista en consultoría de empresa. Ha escrito diversos libros, habiendo publicado hasta la fecha cientos de artículos sobre informática e ingeniería en publicaciones especializadas. Microsoft lo ha reconocido como MVP (Most Valuable Professional) en desarrollo web desde el año 2004 hasta la actualidad. Puedes seguirlo en Twitter en @jm_alarcon o leer sus blog técnico o personal. Ver todos los posts de José M. Alarcón Aguín
Archivado en: Desarrollo Web

Boletín campusMVP.es

Solo cosas útiles. Una vez al mes.

🚀 Únete a miles de desarrolladores

DATE DE ALTA

x No me interesa | x Ya soy suscriptor

La mejor formación online para desarrolladores como tú

Comentarios (5) -

Muy interesante y sobre todo, muy bien explicado. Muchas gracias!!

Responder

José Manuel Alarcón
Spain José Manuel Alarcón

¡Muchas gracias Hanna! :-)

Responder

Carlos Olivero
Carlos Olivero

Está muy bien explicado, se entiende muy bien el video. Felicidades.

Responder

José Manuel Alarcón
José Manuel Alarcón

Gracias Carlos: pues así o mejor está el resto del curso de HTML5 y CSS3 ;-)

Responder

Muchas gracias por este buen trabajo, seguramente lo añade alguna web mia personal, saludos.

Responder

Agregar comentario

Los datos anteriores se utilizarán exclusivamente para permitirte hacer el comentario y, si lo seleccionas, notificarte de nuevos comentarios en este artículo, pero no se procesarán ni se utilizarán para ningún otro propósito. Lee nuestra política de privacidad.