No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Efecto parallax: estructura HTML

10/20
Recursos

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.

Estructura HTML para el efecto parallax

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.

<div class="parallax-container">
  <div class="image image_background"></div>
  <div class="image image_middle"></div>
  <div class="image image_foreground"></div>
</div>

En la capa del medio, crea tres elementos hijos que representen tres cartas.

<div class="image image_middle">
    <div class="card one"></div>
    <div class="card two"></div>
    <div class="card three"></div>
</div>

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.

Contribución creada por Andrés Guano, con aportes de Carlos Mazzaroli.

Aportes 19

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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.

Les dejo este video de Parallax de la película Bambi de Disney 😄, de esas épocas donde las pelis se pintaban en oleo ヾ(•ω•`)o
https://www.youtube.com/watch?v=86zPz3J4MdM

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:

  • Contenedor (elemento padre)
  • capa de fondo (background)
  • capa intermedia (middleground)
  • capa delantera (foreground)
<div class="parallax-container">
        <div class="parallax-container__background"> 
          <div class="parallax-background-element"></div>
        </div>
        <div class="parallax-container__middleground">
          <div class="card one"> </div>
          <div class="card two"> </div>
          <div class="card three"> </div>
        </div>
        <div class="parallax-container__foreground">
          <div class="parallax-foreground-element"></div>
        </div>
      </div>

Codigo para la siguiente clase

<!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>
</head>
<body>
    <div class="parallax-container">
        <div class="image__background">
            <img src="https://i.ibb.co/jbLKgvX/Background.png" alt="aa">
        </div>
        <div class="image__middle">
            <div class="card-one"></div>
            <div class="card two"></div>
            <div class="card three"></div>
        </div>
        <div class="image__foreground">
            <img src="https://i.ibb.co/vJdbRkj/Alice.png" alt="bb">
        </div>
    </div>
</body>
</html>

🍿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.

30 Webs con efecto Parallax

Muy buena clase Miss!!!

El efecto parallax explicado por su creador

https://youtu.be/86zPz3J4MdM

Esta clase me ha dado ideas para implementar en mis proyectos.

Lo unico que me preocupa es el rendimiento que pueda consumirle al usuario 😒

Super, esperaba esta práctica.

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

Este efecto siempre lo he querido aprender para mis webs pero nunca me animaba a aprenderlo! QUe emoción 🤩

Con este video entendi perfectamente el efecto parallax! wow
https://www.youtube.com/watch?v=86zPz3J4MdM

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. 😉

Parallax

en mi suscripción necesita ver eso, gracias a estos dos días me voy a desquitar aprendiendo esto que me hiso falta