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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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