「Chart.js」は、Webサイト上でチャート・グラフを表示するこができるJavaScriptのライブラリ。そのChart.jsでは基本的にページが読み込まれたタイミングで、チャートの描画アニメーションを行いますが、今回は、そのアニメーションのタイミングを、チャートが表示される位置までスクロールされた際にするjQueryの例となります。例では、jQueryとChart.jsのライブラリはすでに読み込んでいる前提としています。以下はチャートを表示させるHTML要素となり、チャートを表示させたい箇所に記述します。以下はjQueryのコードとなり、チャートの設定とチャートが表示される位置までスクロールされた際に、描画アニメーションを実行します。jQueryのコードは、jQueryとChart.jsのライブラリを読み込んだ後に、実行される箇所に記述します。以下は、チャートが表示される位置までスクロールされた際に、アニメーションを実行する箇所のjQueryの説明となります。チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義まずは、チャートを表示する要素がウィンドウ内にあるかを判断する関数を定義します。例のコードでは27行目からの以下の箇所となります。elemBottom);}上記の関数conditionalでは、ページ内の4箇所の位置情報を取得します。引数にはチャートを表示させる要素を指定します。ウィンドウ上端の位置情報(変数docTop)ウィンドウ下端の位置情報(変数docBottom)チャート上端の位置情報(変数elemTop)チャート下端の位置情報(変数elemBottom)そして、取得した位置情報を使い、「チャートを表示する要素がウィンドウ内にある場合に真となる式」を返します。次に、ウィンドウ画面内に表示されたチャートが何度もアニメーションしてしまうことを防ぐために、チャートが描画されているかを判断する変数のdrawを定義します。例のコードでは41行目からの以下の箇所となります。false;スクロール時に描画アニメーションの実行を判断そして、スクロール時にチャートの描画アニメーションの実行を判断する関数を定義します。例のコードでは44行目からの以下の箇所となります。false;}});上記の箇所では、スクロール時にチャートの位置や表示状態によって、描画アニメーションを実行を判断します。最初のif文では、定義conditional関数でチャートを表示する要素がウィンドウ内にあるかを判断しています。チャートを表示する要素がウィンドウ内にある場合は、入れ子となる次のif文で、変数drawを利用しチャートが描画されているかを判断しています。チャートが描画されていない場合は、チャートを描画し変数drawにtrueをセットし、チャートが描画されている場合は、何も処理は行いません。チャートを表示する要素がウィンドウ外に出た場合には、変数drawをfalseにセットします。それにより、スクロールしても表示されたチャートが一度がウィンドウ外に出て、チャートが表示されなくなるまでは描画アニメーションを再実行しなくなります。コメントをキャンセルコメントは項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。(メールアドレスは公開されることはありません。コメントの公開は承認制となります。)また、多忙によりコメントには返信できない場合があります。Twitterで返信する場合はこちらから。DESTROY広告ブロッカーが有効のため、コンテンツ内におすすめ商品などが表示されています。