Есть несколько блоков, которые находятся друг под другом и "имеют эффект параллакса".
Суть эффекта заключается в том, чтобы поднять определённый дочерний блок вверх.
Может кто подсказать, как сделать так, чтобы эффект активировался в тот момент, когда клиент доскроллил до блока, в котором есть параллакс.
Ну и он деактивировался, когда этот блок проскроллили.
Естественно учитывая тот факт, что блоков с параллаксом будет несколько.
Вот пример:
var slidePos = $('.effect').eq(0).offset().top;
$(window).bind('scroll', function() {
var scPos = $(this).scrollTop();
if (scPos > slidePos)
$('.effect').eq(0).css('transform', 'translateY(-' + (scPos - slidePos) + 'px)');
});
.slide {
display: block;
width: 100%;
min-height: 400px;
position: relative;
}
.slide.header {
background-color: #777;
}
.slide.aa,
.slide.aa .effect {
background-color: aquamarine;
}
.slide.bb,
.slide.bb .effect {
background-color: bisque;
}
.slide.cc,
.slide.cc .effect {
background-color: coral;
}
.slide.dd,
.slide.dd .effect {
background-color: darkorchid;
}
.slide.parallax .effect {
display: block;
width: 80%;
min-height: 200px;
margin: 0 10%;
position: absolute;
top: 10%;
box-shadow: 0 0 10px 0 #333;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="slide header"></div>
<div class="slide aa parallax">
<div class="effect"></div>
</div>
<div class="slide bb parallax">
<div class="effect"></div>
</div>
<div class="slide cc parallax">
<div class="effect"></div>
</div>
<div class="slide dd parallax">
<div class="effect"></div>
</div>