Parallax эффект для нескольких блоков

186

28 октября 2018, 22:00

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

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

Вот пример:

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>

Answer 1

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

$(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>

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