Question

I already have a jQuery script I found which changes opacity of my first div from 1 to 0 when I scroll down (or when the div reaches the top).

But now I’d like to have the next divs doing the same when they reach the top of the pages to, not all at the same time.

Here are some parts of the code:

That’s the HTML part:

<div id="wrap">

  <section id="logo">
    <img src="images/layout/logo.png"> 
  </section> <!-- logo -->

  <section id="intro">  
    <img src="images/layout/welcome.png">

    <p><h2>Text text text text here here here here</h2></p>
  </section> <!-- intro -->

</div>

Then my jQuery script, currently only working for the logo section.

var divs = $('#logo');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/100) });
});

To be perfectly clear of what’s going on, I leave you the link to my current page:

http://www.hyker.be/opacity

I simply would like that the “come closer” div do the same that the “logo” one, etc.

Answer 1

I would add them all at the beginning and only fade them if they are in range.

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

UPDATE

This seems to work better. Fades based on the center of the object instead of the top.

var divs = $('#logo, #intro');
var range = 100;
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.each(function() {
      var offset = $(this).offset().top;
      var height = $(this).outerHeight();
      offset = offset + height/2;
      $(this).css({ 'opacity' : (1 - ((st - offset + range) / range)) });
   });
});

Resources

• http://api.jquery.com/offset/