DROPCODING BLOG

Como hacer un efecto Parallax en CSS (ejemplo)

Creo que cuando sea viejo diré algo así como “no hay nada como un buen efecto parallax en css”. Es algo que tarde o temprano acabarás usando si eres diseñador web freelance. Aunque ahora esté un poco pasado de moda ya que hace un tiempo abusamos mucho de este efecto en nuestras páginas web e interfaces, todavía sigue quedando muy bien en landing pages o páginas informativas.

¿Comor? ¿QUE AÚN NO LO HAS USADO? Pues nada, te lo explico a continuación y además de forma rápida.

¿Qué es el efecto parallax?

El efecto de paralaje o parallax es una ilusión óptica que hace que las cosas en primer plano parezcan moverse más rápido que los objetos del fondo. Se puede utilizar para crear una experiencia de inmersión en un sitio web, haciendo que parezca que está en 3D.

El término «parallax» viene del griego παράλλαξις (parállaxis), que significa «alteración». El desplazamiento de paralaje es una técnica de diseño web utilizada en la creación de videojuegos, páginas web e interfaces de usuario en 2D que emplea gráficos de desplazamiento para crear la ilusión de profundidad.

¡Toma descripción wikipedia!

Hay varias maneras de crear un efecto parallax en un sitio web: con CSS, JavaScript o un plugin. En este artículo, le mostraremos cómo crear un efecto de paralaje básico con CSS.

Hacer efecto parallax en css

Como se que no te gusta leer mucho te voy a dejar un vídeo muy cortito por aquí donde pongo un ejemplo de efecto parallax en CSS.

Si tienes cualquier duda ya sabes, déjamela en los comentarios y te responderé lo antes posible.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

Deja una respuesta

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