jQuery, the popular framework for short-handing complex actions in JavaScript, has been extended by many developers around the world to do create some pretty slick in-browser effects. Today, let's combine a couple of those together (along with some CSS effects) and make your page content a little more interesting.
Effect Number 1: Hover Blur
Mary Lou (Manoela Ilic) created a nice tutorial on making some items come into focus (while the others blur) as you mouse over them. Simple, and smart implementation.
Effect Number 1: Waypoints - initiate an action when something comes into view
Waypoints is an excellent jQuery extension built by Caleb (who is here in Portland, Oregon) which allows you to trigger events when something is brought into the browser. It couldn't be easier to implement.
What do we want to achieve?
I simply want a box of text to be "highlighted" (in this case, to focus/enlarge while others on the page blur/shrink).
Thanks to the ease-of-use of these other pieces of code, this shouldn't be too difficult of a task.
Here is our code in jsfiddle
In our case, we want to keep Mary Lou's functionality fully in-tact (when I put my mouse over a callout box, bring it to focus), but we also want to add the triggered event to automatically happen when the page is scrolled to the level of the callout box - this is where waypoints come in.
[code]
$articles.waypoint(function (direction) { var $article = $(this); clearTimeout(timeout); timeout = setTimeout(function () { if ($article.hasClass('active')) { return false; } $articles.not($article.removeClass('blur').addClass('active')).removeClass('active').addClass('blur'); }, 65); }, { offset: 250});
[/code]
In this example, we attach a waypoint to each article (the callout box) and trigger the blur-focus when we reach each callout box. We add 250px of offset to the top of each article, so the triggering event happens when the item is 250 pixels down the page - not when it first comes into view. This technique of triggering an effect or animation can be added to any page with a few lines of code.