質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

9227閲覧

JavaScript【要素が画面に表示されたときに動きを発動させたい】

Ashi

総合スコア139

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2017/02/23 01:46

JavaScript初心者です。
ご回答いただけますと幸いです。

【前提】
――――――――――――――――――――――――――――――――――――――――
「Chart.js」を使用した「動きのある円グラフ」を
「デバイス上の可視範囲に表示されたタイミング」で実行させたいです。

※現状は「読み込み」のタイミングで実行されるコードになっています。

縦長のページの中段部分にグラフがあるため、
ユーザーがその位置までスクロールするころには既に
動きの実行が終了した後の状態になってしまいます。

ユーザーがそのグラフを目にするタイミングで
動きを実行させるにはどのようなコードを書けばよろしいでしょうか。

【現在のコード】
――――――――――――――――――――――――――――――――――――――――
※関連部分以外は省略しています。

<html> <heade> src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> </head> <body> <div style="width: 70%"> <canvas id="chart1" height="450" width="600"></canvas> </div> <style> </style> <script> var doughnutData = [ { value: 300, color:"#F7464A", highlight: "#FF5A5E", label: "Red" }, { value: 50, color: "#46BFBD", highlight: "#5AD3D1", label: "Green" }, { value: 100, color: "#FDB45C", highlight: "#FFC870", label: "Yellow" }, { value: 40, color: "#949FB1", highlight: "#A8B3C5", label: "Grey" }, { value: 120, color: "#4D5360", highlight: "#616774", label: "Dark Grey" } ]; var ctx = document.getElementById("chart2").getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); </script> </body> </html>

以上、何卒よろしくお願いいたします。

ご回答お待ちしております。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

jquery.inview というプラグインがあります。
こちらはまさにブラウザ上で見えたタイミングで処理を実行するというプラグインです。

html

1<html lang="ja"> 2<head> 3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 <meta http-equiv="Content-Style-Type" content="text/css"> 5 <style> 6 @media screen and (max-width: 600px) { 7 .example { 8 background: #DC143C; 9 } 10 } 11 </style> 12</head> 13<body> 14 <div style="height: 1000px"> 15 </div> 16 <div id="inviewTest" style="width: 70%"> 17 <canvas id="chart1" height="450" width="600"></canvas> 18 </div> 19 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 20 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 21 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> 22 <script> 23 var isShow = false; 24 var doughnutData = [{ 25 value: 300, 26 color: "#F7464A", 27 highlight: "#FF5A5E", 28 label: "Red" 29 }, 30 { 31 value: 50, 32 color: "#46BFBD", 33 highlight: "#5AD3D1", 34 label: "Green" 35 }, 36 { 37 value: 100, 38 color: "#FDB45C", 39 highlight: "#FFC870", 40 label: "Yellow" 41 }, 42 { 43 value: 40, 44 color: "#949FB1", 45 highlight: "#A8B3C5", 46 label: "Grey" 47 }, 48 { 49 value: 120, 50 color: "#4D5360", 51 highlight: "#616774", 52 label: "Dark Grey" 53 } 54 ]; 55 $('#inviewTest').on('inview', function(event, isInView, visiblePartX, visiblePartY) { 56 if (isInView && !isShow) { 57 var ctx = document.getElementById("chart1").getContext("2d"); 58 window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { 59 responsive: true 60 }); 61 isShow = true; 62 } 63 }); 64 </script> 65</body> 66</html> 67

投稿2017/02/23 03:07

mri0815

総合スコア429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ashi

2017/02/23 03:42

ご回答ありがとうございます。 早速いただいたコードで試してみましたが、 上手くいきませんでした。 ※いただいたコードだけでブラウザ上に表示もしてみましたが、  やはり読み込みのタイミングで実行されているようでした。 ※ちなみにブラウザはchromeを使用しています。
mri0815

2017/02/23 03:56

ご確認ありがとうございます。 バージョン 56.0.2924.87のchromeにてこちらでも確認いたしましたが、 正常に(スクロール後、canvasが表示されてから)アニメーションされました。 引き続き、何か分かり次第、追記いたします。
Ashi

2017/02/23 06:58

再度試したところ、無事できました! とても参考になりました! 丁寧にご対応いただきありがとうございました。
mri0815

2017/02/23 07:10

無事解決されたようで良かったです。ご確認ありがとうございました。
guest

0

回答にはなってませんが

今はまだChromeにしか実装されていませんがIntersection ObserverというAPIがあり、指定したエレメントが画面内に来るとイベントを発行するというものです。
参考ページ

投稿2017/02/23 03:15

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Ashi

2017/02/23 03:40

ご回答ありがとうございます。 参考にさせていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問