Web Design Confidential

(Ann) #1

64 The State of Web Design Trends: 2012


jQuery Waypoints

jQuery Waypoints detects when a window has scrolled to certain
(definable) elements on a page, allowing you to trigger events when
that happens. In the examples mentioned, you might detect that an
element has been reached, at which point you apply different CSS
positioning.

Some sites have taken the concept even further, animating ele-
ments and calling complex events when certain vertical points on
the page are reached:

Facebook Timeline

Scroll down the Facebook Timeline presentation site and observe
how headings and other elements appear, scroll and fix them-
selves depending on your vertical position. This behavior not only
makes for an appealing experience, but it also keeps the layout
uncluttered until information is actually needed.
Free download pdf