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

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

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

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

/*
// ======视觉差滚屏效果 - 夕空 | 2019-5
scrollplay(元素,消失点) 消失点也就是原始坐标会和点
元素需要sc 时差属性
sc>0的值是超过滚动条速度的,反之sc<0的值是慢于滚动条速度。
------
html: 
示例
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")

 

你可能感兴趣的:(javascript)