How to get current visible slide in vertical scrolling site using jQuery

Question

This question may sound silly but it's breaking my head. I'd like to make a sort of vertical srolling presentation, made up of different slides; the effect should be "similar" to this site: http://www.soleilnoir.net/believein/#/start

I've created an unorderd list containing the different slide:

<div id="main">
  <div id="content">
    <ul id="bg">
      <li id="slide1"> <!-- content --></li>
      <li id="slide2"> <!-- content --></li>
    <!-- and so on -->
    </ul>
  </div>
</div>

I've given a position:fixed on the center of the page to all the slides' content (so far are images), and a different z-index to make slides and images stacked. SOmething like

-----  slide 1
  §§§ image 2
-----  slide 2
  §§§ image 3
----   slide 3

and so on

This of course works only in a sense: the slide, when scrolling, uncovers the following slide, but the previous images are always visible being all removed from the flow due to their fixed positioning.

So I thought at giving the images a position:absolute (and give position:relative to the <li>) but that doesn't make them "sticky" in the center of the page until the new slides arrives and covers it, they of course naturally follow their parent <li> in their movement.

I'm completely at loss on this, and also on how to get the current visibile list in the window. I've looked at all the built in functions provided by jQuery: scrollTop(), offset().top, position().top, I got $(window).height(), the $('#container').height(), <li>s height is fixed, etc but all I get are "absolute" positions of the elements (I mean, it doesn't change with scroll), I cannot figure out how to say when a slide is halfway across the screen so that I can do something (still don't know what, though).

I'm sure I'm missing something obvious here. I've studied the code from the linked site, and while I can understand almost everything of it I still can't figure out how it gets the current slide (besides, it works differently from mine, as it loads the animated gifs dinamically and only does that for each slide. In mine each slide is a container with different elements, animation, and so on).

How do I get if, for example, $('li#slide3') is inside view? How can I solve the stacked images problem? Do I need to set them as "fixed" dynamically, or recalculate at every scroll their position so that a position:absolute would do? For this second, I would still need to get the position of each element compared to a fixed point (I believe $(window).scrollTop(), which so far gives me always 0 while scrolling), but I can't figure out how.

Oh, I'm using the jQuery scroll() method to bind the scrolling, as I also have a navigation list which let you jump to the desired slide, and it accounts for this too.

I hope I made myself clear on this: images must always stay at the center, while scrolling the slides need to cover them up and while the image is being covered the following needs to appear and take its place, so I need to understand how to get the position of the current <li> element, say when it's half-way across the window, and set the previous image accordingly.

Answer 1

That type of website is using Parallax Effects to move the background images.

Consider using a jQuery Parallax plugin, such as jparallax that can make things a lot easier for.

But for a whole webpage, you might want to turn to jQuery Parallax Plugin that has a demo page based on the example you provided. That demo page is also a tutorial too!

There's also a lot of websites that can give you further ideas and by looking inside the webpage, you can find out what type of parallax plugin they are using.

Edit: An excellent tool to use is built right into Firefox browser so you can see any webpage in a layered 3D structure. That will help in getting a handle on how that website is interacting with layered background. More about Firefox 3D View HERE.

Edit 2: This might be useful: How to tell if a DOM element is visible in the current viewport?

Also, for the website example you provided, the method they are using to center the image in the viewport once it's scrolled into view can be seen in their style.css file. Of course they have jQuery modifying these elements, but the style does make sense:

#main ul.bg li img.gif { position: absolute; z-index: 1; width: 996px; height: 800px; left: 50%; right: 50%; top: 50%; bottom: 50%; margin: -400px -498px; }

---

Edit 3: Here is a jQuery Parallax Plugin that does the same thing as your linked example, and has a very power API at that. This particular plugin has per layer positioning with custom offsets.

This is a website using that plugin in which things line up in the center of the screen.
This other website shows this plugin has no issues when selecting any layer to interact with.

That plugin is named Stellar.js and the gitHub page is HERE. If you visit there home page, it scrolls horizontally... notice the word EASY in stars which is a parallax effect that lines up to the browsers viewport edge. As you scroll, other stars will auto-scroll when in the general area to show other keywords.

Answer 2

I look at HTML evolution, div#container have a big height (number of li * li height), li have display:none/block, overflow:hidden and height between 0 and window height.