在网页设计中，视差滚动效果可以为用户带来沉浸式的浏览体验。本文将详细介绍如何使用 CSS 来实现视差滚动效果。
视差滚动效果的原理
视差滚动效果的原理是利用不同速度的滚动来创建深度感。在网页设计中，我们可以通过控制背景图层和内容元素的滚动速度来实现这一效果。通常情况下，背景图层会以较慢的速度滚动，而内容元素会以较快的速度滚动，从而营造出立体感和动态感。
实现方式
使用css形式实现视觉差滚动效果的方式有：
- background-attachment
- transform:translate3D
background-attachment
作用是设置背景图像是否固定或者随着页面的其余部分滚动。
值分别有如下：
- scroll：默认值，背景图像会随着页面其余部分的滚动而移动
- fixed：当页面的其余部分滚动时，背景图像不会移动
- inherit：继承父元素background-attachment属性的值
完成滚动视觉差就需要将background-attachment属性设置为fixed，让背景相对于视口固定。及时一个元素有滚动机制，背景也不会随着元素的内容而滚动
也就是说，背景一开始就已经被固定在初始的位置
例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Scrolling with CSS</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; height: 2000px; /* 为了演示效果，增加页面高度 */ }
.background { background-image: url('background.jpg'); background-size: cover; background-attachment: fixed; height: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: -1; }
.content { position: relative; top: 400px; /* 调整内容元素的位置 */ padding: 20px; text-align: center; color: #fff; } </style> </head> <body> <div class="background"></div> <div class="content"> <h1>Welcome to our website</h1> <p>Scroll down to explore</p> </div> </body> </html> |
transform:translate3D
视差滚动（Parallax Scrolling）效果可以通过 transform: translate3d() 结合滚动事件来实现。通过改变元素的位移，我们可以让背景图层和内容元素在滚动过程中以不同的速度移动，从而营造出视差效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Scrolling with translate3d</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; height: 2000px; /* 为了演示效果，增加页面高度 */ }
.background { background-image: url('background.jpg'); background-size: cover; height: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: -1; /* 设置初始位移 */ transform: translate3d(0, 0, 0); }
.content { position: relative; padding: 20px; text-align: center; color: #fff; /* 设置初始位移 */ transform: translate3d(0, 0, 0); } </style> </head> <body> <div class="background"></div> <div class="content"> <h1>Welcome to our website</h1> <p>Scroll down to explore</p> </div> <script> window.addEventListener('scroll', function() { var scrollPosition = window.pageYOffset; var parallaxSpeed = 0.5; // 调整视差滚动速度
// 根据滚动位置和速度计算位移值 var backgroundTransform = 'translate3d(0, ' + (scrollPosition * parallaxSpeed) + 'px, 0)'; var contentTransform = 'translate3d(0, ' + (scrollPosition * parallaxSpeed * 0.5) + 'px, 0)';
// 应用位移值 document.querySelector('.background').style.transform = backgroundTransform; document.querySelector('.content').style.transform = contentTransform; }); </script> </body> </html> |
在这个示例中，通过监听滚动事件，根据滚动位置和设定的滚动速度，计算出背景图层和内容元素应该移动的位移值，然后通过 transform: translate3d() 属性将位移值应用到相应的元素上，从而实现了视差滚动效果。
