Trigger something when it becomes visible, after scrolling to it

Question

I've seen this effect somewhere, but I can't remember what it was called. I think it was a jQuery plugin, can't be sure.

Basically when scrolling down a page each time you reach a new article it becomes active and you can apply all kinds of nifty effects, and when it scrolls out it becomes inactive.

Hopefully this can explain what I'm looking for:

#<article>              #
#<h2> Entry 1</h2>      #
#<p> lorem ipsum</p>    # // this area is out of the screen
#</article>             #
#<article class=active> #
#<h2> Entry 2</h2>      #
------------------------- // from here one this area is visible
|<p> lorem ipsum</p>    |
|</article>             | // scroll past here the previous article loses .active 
|<article>              | // and this article becomes .active
|<h2> Entry 3</h2>      |
|<p> lorem ipsum</p>    |
|</article>             |
|<article>              |
|<h2> Entry 4</h2>      |
|<p> lorem ipsum</p>    |
|</article>             |

EDIT Basically my goal is that the list of articles are really small (images and font-size), but the top most article animates to full size when becoming visible and shrinks again when another one becomes active.

Answer 1

I've seen this used for images mostly: http://www.appelsiini.net/projects/lazyload

What you're looking for is manipulating the viewport (the portion of the webpage the user can see). Although the plugin I linked to is for images, you can use http://www.appelsiini.net/projects/viewport to make a system that works for you.

Answer 2

This plugin seems to do what you want. Might not be what you're describing exactly, but the principle seems the same.

Answer 3

Take a look at this Load Content While Scrolling With jQuery. It auto-loads new content while scrolling. Mootools also provides lazy load which loads on scroll.