3

Possible Duplicate:
How to load the web page content based on user scrolling

I'm making a single page website and I'm hoping to achieve the effect that you can see on http://www.talentgarden.it/it/#!/home where the content loads as you scroll down. Can anyone tell me how to do this, and how to achieve some of the different fade-in effects that are used on that site.

Community
  • 1
  • 1
  • 1
    [Infinite Scroll](http://www.infinite-scroll.com/) is a popular plugin for loading content on demand during scrolling. – Jared Farrish Feb 12 '12 at 10:01
  • Although I suspect they are actually loading the entire page in HTML and then detecting where the user is as they scroll to determine which content to "reveal" next. Which is different from infinite scroll, I believe, but maybe not. – Jared Farrish Feb 12 '12 at 10:05
  • 1
    An example of a site which literally loads (via Ajax) new content on scroll: http://www.dazeddigital.com/ I don't think Talent Garden is doing that, though. – Jared Farrish Feb 12 '12 at 10:06

3 Answers3

2

i use Lazyload plugin for it.See for more details.
http://www.appelsiini.net/projects/lazyload

4b0
  • 21,981
  • 30
  • 95
  • 142
1

In your example there the page doesn't actually load when the user scrolls. The content is actually hidden, and then is shown when the user scrolls.

Anyway, it is all about reading the difference in height of the content, and the browser window itself. For the scrolling mechanism of for example Twitter – Google "Twitter Infinite Scroll".

For an example like the one you show there – check out this JS Bin demo (click render and then check the top right corner, you get the idea). Also, I believe the plugin used for that specific site is "Lazyload" plugin for jQuery. Quite easy to work with I believe; http://www.appelsiini.net/projects/lazyload It delays the rendering of images, witch makes the initial load time a bit faster.

Marcus Olsson
  • 2,485
  • 19
  • 35
1

While lazy load may help. I suspect the site you linked to is actually using something closer to Scrollorama

Scrollorama is designed to alter (including show/hide) content as you scroll down to it.

Scott
  • 21,475
  • 8
  • 43
  • 55