基于CSS3-perspective的视差滚动

2023-04-18 12:36:02html-css016

基于CSS3-perspective的视差滚动,第1张

前情提要:本篇文章已经默认你已经彻底了解perspective和translateZ的含义与用法，如果尚未了解，我推荐你看 css3系列之详解perspective

是不是比起普通网站多了一层酷炫？想知道如何实现吗？接下来我们进入part2。

步骤:

1.建立一个容器元素，设置 overflow-y: scroll 使其可以滚动（同时可能需要 overflow-x: hidden）。

2.对于上面的元素, 我们会应用一个 perspective 值，然后设置 perspective-origin 到 top left, 或者 0 0。

3.对上面元素的子元素应用一个在 Z 轴的变换，然后把它们还原回来以实现视差效果，而没有影响它们在屏幕上的大小。

这种方案下的css和html:

是不是很简单？

现在的你已经写出基本的视差滚动动画了!但是perspective和translateZ是怎么影响滚动速度的？还有scale，为什么这里设置的是3？想知道吗？那么接下来进入part3

这里把scale设为S，pespcetive->P,translateZ->D // 注意D一般是负值

那么有公式 S=(P-D)/P ,

这个公式怎么来的?这其实就是一个简单的相似三角形

划红线的地方的比例就是1:3,那么你只需要在原来的基础上放大3就可以让图形变回原来的比例,这里的1就是P，2就是D，那么很容易发现图形的缩小比例是P/(P-D)，想放大回来？倒置这个缩小比例即可，我们便得到了S=(P-D)/P

现在我们已经靠scale属性让图形变回了原来的大小,似乎一切都恢复了原状，但有一个东西，它变了，便是滚动速度,滚动速度和上面的缩小比例是完全一致的，以如下数据为例

不看scale，这里的缩小比例是1/3,那么由于css机制，它的滚动速度也会变成原来的1/3。即使添加了scale属性，它的滚动速度依然不变还是原来的1/3。

现在让我们来总结性质:

父元素设置perspective,子元素设置 translateZ(-2px),那么无论是否有scale属性,

则有

PS：如果不设置 translateZ,或者 translateZ(0)，那么对应D=0，所以有缩小比例=滚动速度比=(P/P-0)=1:1,即相对于原来的滚动速率不变。

为了方便读者尝试，我码了一个小小的demo，你可以任意更改属性来验证上面的结论！

参考文献

Performant Parallaxing : https://developers.google.com/web/updates/2016/12/performant-parallaxing

[杨耿]css3系列之详解perspective:

https://www.cnblogs.com/yanggeng/p/11285856.html

perspective与最终呈现在浏览器上的大小，关系运算；

这个公式我在网上没找到，用几组数据得出来的结果，也测试了几组数据好像也没什么问题，可以用一下；设置了perspective就等于启动了物体的Z轴，Z轴默认为0px

W=物体宽度；

z=translateZ；

p=perspective；

d=最终浏览器渲染的大小；

(w*z) / (p-z) + w=d；

也可以根据一个目标大小推出自己想要的perspective或者translateZ；

(w*z) /( d-w)+z=p

p-(w*z) /( d-w)=z

先了解几点

1.--3D物体的轴，做一个平时看手机的姿势

1.1--你把手机左右移动（头不要动）这就是物体的X轴运动；

1.2--你把手机上下移动（头不要动）这就是物体的Y轴运动；

1.3--你把手机前后移动（头不要动）这就是物体的Z轴运动；（前后移动就是把手机放远点和拉近点，胳膊伸直和弯曲的动作）

2.--perspective定义观察点到被观察物体Z轴的距离（眼睛到手机的前屏与手机背面的中心点距离）；

3.--分清perspective和物体Z轴运动

3.1--如果你的手机不动，头前后移动就是perspective在改变；

3.2--如果你的头不动，手机前后移动就是Z轴在改变；

4.--如何设置perspective，

perspective设置会改变物体最终呈现在浏览器上的大小和形状；perspective的数值要比translateZ大，否则就看不到物体了，因为他跑到你的眼睛后面去了。

一般弄懂了perspective和translateZ之间的关系后，其他的变形心里就有底了，

比如物体rotateY的时候，我们看到的样子变成另一个样子的过程，脑子就有概念了

5.--例子

</div>

.a{

width:100px

height:200px

margin:300px auto

perspective:60px

}

.b{

width:100%

height:100%

background:#ccc

transform: translateZ(30px)

}

套用上面公式(w*z) / (p-z) + w=d；

(100*30)/(60-30)+100=200

(200*30)/(60-30)+200=400

虽然你设置的宽高为100px*200px，但是你最终看见的大小为200px*400px

最后可以百度jQuery之家，进入网站搜索perspective，查看2015年-2-2号写的系列文章（CSS 3D transforms系列教程-perspective）

问题一：如何制作微信公众号文章？如何做像下面这种的文章？必须要注册微信公众号吗？求大神详细解答首先你得注册一个公众号；

还有微信的服务号和订阅号功能都不一样的；注册的时候腾讯会给你提示的，按照操作做出来就OK了很简单只是加其他要自己开发的，就需要懂IT的就能开发其他功能了。

问题二：如何把微信公众帐号里的文章快速制作成电子书如果你有txt或者word文档，超级方便啊。

上“应用之星”网站。

点击“电子书”制作，上传文档，填写电子书的简单信息，很快就做好了。

然后你还可以把电子书APP分享到微博、微信等社交平台。

问题三：微信公众平台可以活动的文章怎么做？这个需要通过dw采用html5+css3实现这个制作，然后生成一个网址即可，或者用第三方微网站平台进行设置，但是没有自定义的效果好

问题四：微信公众号所发的文章排版如何做的? 直接把这个图文发到电脑上，然后复制整篇图文，粘贴，把这个留下就行了

望采纳。。。

问题五：微信公众平台做好文章后怎么发布最底部有保存，可以预览----发送到自己的微信号，先看一下效果，好的话，直接用手机微信发到朋友圈就可以了。

也可以用群发，一般每个公众号每天能群发一条消息。

希望对你有帮助！

问题六：微信公众号文章，那些好看的边框是怎么做的？？你好，你可以用第三方编辑平台可以编辑很好看的图文带边框。比如秀米可以编辑漂亮边框。可以来九零微商团队学习。

问题七：如何做出一个漂亮的微信公众号微信公众号，首先，要对公众号进行定位，做这个公众号的用处，目的。然后确定针对的人群用户，这样才可以确定相对应的信息内容。要不然今天想发励志的，明天又想发生活常识，后天又想弄自己的生活日记，这样公众号没有确定的定位，所做的都是无用功。

看到你提问的，是想知道微信文章排版的方面，这个很简单，一篇文章，中间适当的地方插一些图片，让读者看起来不会太枯燥；接着就是段落分明，可以用颜色来区分。现在网上有很多微信文章在线编辑器，可以在里面找到很多漂亮的格式。

可以参考binbinseo/286

问题八：生产制造业的公众号如何写文章 1：了解读者喜好

全面了解自己公众号粉丝用户属性，搞清楚粉丝为什么关注我们的微信公众号，我们要给粉丝带来哪些有价值的信息，再去寻找用户感兴趣的话题，对症下药，争取提供阅读性强的有营养的内容，让粉丝保持一颗热情的心，从而更有兴趣持续关注或者迫不及待想要看你的下一篇文章。

2：确立标题

已经知道用户需要看什么或者想看哪些内容，就可以确立文章的主题，定位文章中心。每个人都痛恨标题党，是因为读者已经通过你的文章标题看完你的文章，发现没有收获到任何文章标题相关的内容，或者没有看到任何有价值的信息。聪明的人一般是根据拟定好的标题，去展开详细的描述，让标题吸引读者，让有营养的内容留在读者的心。好标题是成功吸引读者关注的法宝。

3：列举提纲

经常有人说，自己会说不会写，文字组织能力太差，那么列提纲就变的非常重要。自己刚开始写文章避免长篇大论，能把观点表达清楚就行。试着把文章分成简单的3段式结构，也就是说把一篇文章分成3小段：主题开头、观点阐述、文章总结。

这样的话，你就会发现写好一小篇文章突然变的如此简单。只需要安装拟定好的提纲，进行内容填充就可以。

当然，日积月累，随着你的文笔不断提高，你的文章也就会更加充实有营养，也会逐渐形成自己的文字和段落格式。

4：阐述观点

作为文章创作者，对于每一篇文章我们都要发布自己的观点，或者代表某一群体发表不同的看法，立意要鲜明，观点要清楚，才会有更多的人会欣赏你的文章。不能用记日记的形式来写文章，只会浪费读者粉丝，结果对你的公众号大失所望。

5：文章举例

当你的观点或者文字不是特别的具有说服力，那么就需要用强有力的实际案例来证明自己的观点，用图文结合描述甚至富媒体视频让读者更容易接受认可你的观点。

你的观点在某种程度也代表着你的公众号的价值导向，正确传递价值，让读者收获价值，也是让粉丝更依赖你的平台。

6：文章总结

每篇文章尽量不要草草了事，归纳中心思想，文章结尾对应文章开头，前后呼应，认真做好文章总结也是每篇文章必不可少的，只有做到这一步才能完整的写好一篇文章。

用心对待文章和读者也是对粉丝的一种尊重。