1

I would like to create a css parallax effect using perspective and translateZ properties. However, it is impossible use the overflow:hidden property to prevent background content to extend outside of the parallax_group container. When doing so, the parallax effect disappears. Is there another way to make sure the content of a parallax layer does not extend past the boundaries of a parallax group container?

In the snippet you'll see that two background layers overlap in the y-direction. Is there any way to make them be inside their own container? Or is there any way to use overflow:hidden?

The code is based off of this awesome tutorial from 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>
the.michiel
  • 19
  • 2
  • are you sure you correctly copied the code? there is no scroll in the original one – Temani Afif Jul 28 '19 at 10:39
  • My bad, I forgot to include the parallax container... Fixed! – the.michiel Jul 28 '19 at 10:54
  • add `body {margin:0}` – Temani Afif Jul 28 '19 at 10:55
  • Already the case, but does not fix the issue... It's about the vertical overflow of background layers. – the.michiel Jul 28 '19 at 11:10
  • so add it to the code here and try to make it clear in your example what content is overflowing – Temani Afif Jul 28 '19 at 11:13
  • Oké sorry for the confusion, I am new to overflow... Now the code snippet provides a more elaborate example of the code used. As you can see two background layers are added, separated by a small dark blue block. However, because the background layers are much bigger (needed for the parallax effect) they start to overlap. I would like the background layers to not overlap, similar to how it normally works with the overflow:hidden parameter. When using overflow:hidden parameter on the parallax-group class, the website becomes flat and the parallax effect is lost. Thanks! – the.michiel Jul 28 '19 at 11:18
  • Any suggestions? – the.michiel Jul 28 '19 at 17:35

0 Answers0