使用 CSS 使用视差效果滚动

Posted 2023-03-05

【中文标题】使用 CSS 使用视差效果滚动

【英文标题】：Scrolling with Parallax effect with CSS

【发布时间】：2019-08-10 00:44:44

【问题描述】：

我正在尝试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 将其切断，但它根本不起作用。

【参考方案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