Saludos.
Esta es mi página:
Tengo un efecto con el método animate de JQuery, el cual hace que cuando hagas scroll hacia abajo en la página, la segunda sección suba de posición y se ponga sobre la primera, tapando el video; y lo otro que quiero que haga es que cuando vuelvas a subir con el scroll, la segunda sección vuelva a bajar y el video quede descubierto de nuevo (como al principio).
Estas 2 cosas las hace, el problema es que le toma demasiado tiempo hacerlas, sobretodo lo de volver, le toma demasiados segundos empezar a hacerlo, y me gustaría que el efecto ocurriese de inmediato y de forma fluída, que ocurra junto con el movimiento del scroll en la pantalla, no que se tome unos segundos de carga y luego lo haga.
Aquí está el código:
<script>
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 180) {
$(".content-dos").animate({top : "0%"}, "slow");
$(".beneficios").css("display" , "block");
} else {
$(".content-dos").animate({top : "70%"});
}
});
</script>
html,
body {
height: 100%;
}
body {
font-size: 16px;
font-family: "Oxygen", sans-serif;
line-height: 1.5;
}
/* =============================================================================
CONTENT
============================================================================= */
.content {
position: relative;
top: 30%;
z-index: 2;
margin: 0 auto;
max-width: 720px;
text-align: center;
}
.content-dos {
position: relative;
top: 70%;
z-index: 2;
margin: 0 auto;
text-align: center;
padding: 120px;
color: #fff;
background-color: #fff
}
.content-tres {
z-index: 2;
margin: 20px auto;
text-align: center;
}
<body>
<div class="content-menu">
<ul class="menu-top">
<input type="checkbox" id="collapse"/>
<label for="collapse">Menú</label>
<li><a href="#">Inicio</a></li>
<li><a href="#">Quiénes Somos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Portafolio</a></li>
</ul>
</div>
<div class="content">
<h1 class="content__heading">FERIA PIXEL</h1>
<p class="content__teaser">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit qui voluptatum enim est deserunt assumenda, aspernatur quam aperiam!</p>
<a href="#" class="content__cta">Ver Video</a>
<a href="#" class="content__cta">Portafolio</a>
</div><!-- /content -->
<video id="my-video" class="video" muted loop>
<source src="videos/Vbg_mp4.mp4" type="video/mp4">
<source src="videos/Vbg_webmsd.webm" type="video/webm">
</video><!-- /video -->
<!--<div class="content-dos parallax-window " data-parallax="scroll" data-image-src="img/ref-2725055.png" >
<div class="row ">
<div class="col-sm-6">
<h2 class="intro_headline">
Anchour is a branding agency based in Maine.
</h2>
</div>
<div class="col-sm-6 intro_content">
We believe that truly impactful brands inspire their audiences to action, to dream, to change; they leave an impression on their audiences and wield genuine influence. Creating work like this is our passion, it’s what brought us together, and it’s what keeps us moving forward.
</div>
</div>
</div>
-->
<div class="content-dos">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
</div>
<div class="row segunda-fila">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-2">
<span class="glyphicon glyphicon-home beneficios"></span>
</div>
<div class="col-sm-10">
<h4 >Design To Brag About</h4>
<p>Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna et. Quisque euismod orci ut et lobortis aliquam. Aliquam in tortor enim.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-tres">
<!--
<div class="row">
</div>
Probé sin usar animate de Jquery, sólo css, Mi código quedó así:
$(document).ready(function(){
$(window).scroll(function() {
if($(document).scrollTop() >= 80) {
$(".content-dos").addClass("test");
} else {
$(".content-dos").removeClass("test");
}
});
});
Y funciona todo tal como quiero. ¿Hay alguna forma de ponerle alguna transición con css ya que el método animate de Jquery no me está funcionando como quiero?