No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Compra acceso a todo Platzi por 1 a帽o

Antes: $249

Currency
$209/a帽o

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscr铆bete

Termina en:

16D
2H
19M
49S

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 20

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥渃apas鈥 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

Con este video entendi perfectamente el efecto parallax! wow
https://www.youtube.com/watch?v=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 馃槖

Muy buena clase Miss!!!

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

El efecto parallax explicado por su creador

https://youtu.be/86zPz3J4MdM

Super, esperaba esta pr谩ctica.

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. 馃槈

Parallax

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