I am using the script below along with the jQuery Waypoints plugin to fade elements into 100% opacity when they are centered 50% (or 75%) in the browser window. The code seems to be working pretty good except the elements don't seem to initially fade in. When I scroll down and then back up it seems to be triggering them then.
$(document).ready(function() {
$('#feature').waypoint(function(event, direction) {
var targetOpacity = direction === "down" ? 1 : .25;
$(this).stop().animate({ "opacity": targetOpacity });
}, {
offset: '50%'
});
$('#footer').waypoint(function(event, direction) {
var targetOpacity = direction == "down" ? 1 : .25;
$(this).stop().animate({ "opacity": targetOpacity });
}, {
offset: '75%'
});
});