Efecto parallax: estilos CSS

¡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

https://www.bustle.com/comics/why-pizza-is-your-real-bff-39351

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

• Link de Bustle: https://www.bustle.com/comics

• Link de la conferencia de JSConf sobre el efecto usado en el comic: https://www.youtube.com/watch?v=LXgmD6kGkmI&ab_channel=JSConf

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

Comparto mi ejercicio https://codepen.io/Londrack/full/bGqZgpg

En el minuto 10:12, ¿Soy yo, o Estefy dijo “UbiCARD” cuando menciono las cartas? XD

https://www.bustle.com/comics

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

❤Resultado 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.

Les comparto mi práctica.
https://codepen.io/davidosorio/full/rNypyEz

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…pero 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 😜

El codigo que copie de la clase

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…