纯CSS视差滚动

ゝ一世哀愁。 2022-09-23 13:51 277阅读 0赞

参考旭哥的：[http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/][http_www.zhangxinxu.com_wordpress_2015_03_css-only-parallax-effect]  
Demo点这里 [http://codepen.io/GitKou/pen/YWZvPK?editors=1100][http_codepen.io_GitKou_pen_YWZvPK_editors_1100]

* { margin: 0; padding: 0; }
    
     .box { height: 400px; position: relative; perspective: 1px; transform-style: preserve-3d; overflow: auto; overflow-x: hidden; }
    
     .curtain { transform: translate3d(0, 0, -1px) scale(2); vertical-align: middle; }
    
     .comehere { background: url("https://img-blog.csdn.net/20160714114130582") center center/contain; height: 150px; width: 150px; position: absolute; left: 50%; top: 50%; }

1.原理就是：  
利用perspective、translateZ，使得图像在视觉上缩放，然后通过scale将图片缩放至原来的大小，但是对于滚动条来说仍然是相对于scale之后的大小的滚动，和z轴上视觉的大小没有关系。

2.但是这个方法有个问题，必须要让紧贴的外层有滚动条，html或body的滚动条是没有用。那么如何计算box的最大高度呢？ 这里要注意transfrom-origin的问题，不要看translateZ之后的位置，要看只scale之后的位置，小心图片溢出被裁哦~

3.如何计算scale的具体值呢，要让图片回到原来的大小。  
借用下别人的图：[http://www.w3ctech.com/topic/833][http_www.w3ctech.com_topic_833]

![这里写图片描述][3d-coor-1.png]

简单的数学，不难计算出 scale的值应该为**1 + (translateZ \* -1) /perspective**

[http_www.zhangxinxu.com_wordpress_2015_03_css-only-parallax-effect]: http://www.zhangxinxu.com/wordpress/2015/03/css-only-parallax-effect/
[http_codepen.io_GitKou_pen_YWZvPK_editors_1100]: http://codepen.io/GitKou/pen/YWZvPK?editors=1100
[http_www.w3ctech.com_topic_833]: http://www.w3ctech.com/topic/833
[3d-coor-1.png]: http://blog-nokey.qiniudn.com/3d-coor-1.png