On a late September day
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus.
CSS Parallax
A different way of building a parallax page. This one also works on mobile devices, but of course not in IE11. The parallax has been built without any js or fixed positioning.
To change the images, they have to be added as background images to the ID of each .section-image. As always in parallax, the images need to have more height than what is being displayed. The reason is, that the parallax needs 'something to play with' when the page is being scrolled.
The containers .section-text have a min-height of 50vh, but they can be filled with more content than that.
The holding container, .outside-container has to have its css added in the head box in the Element pane. If added directly in the Styles pane, the parallax effect will fail.
Download this component