El efecto de paralaje o parallax es una técnica en la que el fondo se mueve a una velocidad distinta que la del contenido. El resultado es un ligero efecto de profundidad, dejando ver partes que antes no podías visualizar. Te ayuda a sumergirte totalmente en el contenido, similar al efecto 3D.
Crea un contenedor con elementos hijos, estos serán las capas del contenedor para crear el efecto. En este caso, agrega tres elementos que representen la capa del fondo (background), del medio (middle) y de primer plano (foreground). Cada elemento debe tener una clase general y una que las diferencie.
Para las demás capas, agrega una imagen de fondo y una en primer plano de Alicia. Te dejo los enlaces de las imagenes, utiliza una etiqueta de imagen con su respectivo atributo alt.
*[Alicia](https://i.ibb.co/vJdbRkj/Alice.png)*[Imagen de fondo](https://i.ibb.co/jbLKgvX/Background.png)
Y listo, ya tienes la estructura del efecto parallax, no importa si las imágenes están sobredimensionadas. Ahora utilizaremos CSS para dar estilos a las capas.
HISTORIA
el Parallax es en realidad un truco con mucha historia, inventado por Disney para dotar a sus películas de dibujos animados de una ligera tridimensionalidad, intentando lograr con ello un mayor realismo. El invento se bautizó como «cámara multiplano»
¿QUE ES PARALLAX?
efecto de paralaje o parallax es una técnica en la que el fondo se mueve a una velocidad distinta que la del contenido. El resultado es un ligero efecto de profundidad, dejando ver partes que antes no podías visualizar. Te ayuda a sumergirte totalmente en el contenido, similar al efecto 3D.
Inspirate con estas paginas
30 Webs con efecto Parallax
Anton & irene
Toyfight
Neoman
Teapot
Muchas gracias por compartir esa Joya de video @Carlos!
Se me hace increíble ver como se creaban antes las caricaturas o películas en este caso por parte de Disney.
Nosotros podemos lograr un efecto similar con CSS y eso es maravilloso 🤩
Efecto parallax: estructura HTML
Consiste en superponer "capas" o elementos sobre el eje z (z-index) de un contenedor o elemento padre.
El objetivo del efecto parallax es crear una ilusión de movimiento al establecer distintas velocidades de scroll entre las capas contenidas dentro del padre.
Para lograr dicho efecto, la estructura base necesaria en HTML consiste de:
Este es le mismo código que está en el apartado de Recursos?
Acá tienen las fotitos del proyecto, por si no se les cargan como me paso a mi (/▽＼) o(TヘTo)
404 Not found
🍿Efecto parallax: estructura HTML
❤**¿QUE ES PARALLAX?**
efecto de paralaje o parallax es una técnica en la que el fondo se mueve a una velocidad distinta que la del contenido. El resultado es un ligero efecto de profundidad, dejando ver partes que antes no podías visualizar. Te ayuda a sumergirte totalmente en el contenido, similar al efecto 3D.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style> body{margin:0;}.parallax-container{width:100%;height: 100vh;perspective: 8px; perspective-origin:50%; overflow-x: hidden; overflow-y: scroll;position: relative;}.image{position: absolute;left:0;right:0;margin:0 auto;transform:050%;}.image__background{height: auto;width:100%;transform:translateZ(0px)scale(1); transform-origin:050%;}.image__middle{height:100%;width:100%;transform:translateZ(5px)scale(0.375); transform-origin:50%;}.image__foreground{transform:translateZ(2px)scale(0.75); transform-origin: top;}.card{background: #fff; border-radius: 8px;width: 80px;height: 100px;position: absolute;transform:rotate(-20px);}.one{left:30%;top:200[x];}.two{right:20%;top: 400px;}.three{right:20%;bottom:-1000px;}</style></head><body><div class="parallax-container"><div class="image image__background"><img src="colocas la ruta de tu imagen" alt="Background"></div><div class="image image__middle"><div class="card one"></div><div class="card two"></div><div class="card three"></div></div><div class="image image__foreground"><img src="colocas la ruta de tu imagen" alt="foreground"></div></div></body></html>
@nelwey Creo que el problema es el navegador, uso edge porque es a donde me manda live server y se ve solo la mitad, pero en chrome se ve bien
Efecto paralax
Es un buen truco que bien aplicado puede dar mejor aspecto al fondo, mientras mas lento muevas los background mas sentido de lejania le darias por ende mas sentido de grandesa o tamaño
¿Podría alguien ayudarme con una duda que me surgió?
¿Al utilizar las clases image__background, image_middle y image__foreground, la maestra está utilizando BEM?
¿Si esto es correcto, no sería entonces parallax-cotainer__image--background?
Espero puedan apoyarme con esta duda que me surgió :)
Así es, solo por practicidad lo escribió de esa forma.
Pensaría que es la sintaxis de BEM pero no que se está usando la metodología BEM al pie de la letra... Para el curso sería un poco innecesario.
También ten en cuenta que en la vida real, a medida que tu código crece, no es tan escalable ponerle a todos los hijos los nombres de todos los padres... Entonces se empiezan a cortar (ya será más un tema de convención con tu equipo de trabajo).
Atajo para crear todo en una sola linea:
div.parallax-container>(div.image__background>img)+(div.image__middle>div.card.one+div.card.two+div.card.tree)+(div.image__foreground>img)
Este efecto parallax es es maravilloso ✨ me encanta la temática que usa la profe Teff de Alicia en el país de las maravillas.
Este efecto siempre lo he querido aprender para mis webs pero nunca me animaba a aprenderlo! QUe emoción 🤩
me encnata estas clases!
Si bien el objetivo de la clase no es centrarse en las imágenes como tal, si es bueno pasarlas por un tinify o algún otro programa que cumpla el mismo objetivo, porque estas imagenes están muy pesadas. 😉
