HTML5: Video Parallax

el
Seguro lo has visto muchas veces; entras en un sitio web, haces scroll y de pronto el fondo parece moverse a una velocidad distinta que el contenido, creando un ligero efecto de profundidad, dejando ver partes que antes no veías.

¿Qué es el Parallax y cómo se hace?

El Parallax (en español "Paralaje") es un efecto de diseño web que consiste en simular el desplazamiento de los objetos de una web a diferentes velocidades y en distintas capas, lo que consigue engañar a nuestro cerebro para que pensemos que estamos viendo un paisaje en 3D.
En este ejemplo nos enfocaremos a crear un efecto parallax en videos y no en imágenes.

Crear Efecto Parallax Con Video

CSS: style.css
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700);
* {
  font-family: "Open Sans";
  box-sizing: border-box;
  text-align: center;
  color: #fff;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
  position: relative;
}
figure h1 {
  position: absolute;
  top: 20px;
  left: 20px;
  border-right: 3px solid #fff;
  padding: 5px 10px 5px 5px;
}

video {
  width: 100%;
  max-width: 100%;
}

.stretch {
  height: 2000px;
  background: tomato;
  min-height: 100%;
  min-width: 100%;
  background-size: cover;
  margin-top: 800px;
}
.stretch h1 {
  padding: 20px;
}

.hero-wrapper {
  position: fixed;
  bottom: 0;
  right: 0;
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  z-index: -9999;
}

HTML: index.html
<html>
<head>
  <title>Video Parallax</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero-wrapper">
  <div class="hero">
    <figure>
      <video loop="loop" muted="muted" autoplay="autoplay">
        <source src="https://video-ams4-1.xx.fbcdn.net/v/t43.1792-2/10915866_10152791329322833_1518938879_n.mp4?_nc_cat=111&_nc_sid=985c63&efg=eyJybHIiOjE1MDAsInJsYSI6MTAyNCwidmVuY29kZV90YWciOiJoZCJ9&_nc_ohc=DUhlw8745W8AX_QI6zs&rl=1500&vabr=282&_nc_ht=video-ams4-1.xx&oh=921fbbe34f4969361e217a1b3bd9dfba&oe=5EB4C49C"/>
      </video>
      <figcaption>
        <h1>Really cool video parallax</h1>
      </figcaption>
    </figure>
  </div>
</div>
<div class="stretch">
  <h1>Some more content down here...</h1>
</div>
</body>


FUENTE: https://www.yalpublicidad.com/blog/html-video-parallax

YAL PUBLICIDAD
Yuri Lizama A.
www.yalpublicidad.com

Comentarios

Publicar un comentario