根据滚动页面的位置,控制页面元素的滚动差,使页面看起来有深度有纵深立体感。
放飞你的设计,让页面更具个性~~
下载: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)");
}
})
}