CODEWITHSUNDEEP
htmlcssparallaxinfinite-scroll
Fernando Jesus Garcia Hipola
Fernando Jesus Garcia Hipola

Reputation: 495

Scrolling with Parallax effect with CSS

I am trying to achieve parallax effect with only CSS in an infinite scrolling page which whould have a seamless repeated background pattern. The content over the background would be loaded by AJAX, so it would have an arbitrary height depending on how much content is loaded. As a sample:

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>

I want that the background ends just where the current div content does (it would be loaded more by scrolling but that's not the issue here), and I don't know how to do it. The problem is that the height of the parallax div won't be the real height displayed in the screen because of the 3D CSS effects used to achieve the parallax effect, so it makes hard to setting that height somehow to achieve what I want. My approach was setting a very big height which I would later cut off with a wrapper and overflow-y: hidden, but it didn't work at all.

Upvotes: 0

Views: 1185

Answers (1)

Moorthy G
Moorthy G

Reputation: 1541

The Idea of wrapping with .parallax-wrapper is good. I just made few tweaks to it.

<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

Upvotes: 1

Related Questions