One of the simple but beautiful effects you can apply on a webpage especially landing pages is by having a fixed-position image placeholder that changes its image as user scrolls up and down the page. This can be done using just CSS as demonstrated by UI/UX designer Sebastiano Guerriero in his blog at Codyhouse.co. The single CSS rule to accomplish this is background-attachment:fixed; which prevents the image placeholders from scrolling together with the page. Finally in each placeholders you simply need to set the image relevant to the content for the particular section. Hit the buttons below to learn more or jump straight to the demo.

View More View Demo