使用 CSS 的视差效果滚动

Question

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

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 link => https://codepen.io/moorthy-g/pen/OqwYNQ

使用 CSS 的视差效果滚动

Scrolling with Parallax effect with CSS

html

css

infinite-scroll

parallax