1

Есть несколько блоков, которые находятся друг под другом и "имеют эффект параллакса".
Суть эффекта заключается в том, чтобы поднять определённый дочерний блок вверх.

Может кто подсказать, как сделать так, чтобы эффект активировался в тот момент, когда клиент доскроллил до блока, в котором есть параллакс.
Ну и он деактивировался, когда этот блок проскроллили.
Естественно учитывая тот факт, что блоков с параллаксом будет несколько.

Вот пример:

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>

1 ответ 1

2

Если грубо, то можно так:

$(document).ready(function(){
	
  var necessaryHeight = $(".dd").height();
  var object = [];
  
  $(document).on('scroll', function(){
    object.bottom = $(".cc")[0].getBoundingClientRect().bottom;
    object.bottomWithHeight = $(".cc")[0].getBoundingClientRect().bottom + necessaryHeight;
    wY = window.pageYOffset;
    if ( (wY > object.bottom) && (wY < object.bottomWithHeight) )
    	console.log("Over");
    if ( (wY < object.bottom) || (wY > object.bottomWithHeight) )
      console.log("Out");
  });
});
.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>

Если мягче и точнее, лучше воспользоваться готовыми библиотеками.

1
  • 1
    Ахаха, спасибо, но я уже заказ давно сдал. Отмечу как правильный, спасибо :D
    – De.Minov
    9 окт 2018 в 16:56

Ваш ответ

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

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