CSS jump scroll to location

Question

I am looking at the site http://charactersf.com/ and trying to figure out how the background image / content change between the first four "layers". When you scroll the mouse at all it jumps all the way down to align the image. I really would like some more reading on this topic and hopefully to find out what its called at least so I can look myself, thank you !

Answer 1

This would be done in Javascript, not in CSS.

See this topic on how to execute code in the mouse wheel scroll event and block page scrolling. Javascript: Capture mouse wheel event and do not scroll the page?

Then my guess with the background is that what you see is a javascript image slider plugin. So when you're in the mousewheel event, you would call the function on the slider to go to the next image. The slide down effect is the slide effect that you set on the plugin. Depending on the plugin you choose, you can set those options. Unfortunatly I don't have the anwser on how they make the slider disappear and the other content appear in a smooth way after the last image, but they get rid of the slider somehow and bring it back if you scroll UP when the scrollbar position is at 0.

Hope that helps!

Answer 2

What browser are you using? Chrome and Firefox both allow f12 debug mode. Watch closely and you will see that they are binding mouse scrolling to changing the class of li elements. When a slide should show, it's class changes to slide active. When it has already scrolled through the slide, it changes the class to slide old. And if it's a slide to be shown still, its class is by default slide.

Answer 3

This isn't a jquery plugin.

It's seem to be all custom, there's no reference to any jquery library in the header, except a main.js file. Just a combination of scrolling event detection, jquery/css manipulation. At first the body tag is overflow:hidden and when each slide have been shown, a OnComplete function removes the overflow:hidden from the body tag and change the top position of the slides DIV to push it upward. CSS3 is used for easing the transition.