2

グラフとチャートにはcharts.jsという jQuery プラグインを使用する予定です。ただし、より大きなページでは、これらのグラフのアニメーションは、ユーザーが見る前に完了します。

私の質問は、charts.js Web サイトに正確に示されているように、ビューポート内に表示されている場合にのみ、特定の div/セクションのコンテンツをフェードインするにはどうすればよいかということです。下にスクロールするとコンテンツが順次フェードインするため、グラフのアニメーションも見逃されません。jQueryの助けを借りてこれを達成するにはどうすればよいですか?

4

3 に答える 3

2

この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).
            }            
        });     
    });    
});
于 2013-10-22T12:46:28.403 に答える
0

Mika のビューポート セレクター プラグインは、html 要素ではなく、ブラウザー ウィンドウのビューポートに対して機能します。つまり、 #container{width:350px;height:150px;overflow:auto;} のような css を取得すると、スクロール時に機能しません。

彼の他のプラグイン、Lazy Load を試すことをお勧めします

例を次に示します: http://jsbin.com/efazos/1/edit

于 2013-10-22T12:41:37.757 に答える
0

次のコードを使用すると、要素がドキュメントのスクロール時にウィンドウ内にあるかどうかを判断できます。そこから、チャートを有効にして、好きなアニメーションを実行できます:

<script type="text/javascript">
$(document).ready(function() {
    $(document).on('scroll', function() {
        //Get Div 1's Top and Left offsets from the Document.
        var divTop = $('#div1').offset().top;
        var divLeft = $('#div1').offset().left;
        //Get the current window height and width.
        var winHeight = $(window).height();
        var winWidth = $(window).width();

        if (divPos <= winHeight && divLeft <= winWidth) {
            //Div is visible in window

            //Fade in Chart
        }
    });
});
</script>
于 2013-10-22T12:48:27.380 に答える