CSS Trick: background property = scrolling div “windows”
Today CSS blew my mind.
I frequent the gaming website Polygon and recently they had a post for their Top 10 games of 2013. The list of games has a scrolling effect where each item in the list is a div with a background image, but the div scans across the image, which remains stationary, as if it’s a window to the content below. Now what shocked me is when I opened Developer Tools to see how they did it, I found the effect is achieved solely through CSS! Here’s a visual example I made of what I’m talking about:
They used the CSS background property like so:
background: url(img/1.jpg)center no-repeat;
The background property sets the image on the div in addition to centering it and stopping it from repeating, background-attachment makes the image fixed position, and background-size fits the image to the screen. All this adds up to this “div window” effect that looks really cool without a lot of work.
To see my example in action, check out this link.