Как можно сделать паралакс циклом при помощи each чтобы упростить код?
$( document ).ready(function() {
$(window).scroll(function(){ // событие скролл
var sec_1 = $('.sec_1').offset(), // вычисляем сдвиг секции от верха страницы
sec_2 = $('.sec_2').offset(),
sec_3 = $('.sec_3').offset(),
sec_4 = $('.sec_4').offset(),
wScroll = $(this).scrollTop(); // событие скролинга
$('.sec_1 h2').css({
'transform':'translate(0, ' + (wScroll - sec_1.top)/2 + '%)' //вычисляем значение top у первого блока
}); // смещаем через css
$('.sec_2 h2').css({
'transform':'translate(0, ' + (wScroll - sec_2.top)/2 + '%)'
});
$('.sec_3 h2').css({
'transform':'translate(0, ' + (wScroll - sec_3.top)/2 + '%)'
});
$('.sec_4 h2').css({
'transform':'translate(0, ' + (wScroll - sec_4.top)/2 + '%)'
});
});
});
section{
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
}
section h2{
text-transform: uppercase;
text-align: center;
font-size: 40px;
text-shadow: 0px 0px 10px #f5f5f5;
}
.sec_1{
background: url(https://www.voprosy-kak-i-pochemu.ru/wp-content/uploads/tum_andr.jpg) center center;
background-size: cover;
}
.sec_2{
background: url(https://www.nasa.gov/images/content/178493main_sig07-009-hires.jpg) center center;
background-size: cover;
}
.sec_3{
background: url(https://i1.rozetka.ua/goods/4681446/41693624_images_4681446256.jpg) center center;
background-size: cover;
}
.sec_4{
background: url(https://www.vladtime.ru/uploads/posts/2018-07/1532434440_andromeda.jpg) center center;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="sec_1">
<h2>Паралакс</h2>
</section>
<section class="sec_2">
<h2>Галактика</h2>
</section>
<section class="sec_3">
<h2>Космос</h2>
</section>
<section class="sec_4">
<h2>Паралакс</h2>
</section>
Пытался как-то так, но не могу понять как динамически брать значение sec.
$(window).scroll(function(){ // событие скролл
var sec = $('section').offset(), // вычисляем сдвиг секции от верха страницы
wScroll = $(this).scrollTop(); // событие скролинга
$('section h2').each(function(){
$(this).css({
'transform':'translate(0, ' + (wScroll - sec.top)/2 + '%)' //вычисляем значение top у первого блока
}); // смещаем через css
});
});