[Css]这该死的高级感 炫到爆的视差滚动

顾小胖cc:
background-attachment 这个属性他也可以实现 该效果 background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。 background-attachment: local local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。 background-attachment: fixed fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

【回复】回复 @白发_徐凤年 :对我当时看到一个效果就去扒了一下，[doge]不过他这个方法也挺好的
【回复】对的，我当时学的时候就是用的fixed做的视觉差案例[脱单doge]
【回复】兄弟，我有点没想明白如何用这个实现多个视觉差，第一个图片不会一直在那挡住其他图片吗
Maxwell_柠:
点赞（1/1） 评论（1/1） 收藏（1/1） 投币（1/1） up点赞（0/1） [妙啊]

Vergissmeinnicht:
去浏览器找素材，没回来就是误入歧途了

【回复】回复 @Vergissmeinnicht : 开庭的时候带上你的歧途[生气]
舞ち降り:
好棒，上一个已经用上了[热词系列_吹爆]

三千弱水瓢都不取:
山羊大大，讲真效果做得很好，但我按照你的教程来却完全做不出来[捂脸][捂脸][捂脸]这个视差滚动加载出来后是一片空白[无语][无语][无语]

【回复】跟着敲敲错了，你把我代码下过去对比一下不就知道了吗
【回复】回复 @山羊の前端小窝 :编码格式是什么呀，不对欸
顾小胖cc:
关键 属性 perspective 让父元素获得三维的观察视角 ，translateZ 调节 z轴距离 scale 方大让元素的大小看起来和原来无异

酷炫de马铃薯:
up这个是什么原理啊，研究好久了看不懂[笑哭]

喵不嗷:
课代表：三维坐标系中z轴减1，scale缩放为1.6

景姑娘的肥猫:
实验了半天，懂了。哈哈，还没有老。 景深，从内到外的3d深度。定义深度刻度为3px 背景内嵌1px，记为translateZ(-1px)，但图片会被缩小，所以进行放大。 heading，外凸1px，记为translateZ(1px)，同时向上位移30px。 基准面滚动，内嵌页面视觉滚动会小于基准面，外凸页面视觉滚动大于基准面，就产生视觉差异。 优点，简单粗暴。 缺点：背景图大小如果有要求，那么背景图大小是问题。会有部分被裁剪掉。

【回复】我就说嘛。 看了半天，我看全都是固定的宽高，怎么会有不同的滚动速度。原来是这样。 我总结一下：1、用了类似于画画里面的透视，将文字和图片的位置放到了透视的不同距离上，一个离摄像机近，另一个远。2、滚动的时候，远一点的跑得快，近一点的跑得慢，就形成了视差。 666
【回复】回复 @学习使我变土 : 就比如3个屏幕，设定中间屏幕到你眼睛的距离是标准距离。另外两个屏幕一个近一点，一个远一点。然后中间的屏幕滚动，从视觉来讲。近的会滚动的更快。远的滚动的越慢。就形成了视差。
【回复】能再说说第五句话吗，有点没理解[脱单doge][脱单doge]
鈭誮:
大佬的高级css吊打我的垃圾js[洛天依_打call]

好奇HUI:
建议讲一下关键属性，理解原理很重要

青菜白玉汤Code:
大佬，我什么时候才能像您这么厉害[害羞][害羞]