CSS实现视差滚动 Parallax Scrolling
前言
在博客首页的头部背景图本来是用 JavaScript
实现的视差滚动,但是觉得性能不是很好。于是尝试用 CSS
来实现视差滚动的效果。
原理
用 CSS
实现视差滚动的原理就是利用 3d
空间的 z
轴距离产生的近大远小,让元素之间的滚动距离产生差距。perspective
的属性值确定观察的 z
轴坐标,比如我们设 perspective: 1px
,最后所有的透视效果都是以和 z = 1px
的位置观察的效果是相同的。z
轴的原点就是我们的屏幕,所有的最后显示效果,都是投影在屏幕上的效果。如果以人眼作为比喻的话,perspective
就是我们的眼睛位置,而屏幕就是视网膜的位置。
如果我们以 z = -1px
为观察点,在z z = 0
和 z= -1px
的位置放两个相同长度的元素,那么实际的成像效果就后面的元素只有前面的元素的长度的一半。如果我们想要让位于 z = -1px
位置的元素看上去和 z = 0
的元素一样大,那么我们就需要将它的边长放大到两倍,可以用 scale(2)
实现。放大后,从我们的 perspective
位置看上去就和 z = 0
的元素是一样的,但是如果我们对屏幕进行滚动,可以理解为我们将我们的观察点沿着 y
轴上下移动,这个位移对于 z = 0
和 z = -1px
的元素是相同的,但是由于 z = -1px
的元素的边长是 z = 0
位置元素的两倍,所以视觉上,我们觉得 z = -1px
的元素的位移好像更短,这就是视差效果。
详细的研究和推理过程可以参考 Tour of a Performant and Responsive CSS Only Site
实现
有了原理之后,实现就简单了。我们将要进行视差移动的元素放到 -1px
的位置,同时放大两倍,将 perspective
设置到 1px
即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>parallax</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.container {
position: relative;
height: 100%;
overflow: auto;
perspective: 1px;
perspective-origin: 0 0;
}
.bg {
/* position: absolute; */
width: 100%;
height: 600px;
background-image: url('bg.jpg');
background-size: cover;
transform-origin: 0 0;
transform: translateZ(-1px) scale(2);
}
.content {
height: 3000px;
background: pink;
margin: -60px 15px 0;
position: relative;
}
</style>
</head>
<body>
<div class="container">
<div class="bg"></div>
<div class="content"></div>
</div>
</body>
</html>
Demo
效果可以查看:视差滚动效果demo
总结
这种 CSS
实现的视差滚动效果在手机上没法达到效果,手机上可以实现透视的效果,但是滚动的效果出不来。最终我也没有应用到博客上。几种视差滚动的实现方式,包括 js
,background-attachment
和 透视,都没有一个十分满意的方法,因为性能都不是非常好,而且改动也非常多,最后我干脆就把把这个效果拿掉了,
1 个评论
鸡你太美 · 2022年10月11日 - 下午9:41
手机端可以显示啊
