CSS视差滚动 你会了咩

作者: 鹿角です分类: 计算机技术 发布时间: 2020-04-22 19:52:49 浏览:100292 次

CSS视差滚动 你会了咩

弦上韫玉:
建议up可以在开头先放效果,然后再开始写代码呀[呲牙]

小熊猫的飞行周期:
就是屏幕上是装图片的盒子,而图片则设置translateZ让其原理屏幕(负值translateZ),然后再将其放大,再在body设置透视,使得滚动页面是盒子移动的速度和图片移动的速度有了一快一慢的效果,从而产生视差 生活例子:比如距离你一公里外的人跳一下在你看来不过是比一个手指的距离,但你在原地跳一下可以跳甚至一米,这就是一米和几厘米但跳了同样高的效果 可以假定三个人,ABC,A是user,B是perspective距离的人,C是translateZ距离的人,B为100,C为-170,那么此时B和C相同起跳,在A看来B一定是必C跳的高的,但实际上二者起跳的高度相同,将其应用到web上就是视差滚动了

【回复】谢谢大佬(*°▽°*)八(*°▽°*)♪
【回复】听君一席话胜看up四分钟[doge]
盒子不会成精:
打代码一定要笑着打,对,笑着打[doge]

【回复】出了BUG之后,我打NM(掀桌子)[doge]
【回复】回复 @DrakeValue :注意要笑着说:我打NM[doge]
初生的小白:
git的star和素质三联,你选一个吧。[妙啊]

海底大菠萝丶:
好多视频都是搬运的油管,像up这样自己写的挺少的了,三连了[OK]

同里啊给呀痛:
这里为什么要用overflow-y:auto,之前看华峰的背景位移也用到了这个属性,就很疑惑。

【回复】最外层设置了Y轴hidden 所以内部设置Y轴auto让界面可以滚动啊
我是Dom君:
能不能把关键的代码属性或原理说一下,看代码视频效率太低了[鸡腿]

Luyc1997:
html { overflow: hidden; }这具体是什么作用,删了就乱了

【回复】比如你盒子是700x500,那么如果你里面的东西大小超过这个盒子的大小就会把超出不显示
思维清晰李火旺:
我先插个眼,等对前端感兴趣了就过来学[doge]

我的铃铛呢:
[大哭]为什么敲了半天还检查了好几遍都一样了还是没有效果

【回复】看看置顶评论呢 用js来写
【回复】回复 @Sukoshi :没有置顶评论.....
小狮子在白兔镇写歌:
现在它已经是我大作业的一部分了[tv_doge]

野生技术协会 HTML CSS 自制 技术 编程 前端

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!