CSS 实现视差滚动效果

/* 设置背景图片，并使其覆盖整个视口 */
body, html {
  height: 100%;
  margin: 0;
  background-image: url('your-image.jpg');
  background-size: cover;
}
 
/* 设置视差滚动的元素样式 */
.parallax {
  /* 设置元素的大小和位置 */
  height: 100vh; /* 视口的100%高度 */
  width: 100%;
  overflow: hidden;
  position: relative;
  background-attachment: fixed; /* 背景图片固定，实现视差效果 */
}
 
/* 设置视差滚动的背景层，并使其以不同的速度移动 */
.parallax::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* 缩放和z索引，实现视差效果 */
}
 
/* 设置视差滚动的内容样式 */
.parallax-content {
  position: absolute;
  z-index: 10; /* 确保内容在最上层显示 */
  color: white;
  text-align: center;
  line-height: 100vh; /* 使内容垂直居中 */
  width: 100%;
}

这段代码定义了一个.parallax类，它可以被用来创建视差滚动的效果。通过设置background-attachment: fixed;属性，背景图片将会在页面滚动时保持固定，从而产生视差滚动的动感效果。通过调节.parallax::before伪元素的transform属性，可以实现不同的视差效果和视觉层次感。