Breaking

Post Top Ad

Your Ad Spot

viernes, 10 de mayo de 2019

Efecto de desplazamiento de paralax Pure-CSS

CSS es a menudo más poderoso de lo que la gente le da crédito. Una serie de tareas comunes que generalmente dependen de las bibliotecas de JavaScript a menudo se pueden implementar en CSS sin mucho esfuerzo. Un gran ejemplo de esto es el efecto de paralaje que está actualmente en boga. (Donde las imágenes de fondo se desplazan más lentamente que el contenido de la página para dar una ilusión de distancia).
Si bien no hay escasez de bibliotecas disponibles para producir este efecto en JavaScript, este artículo demostrará un enfoque más simple solo para CSS. ~ 35 líneas )
Usaremos imágenes de placekitten como imágenes de fondo de marcador de posición. Si aún no conocía ese sitio, solo tenga en cuenta que ahora tiene que usar gatitos como imágenes de marcador de posición desde ahora hasta el final de los tiempos.

Margen

No hay mucho margen que vamos a necesitar en absoluto. Sólo esta:
<main class="wrapper">
  <section class="section parallax bg1">
    <h1>Such Adorableness</h1>
  </section>
  <section class="section static">
    <h1>Boring</h1>
  </section>
  <section class="section parallax bg2">
    <h1>SO FWUFFY AWWW</h1>
  </section>
</main>
Aquí hay un desglose de lo que cada clase es para:
  • .wrapper : establece las propiedades de perspectiva y desplazamiento para toda la página.
  • .sección - Tamaño, visualización y propiedades de texto. En su mayoría no es relevante para el efecto de paralaje.
  • .static : agrega un fondo a una sección, solo como demostración.
  • .parallax : agrega un :: pseudo-elemento después de la imagen de fondo y las transformaciones necesarias para el efecto de paralaje.
  • .bg1, .bg2 : agrega las imágenes de fondo respectivas para cada sección. (Podrías usar una etiqueta img en su lugar).

Estilo

Ahora, en el estilo real que hace que la magia suceda. Se comentan las líneas relevantes.
.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;

  /* For text formatting. */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}
¡Eso deberia ser todo lo que necesitas! Aquí hay un ejemplo de trabajo .

Notas

  • Es posible colocar las imágenes más lejos para que se muevan más lentamente. Tendrás que jugar con la perspectiva y la transformación. Probablemente hay una forma más científica de hacer esto también.
  • Si no desea que la imagen de fondo se desplace, solo use en background-attachment: fixed;lugar de perspectiva / trasladar / escalar.
  • Esta técnica no funciona bien en un safari de iOS debido a algunas de las optimizaciones de ese navegador.
¡Disfrutar!

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas