• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 301
  • Last Modified:

scrolling background images

If you go to the following link here


keep scrolling down you will see multiple background images for each article how do they do that effect
1 Solution
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Each div of content contains a <figure> tag with the image.  http://www.w3schools.com/tags/tag_figure.asp
stargateatlantisAuthor Commented:
is that how you get that static scrolling effect
Tom BeckCommented:
Seems like you could just use a background div with position:static, load text into other divs stacked vertically on the page with more divs in between that have background:transparent. The transparent divs would act like windows through the text content to reveal the static background images. Then with javascript/jquery monitor scroll position and swap out the source of the background image on the static div so a new picture appears through the windows when scrolling past a predetermined points in the height of the page.

Shame it does not work on that site in Chrome v27. At least not on a Mac. The images are just fixed. Works in Firefox though. Nice effect!
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
It works on my mac chrome Version 27.0.1453.116 as well as firefox.
Tom BeckCommented:
I have the same version of Chrome. The images are fixed on the page. I looked through the plugins and none are disabled. Weird.
They are using background-attachment fixed, with a bottom padding
This is what is giving the effect.

A stripped down version.
If you remove the bottom padding or the fixed class the effect is gone
It is, as Tommy has said, a very nice unobtrusive effect, never seem it anywhere else
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now