Thanks to www.elementorcodes.com

Create a Parallax Section for Any Element

No extra plug-ins required! No JS libraries either.

Download .json file
  1. Download and unzip the file
  2. Import to Elementor template

Example parallax section with useful screenshots!

sectionzindex.png
whitebgsection.png
Previous
Next

One exception is the section containing the element or elements you want to have the parallax effect. Create that section and give it the CSS class ‘parallaxsection’. Also give it a z-index of 4.

parallaxsection.png

The other exception is the section where you will want the parallax section to show up. Just put a spacer in there corresponding to the desired height. Give both of these sections the same background.

And finally, the required CSS to make the parallax section sticky, so that it is always behind everything until you get to the blank section.

  .parallaxsection{
position: fixed;
top:100px;
left:0;
width: 100%;
height: 100%;
}


/*to make it better on mobile devices*/
@media (max-width: 767px) {
.parallaxsection{
top:0;
}
}

Play with the top value to get exactly what you want!