blog/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.
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.
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