时间戳

首页 > 解决方案 > 纯CSS视差效果+溢出：隐藏替代？

html - 纯CSS视差效果+溢出：隐藏替代？

问题描述

我想使用透视和 ​​translateZ 属性创建一个 css 视差效果。但是，不可能使用该overflow:hidden属性来防止背景内容扩展到 parallax_group 容器之外。这样做时，视差效果消失。是否有另一种方法可以确保视差层的内容不会超出视差组容器的边界？

在代码片段中，您将看到两个背景层在 y 方向上重叠。有没有办法让它们在自己的容器内？或者有什么方法可以使用overflow:hidden吗？

该代码基于 Keith 的这篇很棒的教程： https ://keithclark.co.uk/articles/pure-css-parallax-websites/

body{
  margin: 0;  
  padding: 0;
  transform: translateZ(0);
}
.parallax {
      
    width: 100vw;
    height: 100vh;
    
    margin: 0;
    padding: 0;
      
    overflow-x: hidden;
    overflow-y: auto;
    
    -webkit-perspective: 300px;
    perspective: 300px; 
}

.parallax_group {
    overflow: visible;
    width: 100%;
    z-index: 1;
 
   -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d; 
}

.parallax_layer {
    display:flex;
    justify-content:center;
    align-items:center;
    width: 100%;   
}
    
.base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    width:100%;
    z-index: 4;  
  }
    
.back {
    -webkit-transform: translateZ(-300px) scale(2);
    transform: translateZ(-300px) scale(2);
    height: 100vh;
    width: 100%;
 
    z-index: 3;  
}

.content { 
    width: 90%; 
    height: 100%;  
    padding: 50px 0 50px 0;   
    text-align: center;
  }  
  
  .parallax_layer2 {
    background-color: darkblue;
    height: 200px;
  }
<body>
<div class="parallax"> 
  <div id="1" class="parallax_group"> 
    <div class="parallax_layer base">
      <div class="content">
            <mark>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia enim in tellus rhoncus, sit amet elementum libero consectetur. Donec ut dui in nunc fermentum fermentum. Vestibulum ornare tortor eu tempor tristique. Proin at scelerisque orci. Phasellus lectus ligula, feugiat ac ultricies et, vulputate at odio. Aenean porttitor tincidunt purus, eget venenatis enim laoreet et. Proin et posuere velit, vel tempus dui. Aenean faucibus, tellus non consectetur laoreet, quam sem consequat massa, ut rhoncus orci nibh vitae nunc. Vestibulum tortor tortor, vehicula a leo condimentum, accumsan congue neque. Quisque dignissim rhoncus nisi, id elementum purus tristique nec. Nullam ultricies nisi at imperdiet hendrerit. Suspendisse tempus nisi risus, sit amet tempor ipsum imperdiet porttitor. Integer vestibulum enim eget rutrum sodales. Aenean vulputate ex ac massa interdum, vel molestie sem lacinia. Etiam egestas ultrices lectus.</mark>    
      </div>
    </div> 
    <div class="parallax_layer back">     
      <img src="http://lorempixel.com/1920/1080" />
    </div>
  </div>
  <div  id="2" class="parallax_group"> 
    <div  class="parallax_layer2 base">
    </div> 
  </div>
  <div  id="3" class="parallax_group"> 
    <div class="parallax_layer base">
    <div class="content">
      <mark>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lacinia enim in tellus rhoncus, sit amet elementum libero consectetur. Donec ut dui in nunc fermentum fermentum. Vestibulum ornare tortor eu tempor tristique. Proin at scelerisque orci. Phasellus lectus ligula, feugiat ac ultricies et, vulputate at odio. Aenean porttitor tincidunt purus, eget venenatis enim laoreet et. Proin et posuere velit, vel tempus dui. Aenean faucibus, tellus non consectetur laoreet, quam sem consequat massa, ut rhoncus orci nibh vitae nunc. Vestibulum tortor tortor, vehicula a leo condimentum, accumsan congue neque. Quisque dignissim rhoncus nisi, id elementum purus tristique nec. Nullam ultricies nisi at imperdiet hendrerit. Suspendisse tempus nisi risus, sit amet tempor ipsum imperdiet porttitor. Integer vestibulum enim eget rutrum sodales. Aenean vulputate ex ac massa interdum, vel molestie sem lacinia. Etiam egestas ultrices lectus.</mark>
      </div>
    </div> 
    <div class="parallax_layer back">     
      <img src="http://lorempixel.com/1920/1081" />
    </div>
  </div>
</div>
</body>

标签： htmlcssoverflowparallax

解决方案

推荐阅读