Добрый день, подскажите пожалуйста как реализовать правильно поочередное появление элементов при scroll.
Суть проекта, страница о домашних животных, появилась идея, чтоб при прокрутке страницы, вслед за движением появлялись/исчезали отпечатки лап...
Пробую реализовать таким образом, ...делаю 4 блока с фоном виде отпечатков и абсолютным позицирнированием, потом вычисляю положение элемента возле которого они должны появлятся и в зависимости от его позиции добавляю их...правильно ли это решение?
$(document).ready(function(){
$(document).scroll(function(){
var div1 = document.getElementById('div-1');
var rect = div1.getBoundingClientRect ();
x = rect.left;
y = rect.top;
if(y > 0 && y < 100){
$("div.lap2").animate({opacity:1}, 1200)
}
if(y < 0 && y < -100){
$("div.lap3").animate({opacity:1}, 1200)
}
if(y < -100 && y < -200){
$("div.lap4").animate({opacity:1}, 1200)
}
if(y < -200 && y < -300){
$("div.lap").css({top: 622,left: 158,opacity: 0});
$("div.lap").animate({opacity:1}, 1200)
}
if(y < -300 && y < -400){
$("div.lap2").css({opacity: 0, top: 732 , left: 305});
}
if(y < -400 && y < -500){
$("div.lap3").css({opacity: 0, top: 910, left: 299});
}
console.log(" Left: " + x + "\n Top: " + y);
})
})
Зарание спасибо.
