如何实现悬停/滚动时四列不同速度的画廊效果？

我想要制作一个类似分层滚动效果的炫酷画廊脚本，已经在网络和Stack Overflow上查阅了大量相关资料，但代码还没完全实现预期的滚动联动效果。我尝试了两种方案：一种基于jQuery的animate方法，另一种是在JSfiddle上找到的现成脚本。以下是我写的jQuery animate版本代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.col-one, .col-two, .col-three, .col-four { 
    position: relative; 
    float: left; 
    padding-left: 0px; 
    box-sizing: border-box; 
}
.col-one { width: 500px; padding: 0; }
.col-two { width: 250px; padding: 0; }
.col-three { width: 125px; padding: 0; }
.col-four { width: 62.5px; padding: 0; }
.col-two img, .col-one img, .col-three img, .col-four img { 
    width: auto; 
    max-width: 100%; 
}
</style>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#one').hover(function(){
        var iScrollPos = 0;
        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            var a = iCurScrollPos-iScrollPos;
            if (iCurScrollPos > iScrollPos) { //Scrolling Down
                console.log(iCurScrollPos-iScrollPos);
                $( "#two" ).clearQueue();
                $( "#two" ).stop();
                $( "#three" ).clearQueue();
                $( "#three" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            } else {
                console.log(a);
                $( "#two" ).clearQueue();
                $( "#two" ).stop();
                $( "#three" ).clearQueue();
                $( "#three" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            }
            iScrollPos = iCurScrollPos;
        });
    });

    $('#two').hover(function(){
        var iScrollPos = 0;
        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            var a = iCurScrollPos-iScrollPos;
            if (iCurScrollPos > iScrollPos) { //Scrolling Down
                console.log(iCurScrollPos-iScrollPos);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();
                $( "#three" ).clearQueue();
                $( "#three" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            } else {
                console.log(a);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();
                $( "#three" ).clearQueue();
                $( "#three" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#three" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            }
            iScrollPos = iCurScrollPos;
        });
    });

    $('#three').hover(function(){
        var iScrollPos = 0;
        $(window).scroll(function () {
            var iCurScrollPos = $(this).scrollTop();
            var a = iCurScrollPos-iScrollPos;
            if (iCurScrollPos > iScrollPos) { //Scrolling Down
                console.log(iCurScrollPos-iScrollPos);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();
                $( "#two" ).clearQueue();
                $( "#two" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            } else {
                console.log(a);
                $( "#one" ).clearQueue();
                $( "#one" ).stop();
                $( "#two" ).clearQueue();
                $( "#two" ).stop();
                $( "#four" ).clearQueue();
                $( "#four" ).stop();
                $( "#one" ).animate({ "top": "-="+a+"px" }, {duration: 2000, easing: "linear" } );
                $( "#two" ).animate({ "top": "-="+a+"px" }, {duration: 1000, easing: "linear" } );
                $( "#four" ).animate({ "top": "-="+a+"px" }, {duration: 500, easing: "linear" } );
            }
            iScrollPos = iCurScrollPos;
        });
    });

    $('#three').hover(function(){
</script>
</head>
<body>
<!-- 页面需要对应id的元素才能生效，示例结构：
<div id="one" class="col-one"><img src="your-image.jpg"></div>
<div id="two" class="col-two"><img src="your-image.jpg"></div>
<div id="three" class="col-three"><img src="your-image.jpg"></div>
<div id="four" class="col-four"><img src="your-image.jpg"></div>
-->
</body>
</html>

内容的提问来源于stack exchange，提问作者ggg