No tienes acceso a esta clase

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

Efecto parallax: estilos CSS

11/20
Recursos

Ahora que ya est谩 la estructura HTML para el efecto parallax, es momento de agregar los estilos CSS.

Estilos CSS para el efecto parallax

Quita el margin que est谩 por defecto establecido por el navegador.

body {
  margin: 0;
}

Dimensiona las im谩genes para que ocupen el espacio del contenedor.

img{
  max-width: 100%;
  height: auto;
}

En el elemento contenedor (parallax-container) agrega:

  • Medidas para que ocupe el ancho y alto de la pantalla.
  • Perspectiva de 8 p铆xeles (recuerda este valor).
  • Posici贸n relativa para que las capas puedan posicionarse con respecto al contenedor del efecto.
  • En este caso, el exceso de contenido deber谩 estar oculto para el eje X y desplazable para el eje Y, pero lo puedes cambiar a tu gusto.
.parallax-container {
  width: 100%;
  height: 100vh;
  perspective: 8px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
}

Agrega la posici贸n absoluta a todos los elementos hijos o capas del efecto.

.image{
  position: absolute;
} 

Para las cada capa del efecto vamos a realizar lo siguiente:

  • Medidas seg煤n sean necesarias.
  • Trasladar la capa en eje Z, desde 0 hasta el valor de la perspectiva (8px).
  • Escalar el elemento seg煤n su profundidad. Para calcular este valor utiliza la siguiente f贸rmula: $(perspective - translateZ) / perspective$, por ejemplo para la capa del medio, $(8-5)/8 = 0.375$.
  • Modificar el origen seg煤n sea necesario.

Algunos valores no son necesarios colocar, pero es recomendable tener un control del c贸digo y de las propiedades CSS.

.image_background{
  width: 100%;
  height: auto;
  transform: translateZ(0px) scale(1);
  transform-origin: 0 50%;
}

.image_middle{
  width: 100%;
  height: 100%;
  transform: translateZ(5px) scale(0.375);
  transform-origin: 50%;
}

.image_foreground{
  width: 100%;
  height: auto;
  transform: translateZ(2px) scale(0.75);
  transform-origin: top;
}

Para las cartas de la segunda capa agrega dos estilos importantes: las medidas y la posici贸n absoluta.

.card {
  width: 80px;
  height: 100px;
  position: absolute;
  /* Estilos propios de la carta */
  background: white;
  border-radius: 8px;
  transform: rotate(-20deg);
}

La posici贸n sirve para posicionar cada carta como deseemos.

/* Valores al azar, modific谩los a tu gusto. */
.one{
  left: 30%;
}

.two{
  right: 20%;
  top: 200px;

}

.three{
  right: 20%;
  bottom: -700px;
}

隆Y listo! Ya est谩 construido el efecto parallax.

Contribuci贸n creada por Andr茅s Guano.

Aportes 45

Preguntas 20

Ordenar por:

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

o inicia sesi贸n.

隆Yo hice un cohetito! :3 Con Parallax se pueden hacer muchas cosas geniales, y puedes empezar a jugar con varias propiedades para lograr efectos incre铆bles 馃挭.
.
Por si a alguien le interesa, les dejo el repo de este cohetito n.n

RetaxMaster/rocket-parallax

a nuestra capa contenedora parallax-container le aplicamos perspective: 8px鈥 es como decirle, tu tendras una profundidad en el eje Z de 8 pixeles.

luego a la capa image__background le decimos, translateZ(0px), esto es como decirle, tu te quedaras en el fondo, en el pixel 0.

luego a la capa foreground le decimos translateZ(5), esto quiere decir que en nuestra perspectiva de 8 pixeles de prfundidad, esta en el 5, esto hace que sea mas grande y por lo tanto ajustamos su tama帽o con scale.

para calcularlo es simple:
p= perspective del container
z= translate del elemento en el eje z

p - z / z = scale correcto

(aunque el scale es subjetivo, todo depende del dise帽o que desees)

Hola!
Comparto mi ejercicio de parallax:

Y bueno si quieren revisar el c贸digo pueden verlo en:
https://codepen.io/nancygtec/pen/dyRWmge

Muy divertida la tarea 馃槂

C谩lculo: [(valor de la perspectiva en .parallax-container) - (valor de la distancia del translateZ d贸nde queremos calcular el scale)] / (valor de la perspectiva en .parallax-container)
En nuestros casos:
(8-5)/8=3/8=0.375
(8-2)/8=6/8=0.75

Efecto imagen est谩tica de background 馃槂

.
Para este utilice el efecto parallax donde cada vez que doy scroll hay una imagen de fondo estatica.

En la clase de la carta .card para que funcione el transform tienen que ser el rotate en grados

no en pixeles. 馃槃

 	.card {
           position: absolute;
           border-radius: 8px;
           background-color: hotpink;
           width: 80px;
           height: 120px;
           transform: rotate(20deg);
        }

No entendi. Debe hacer las cosas mas descriptivas, ir poniendo de a poco el codigo y que hace cada cosa. No poner 80 lineaws de comando y luego mostar el resultado.

Personalmente pienso que la estructura del curso es excelente, pero en cuanto a la pedagog铆a de la profe si tiene mucho que mejorar.
Llevo tres cursos seguidos con Estefany y me han quedado m谩s vac铆os que aprendizaje. Le falta un poco de organizaci贸n, muchos cortes en la edici贸n del video donde falla la continuidad, siempre tengo que acudir a otros cursos en Youtube para solucionar mis dudas y esto ha hecho que me desmotive mucho.
Es una opini贸n muy personal y espero que Platzi mejore en un futuro estos cursos que de verdad valen mucho la pena.

As铆 me qued贸 a Miguelito

Hola! Solo un peque帽o aporte, en la clase card del ejemplo, se coloca 20px en la funcion rotate, pero para que funcione esa propiedad se debe colocar la unidad deg,como indic贸 la profe en una clase anterior.

transform: rotate(-20deg);

https://developer.mozilla.org/es/docs/Web/CSS/transform-function/rotate()

En el minuto 4:30 la profesora coloca la propiedad transform-origin: 0 50%; pero si recordamos las primeras clases, esa propiedad necesita scale, translate, etc, no un una unidad de medida. Google Chrome la marca como una propiedad no v谩lida.

Para calcular el scale():

(perspective.value - translateZ().value)  / perspective.value = scale().value
// Los datos en este caso:
perspective: 8
translateZ(5); 5

(8 - 5) / 8 = 0.375

Daria scale(0.375)

Yo lo hice con un X-wing de Star Wars
C贸digo

Deben asegurarse que su navegador tenga activado ele efecto de scroll suave y la experiencia ser谩 mejor, para ello en el caso de chrome deben colocar este enlace: chrome://flags/
.
Luego activan el scroll suave

El efecto parallax es cuando el contenido de fondo se mueve a una velocidad diferente que el contenido de primer plano mientras el usuario hace scroll.

Les comparto el proyecto realizado con el efecto parallax.

Sitio web

Git Hub

Saludos

Mi ejercicio:

https://codepen.io/123porshumway/pen/qBrPObR?editors=1100

solo tengo un problema, al final del dise帽o queda un buen espacio en blanco de alg煤n elemento, no sabr铆an como solucionarlo?

Ten铆a una expectativa de mil de esta clase鈥 Pero no me gusto tanto, a por la que sigue!

Si alguien no entendi贸 bien el efecto, les dejo estos links para que puedan dominarlo:
Pure CSS Parallax 鈥 3 simple CSS tricks to add 馃敟 to any website [Pt. 2]

Performant Parallaxing

asi quedo mi proyecto.
https://gaxoblanco.github.io/parallax/
aunque no se ajusta a diferentes pantallas

Visiten esta p谩gina donde pueden conocer m谩s de transformaciones en 2D y 3D.
https://css-transform.moro.es

En el minuto 10:12, 驴Soy yo, o Estefy dijo 鈥淯biCARD鈥 cuando menciono las cartas? XD

buenas, comparto mi proyecto. No se adapta a todas las pantallas como me gustaria, pero bueno, de a poco.

https://gaxoblanco.github.io/parallax/

Para complementar esta clase pueden revisar esta p谩gina https://cssreference.io/property/transform-origin/

Con estos dos videos me qued贸 mucho mas claro el concepto de parallax.

https://www.youtube.com/watch?v=QeRg4t3I2zc
https://www.youtube.com/watch?v=mxHoPYFsTuk

El calculo de scale se puede hacer tomando en cuenta la perspectiva, en nuestro caso vale 8px - la distancia que nosotros tenemos, esa distancia es el translate en z que tenemos a un lado del scale; Todo esto lo dividimos entre 8

馃嵖Efecto parallax: estilos CSS

鉂esultado Final

https://codepen.io/mazzaroli/pen/vYmOZeX

馃АCalcular el Scale

scale聽=聽[(perspective聽in聽.parallax-container)聽-聽(translateZ)]聽/聽(perspective聽in聽.parallax-container)

Aqu铆 est谩 el mio: https://codepen.io/paolojoaquin/pen/GRWvpgG
Me gusto la f贸rmula que se aplico aqu铆 para obtener la escala.

Hola, paso para decirles que con la propiedad inset: 0; se ahorran tener que copiar left, right, top y bottom.

隆Genial! Hace rato quer铆a probar este efecto, muchas gracias.

Asi me quedo el ejercicio parallax

Estoy un poco confundido en cuanto al uso de transform-origin en este ejercicio鈥 lo quite y no ve铆a ninguna diferencia , adem谩s no me gustaba el escalado porque le quitaba resoluci贸n a la imagen as铆 que puse el movimiento en z en negativo y m谩gicamente( segun yo si lo manda para atr谩s el fondo lo deber铆a tapar鈥ero no sucedi贸) da el mismo efecto y la escalada era a hacer m谩s peque帽a la imagen(lo cual no me molestaba)鈥 en fin, me llevo un par de inc贸gnitas que espero resolver luego en otros videos.

<!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>paralax</title>
</head>
<body>
    <div class="parallax-container">
        <div class="image image__background">
            <img src="https://i.ibb.co/jbLKgvX/Background.png" 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="https://i.ibb.co/vJdbRkj/Alice.png" alt="foreground">
        </div>
    </div>

    <style>
        body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.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: 0 50%;
}

.image__background {
    height: auto;
    width: 100%;
    transform: translateZ(0px) scale(1);
    transform-origin: 0 50%;
}

.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-color: cornflowerblue;
    width: 80px;
    height: 100px;
    position: absolute;
    border-radius: 50px;
    transform: rotate(20px);
}
.one {
    left: 30%;
    bottom: 100px;
}
.two {
    right: 20%;
    top: 200px;
}
.three {
    right: 80%;
    bottom: -700px;
}
    </style>
</body>
</html>

para que no tenga que escribir siempre width o heigth
vs nos deja auto completar con solo escribir:
h100px
w100px
bxb = boxzizig: border box

Me gusto mucho el ejercicio. Hab铆a trabajado con este efecto pero teniendo im谩genes de fondo y textos por delante. Pero no hab铆a usado estas nuevas propiedades de perspectiva, translate en z y el origen de la transformaci贸n.
A seguir practicando!
Comparto el resultado aunque es igual al de la clase solo que con propiedades l贸gicas 馃槣

Yo hice el m铆o, y aunque no creo que me haya quedado tan bien, le implemente unas buenas cositas con SCSS.

En GitHub Pages

C贸digo:

<!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>Parallax Exercise</title>
  <link rel="stylesheet" href="./src/css/parallax.css">
</head>
<body>
<div class="wrapper">
  <main class="main">
    <section class="section section--back">
      <img src="./src/img/background.png" alt="Background" class="section__image">
    </section>
    <section class="section section--mid">
      <div class="card card--1"></div>
      <div class="card card--2"></div>
      <div class="card card--3"></div>
      <div class="card card--4"></div>
      <div class="card card--5"></div>
      <div class="card card--6"></div>
    </section>
    <section class="section section--front">
      <img src="./src/img/alice.png" alt="Alice Falling" class="section__image">
    </section>
  </main>
</div>
</body>
</html>
* { margin: 0; padding: 0; }

.wrapper {
  max-width: 100vw;
  min-height: 100vh;

  display: grid;
  grid-template: minmax(5vh, auto) / 1fr 1fr 1fr;
  grid-template-areas: "main main main";
}

.main {
  perspective: 10px;
  perspective-origin: 50%;

  position: relative;

  background-color: rgba($color: #430149, $alpha: 1.0);

  grid-area: main;

  overflow-x: hidden;

  .section {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: 0 50%;
  }

  .section--back {
    width: 100%;
    height: auto;

    transform: translateZ(0px) scale(1);
  }

  .section--mid {
    width: 100%;
    height: 100%;

    transform: translateZ(8px) scale(0.2);

    .card {
      width: 100px;
      height: 150px;

      position: absolute;

      background-color: white;
    }
    .card:nth-child(odd) { border: 4px solid red; right: (3 * 2) + 0%; }
    .card:nth-child(even) { border: 4px solid black; left: (3 * 2) + 0%; }

    @for $i from 1 to 7 {
      .card--#{$i} { top: ($i * 45) + 0%; }
    }
  }

  .section--front {
    transform: translateZ(4px) scale(0.6);
    transform-origin: top;
  }
}

Excelente curso

estan muy buenas las heramientas me esta gustando mas css la verdad si que se pueden hacer muchas cosas con el y todavia falta mucho m谩s鈥 excelente鈥