So here is the problem I have been struggling with for a week or so now and it really bugs me.
Lets say you have a container div with two nested divs absolutely positioned on top of each other. One of the divs is 100% height and width of the viewport and has a background image covering it. The other div has text content which for arguments sake is 200% height of the viewport.
How can I make it appear as if the background image has ‘paused’ while the text content scrolls on top of it until the end of that section?
Skrollr seems way to complex for me – I thought there might be a way to do it with pure css
Some pens of what I have been working on:
http://codepen.io/simonfricker/pen/wMxKQY
