0

Estoy trabajando en una web en la que debo colocar 3 videos de fondo y aplicar efecto parallax en diferentes secciones de la web, en la primera sección he puesto el video de fondo y me es reponsive y no tengo ningún problema, el problema viene cuando voy a poner los otros videos, si quiero el efecto parallax, se me superpone con el primero, si le doy un z-index menor, no se ve pq lo tapa el primero.

Que atributos debo poner o tener en cuenta en el CSS a la hora de hacer esto?

 /*Aqui el primer video*/

    .home {
    	width: 100%;
    	height: 100vh;
    	background: url(img/rtlCD.jpg);
    	background-size: cover;
    	background-position: center center;
    	position: relative;
    	display: block;
    	justify-content: center;
    	align-items: center;
    	background-attachment: fixed;
    }

    #videoRtl{
    	position: fixed;
    	min-width: 100%;
    	min-height: 100%;
    	top: 50%;
    	left: 50%;
    	transform: translateX(-50%) translateY(-50%);
      }
      
    /*Aqui el segundo video*/

    .containerShop{
    	width: 100%;
    	height: 80vh;
    	background: url(img/rtlCD.jpg);
    	background-size: cover;
    	background-position: center center;
    	position: relative;
    	display: block;
    	justify-content: center;
    	align-items: center;
    	background-attachment: fixed;

    }


    #videoRtl2{
        position: absolute;
        width: auto;
        height: auto;
        max-width: 100%;
        min-height: 100%;
    	top: 50%;
    	left: 50%;
    	transform: translateX(-50%) translateY(-50%);
    	
    }
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Retrace The Lines</title>
	<link rel="icon" type="image/png" sizes="16x16" href="css/img/FAVICON/logo16.png">
	<link rel="icon" type="image/png" sizes="32x32" href="css/img/FAVICON/logo32.png">
	<link rel="icon" type="image/png" sizes="96x96" href="css/img/FAVICON/logo96.png">
	<link rel="icon" type="image/png" sizes="192x192" href="css/img/FAVICON/logo192.png">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<script src="js/core.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="js/jquery.stellar.js"></script>
	<script>
		
	$.stellar();

	</script>
</head>
<body>
	
		<div id="menuContainer">
			<nav id="menu">
				<ul>
					<a href="#rtl"><li>o</li></a>
					<a href="#meetUs"><li>o</li></a>
					<a href="#videos"><li>o</li></a>
					<a href="#tourDates">o<li></li></a>
					<a href="#shop"><li>o</li></a>
					<a href="#music"><li>o</li></a>
					<a href="#contact"><li>o</li></a>
				</ul>
			</nav>
		</div>
		<!--End menuContainer-->

		<section id="containerRtl" class="home" data-stellar-background-ratio="0.5">
			<video id="videoRtl" src="css/vid/Test01.mp4" autoplay loop muted></video>
			<div id="logo">
				<img id="img1" src="css/img/RtlLogoBlanco.png"/>
			</div>
			<div id="container1">
				<div id=container1Shop>
					<a href="#"><p>GET IT HERE</p></a>
				</div>
					<br/>
				<div id="containerScrollButton">
					<img id="img2" class="img2" src="css/img/295892-0-scrollDown.png"/>
				</div>

			</div>


		</section>
		<!--End containerRtl-->
    
    <section id="containerShop" class="containerShop" data-stellar-background-ratio="0.5">
			<video id="videoRtl2" src="css/vid/RTL_Cube_web_3.mp4"  autoplay loop muted></video>
			<h1 id="titleRtl"><span class="azul">"DEPARTURES / ARRIVAL"</span> 
			<br/>
			<span class="normal">Official Store</span></h1>
			<div id="container2">
				<a href="#">GO TO SHOP</a>
			</div>
		</section>

En el código lo he puesto así, pq funciona pero no consigo el efecto parallax ni el video se me ejecuta "responsive", con el primero no tengo ningún problema.

Muchas gracias

3
  • publica el codigo html porfavor Commented el 19 feb. 2017 a las 23:36
  • Añadido. Gracias. Commented el 20 feb. 2017 a las 5:34
  • 2
    @CoreyBorja, ¿qué deseas lograr? (el código que has situado no funciona). No quieres que el segundo vídeo esté por encima del primero pero tampoco quieres que esté por debajo, creo que debes explicar un poco mejor lo que deseas hacer, porque con decir parallax solo aclaras que al hacer scroll habrá diferentes planos moviéndose a diferente velocidad.
    – ElChiniNet
    Commented el 24 feb. 2017 a las 23:14

1 respuesta 1

1

si te sirve a nivel de concepto:

Los divs mas recientes siempre tienen prioridad sobre el div anterior en caso de compartir posición:

El segundo div en igual de condiciones/estilo, se vera por encima del primero si se diera el caso.

Para eso tenemos como bien dices, la propiedad z-index.

A mayor valor numérico, mayor prioridad de visibilidad tendra:

z-index: 1 < z-index: 99

En tu caso, primero es saber que videos quieres que pasen por encima de cuales, si los últimos por encima de los primeros, o al revés.

Cuando lo tengas claro, simplemente aplica prioridades con z-index. Si es para utilizar en paralax, puedes crear estilos de z-index y aplicarlos a las etiquetas por ejemplo:

.z1{ z-index: 1 }
.z10{ z-index: 10 }
.z100{ z-index: 100 }

Luego añades esta clase a los vídeos y asi priorizas cuales van por encima de cuales. Te recomendaría dejar buenos rangos de separación por si en un futuro tienes objetos intenermedios poder intercalarlos.

<video class="z10"></video>
<video class="z100"></video>
<video class="z1"></video>

De esta forma, el segundo pasa por encima del primer video, y el tercero por debajo del segundo y del primero.

Hay otras formas de hacerlo pero te recomendaría empezar así hasta que vayas cogiendo más soltura ;)

Espero haberte ayudado, un saludo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.