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 36

Preguntas 17

Ordenar por:

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

¬°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)

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

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);
        }

Efecto imagen est√°tica de background ūüėÉ

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

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 ūüėÉ

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.

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)

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()

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

Les comparto el proyecto realizado con el efecto parallax.

Sitio web

Git Hub

Saludos

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

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?

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.

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.

En el minuto 10:12, ¬ŅSoy yo, o Estefy dijo ‚ÄúUbiCARD‚ÄĚ cuando menciono las cartas? XD

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.

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

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.

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

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

Así me quedó a Miguelito

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 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 ūüėú

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

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…