Parallax

Tutorial Efecto Parallax Scrolling en CSS3

Lo has visto mil veces, seguro: entras en una web, haces scroll y de repente el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad y dejando ver partes que antes no veías. Se llama Parallax.

Efecto Parallax Scrolling en CSS3

En este artículo, voy a implementar el uso de una sencilla técnica con la que podremos lograr un efecto muy interesante, el famoso Parallax para nuestras páginas web, y lo mejor es que todo lo lograremos usando CSS3, y el plugin parallax.min. ¡Te vas a sorprender de lo sencillo que es!

 

 

El HTML5

Primeramente vamos a añadir la imagen a la cual queremos crear el efecto Parallax, dentro del contenido de nuestra web.

<div class="container">
  <div class="herounit">
    <img src="parallax.png" alt="Main Image" class="heroimg">
    <div class="title">
      Parallax Text Here
    </div>
    <div class="herotext">
      <h1>More Content Here</h1>
    </div>
  </div>
</div>

CSS3

A continuación y con unas pocas líneas vamos a encargarnos de darle el preciado efecto Parallax a nuestra imagen.

.container {
  overflow-x: hidden;
  overflow-y: auto;
  height: 100vh;
  -webkit-perspective: 1px;
  perspective: 1px;
  -webkit-overflow-scrolling: touch;
}
 
.herounit {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
.heroimg {
  -webkit-transform: translateZ(-1px) scale(2);
  transform: translateZ(-1px) scale(2);
  position: relative;
  top: calc(((100vh - 51.54vw) / 4) * -2);
}

 

Os dejo el enlace con el ejemplo para que podáis descargarlo y adaptarlo fácilmente a vuestro diseño.

 

Generador de Snippets en CSS3 y HTML5

 

Espero como siempre que os haya sido de gran utilidad, y si os gustó deis like en mis redes sociales y lo compartáis para que vuestros amigos también puedas aprender a crear este estupendo efecto. ¡Gracias!

 

Descargar

 

Compartir en Redes SocialesShare on Facebook3Tweet about this on TwitterShare on Google+1Pin on Pinterest0