web视差滚动浏览 - 让页面看起来有纵深立体感

根据滚动页面的位置，控制页面元素的滚动差，使页面看起来有深度有纵深立体感。

放飞你的设计，让页面更具个性~~

下载：https://download.csdn.net/download/zhi_jie/11172152
JS代码：

/*
// ======视觉差滚屏效果 - 夕空 | 2019-5
scrollplay(元素,消失点) 消失点也就是原始坐标会和点
元素需要sc 时差属性
sc>0的值是超过滚动条速度的，反之sc<0的值是慢于滚动条速度。
------
html: <div class="scrollbox" sc="-0.5">示例</div>
JS: scrollplay($(".scrollbox"), $(window).height()*0.4);
*/
function scrollplay($target,$point){
    var point=$point || 300;
    $target.each(function(){
        $(this).data("top",$(this).offset().top);
    })
    document.onscroll = function(){
        var scrollTop = $(window).scrollTop();
        var fold = $(window).height() + scrollTop;
        scrollbox($target,fold,scrollTop,point);
    }
}
function scrollbox($target,fold,scrollTop,point){
    $target.each(function(){
        //从下方进入时 && 至顶部域内
        if ($(this).data("top")<fold && scrollTop < $(this).offset().top+$(this).height()) {
            var newY=($(this).data("top")-point-scrollTop)*$(this).attr('sc');
            $(this).css("transform","translateY("+newY+"px)");
        }
    })
}