Реализация добавления элементов при скролинге
 

Добрый день, подскажите пожалуйста как реализовать правильно поочередное появление элементов при 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);
				
	   })
})

Зарание спасибо.