このjsFiddleを見てください。著者は、ボックスが表示されるとフェード インします。グラフをフェードインするだけでなく、グラフが表示されたときにグラフを作成するには、おそらく chart.js を呼び出す必要があります (つまり、単なるフェードインではなく、派手なグラフアニメーションが必要な場合:-)) フィドルを微調整しましたそしてそれを以下に含めました:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.graph').each( function(i){
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
//Code to initialize the graph here.
//This initialization should probably
//be deferred, to ensure performance,
//and the graphs should be marked as
//initialized so we dont't init them
//multiple times (possibly by changing
//their class so .each ignores them).
}
});
});
});