blog/html-video-parallax

HTML: Video Parallax

Por Yal Publicidad


Publicado el Jue 7 de Mayo del 2020 a las 23:30



¿Qué es el Parallax y cómo se hace? Te explicamos qué es el Parallax, ese efecto que al entrar en una web, hacer scroll el fondo parece moverse a una velocidad distinta que el contenido...

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>

YAL PUBLICIDAD
Yuri Lizama A.
www.yalpublicidad.com


Deja un comentario:
Buscar
Acerca de Nosotros
@yalpublicidad Agencia de publicidad online. 19 años de experiencia en el diseño y desarrollo de imagen e identidad corporativa de tu empresa...