html - 使用 CSS 滚动具有视差效果

Question

我正在尝试 achieve parallax effect with only CSS在具有无缝重复背景图案的无限滚动页面中。背景上的内容将由 AJAX 加载，因此它可以根据加载的内容量具有任意高度。作为示例:

Codepen

body, html { 
  margin: 0;
  padding:0;
  height: 100%;
}

.wrapper { 
  height: 2000px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.section {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: white;
}

.parallax{
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1');
  
   /*height: 100% <-displayed height of the background is not the expected height (full document height) due to the 3D transformations we are applying to the parallax div to achieve the parallax effect*/
  
  /*My approach was setting absurd height for the parrallax div and then think how to cut it, maybe by a wrapper div with overflow hidden...*/
  height: 999999999999999px;
    
}

.content {
  height: 100%;
  width: 400px;
  margin: auto;
  display: flex;
  justify-content: center;
  background: red;
}

/*I also tried wrapping the parallax div with other div to hide by overflow property the background that is below the content div, but parallax effect is lost, or it just behaves the same as if no wrapper were indeed 

.parallax-wrapper{
  overflow-y: hidden; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 200px;
}*/ 

<div class="wrapper">
  

 <div class="section parallax"></div>

  
  <div class="content">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum fermentum venenatis magna, eget hendrerit leo varius vel. Mauris sit amet posuere elit, porta molestie orci. Praesent in vestibulum eros, sit amet aliquam magna. Etiam sed egestas sem, sit amet gravida sapien. Nullam ipsum ligula, ullamcorper ut facilisis vitae, convallis quis ligula. Morbi eleifend tellus mauris, et fermentum nulla semper non. Sed accumsan ultricies ipsum, vestibulum varius est rhoncus quis. Suspendisse nec odio quis magna gravida interdum. Suspendisse in elit tortor. Cras ac nibh sed dolor rhoncus accumsan. Morbi iaculis id mauris quis tristique. Phasellus eleifend purus nec gravida euismod.

</h1>
  </div>
</div>

我希望背景在当前 div 内容所在的位置结束(它会通过滚动加载更多，但这不是这里的问题)，但我不知道该怎么做。问题是视差 div 的高度不会是屏幕上显示的真实高度，因为用于实现视差效果的 3D CSS 效果，因此很难以某种方式设置该高度来实现我想要的。我的方法是设置一个非常大的高度，稍后我会用包装器和 overflow-y: hidden 将其切断，但它根本不起作用。

Answer 1

用 .parallax-wrapper 包装的想法很好。我只是对它做了一些调整。

<div class="wrapper">
  <div class="parallax-wrapper">
   <div class="section parallax"></div>
    <div class="content">...</div>
  </div>
</div>

.wrapper { 
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateZ(-1px) scale(2);
  background-size: 100%;
  z-index: -1;
  background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz56_A2dNoJkPZu3nFpCRn-4NaM9oMsrl1nT0JEjWlbYtkIWg1');  
}

.content {
  background: red;
  width: 400px;
  margin: auto;
}

.parallax-wrapper{
  position: relative;
  overflow: hidden;   
}

Codepen 链接 => https://codepen.io/moorthy-g/pen/OqwYNQ