css实现视觉差的滚动

　　之前在逛知乎的时候，发现知乎app首页中偶尔掺杂的广告图片，都是做的视觉差的效果，广告图片的向上速度明显比外面页面的上拉速度慢了很多，看起来很炫酷，然后在网上看了下，发现有很多js插件可以实现这种效果。这种就不提了，这次我们是考虑的用css写。（当然，ie是不兼容的）

　　这边参考了张鑫旭大神的一篇文章。视觉差-张鑫旭

　　这边是我参考之后做的demo： demo

　　主要的代码就是

　　　　外层容器： perspective: 1px; 定义3d元素离视图的距离

　　　　中间元素： transform-style: preserve-3d; 定义3d空间。

　　　　需要视觉差的元素： transform: translateZ(-1px ) scale(2)

　　这里面大体的原理就是：因为定义了视图距离为1px，那么translateZ -1px的话，我们肉眼看这个图片就只有之前的一半大小，这个时候scale（2）的话，就放大了2倍，视觉上就和原来的一样大小，但是滚动的时候，位移的变化还是1：2，这样就形成了视觉差。

　　如果更改translateZ的话，那么视觉效果就会越来越远，图片的移动就会越来越不明显。这样就可以模拟不同的需求。

转载于:https://www.cnblogs.com/wjyz/p/10231879.html

css实现视觉差的滚动相关推荐

html纵向滚动特效,带视觉差效果的垂直全屏整页滚动特效
这是一款效果非常炫酷的带视觉差效果的垂直全屏整页滚动特效.该特效使用jQuery和CSS3完成,用户可以通过滚动鼠标来一次垂直切换一个页面,在页面切换的时候还带有一些视觉差特效. 使用方法 HTML结 ...
2021-4-27 工作记录--input和textarea出现边框部分失踪+让多个文本输入框左侧对齐+电话号码的正则表达式+图片和文字没有对齐+jQuery滚动视觉差插件+清除浮动
一.input和textarea在不同屏幕尺寸下出现边框部分失踪的问题 1.解决方法给input和textarea设置border 2.使用例子代码: 结果: 二.让多个文本输入框左侧对齐代码: ...
html缩放惯性,js带滚动惯性的视觉差特效插件
luxy.js一款js带滚动惯性的视觉差特效插件.该插件可以在页面中制作图片HTML内容滚动视觉差特效,并且在页面滚动时,带有惯性效果,非常炫酷. 安装可以通过npm来安装luxy.js插件. np ...
css - fixed 背景固定视觉差效果
1.background-attachment 属性 - 设置背景图像是否固定或者随着页面的其余部分滚动. 2.background-size- 把背景图片放大到适合元素容器的尺寸,图片比例不变:一般 ...
视觉差效果制作总结和案例下载
视觉差效果描述所谓视觉差效果,就是我们所看到的那种背景固定的滚动的效果,你可以预览查看.我前面加链接的这两个,都是我们所常说的视觉差效果.其实视觉差效果流行蛮久了!那今天,我和大家简单介绍一下这个视 ...
html 视差效果,使用6种不同视觉差特效的HTML5页面设计效果
这是一款使用6种不同的视觉差效果混合在一起来组成一个HTML5滚动视觉差特效页面.该视觉差特效分为:页面头部图片视觉差,文字视觉差,图片列表视觉差,图片画廊视觉差等,效果非常的炫酷. 使用方法该滚动 ...
3d视觉效果html,jQuery炫酷网页3D背景视觉差特效
这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件.该视觉差特效可以制作为全屏背景视觉差效果,也可以在一个容器中制作背景视觉差效果.当用户移动鼠标时,由于背景图片的移动速度不同,形成了3D ...
视觉粒子html,带视觉差效果可互动的背景粒子动画特效
这是一款效果非常炫酷的jQuery和CSS3网页背景粒子动画特效.该背景特效中粒子可以使用鼠标来进行互动,并且在粒子运动的过程中带有一些视觉差特效. 制作方法 HTML结构这个背景粒子动画特效的HT ...
[css] 你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？
[css] 你知道全屏滚动的原理是什么吗?它用到了CSS的哪些属性? 全屏滚动和轮播图类似,都是通过改变元素位置或者显示与隐藏来实现,配合JS的一些交互距离判断,实现类似原生滚动捕获的效果.这里全屏的 ...

css实现视觉差的滚动

css实现视觉差的滚动相关推荐

最新文章

热门文章