1

Как можно сделать паралакс циклом при помощи 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

    });
});

1 ответ 1

2

function parallax() {
  var element = this;
  $(window).scroll(function () {
    var wScroll = $(this).scrollTop();
    var offset = $(element).offset();
    $(element).find("h2").css({'transform':'translate(0, ' + (wScroll - offset.top)/2 + '%)'})
  });
}

$(document).ready(function() {
  $("section").each(parallax);
})
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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.