blog/html-video-parallax
HTML: Video Parallax
Por Yal Publicidad
Publicado el Jue 7 de Mayo del 2020 a las 23:30
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