ホームページに組み込んだHTML5 Canvasをスクロールで現れると動くようにしたい

Adobe Animate CCで作成したHTML5Canvasについて教えてください。
ホームページの下部に、内容がグラフのアニメーションのHTML5 Canvasを組み込んだのですが、これをスクロールをして現れた時にHTML5 Canvasが動きだすというようにしたいのですが、どうすればいいのか分からなくて困ってます。
そもそもHTML5 Canvasでできるのかもわからないのですが。

どうか、よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

Adobe Animate CCを使ったことがないので、どのようなcanvasのJavaScriptが書き出されるか
わからないのですが、以下の解答が解決へのヒントになれば幸いです。

問題

Adobe Animate CCを使ってアニメーションで動くグラフを作った
ページの上の方に設置すれば、アニメーションが動き出す部分が見られる
しかしページの下の方に設置すると、スクロールするまでにアニメーションが終わっている
スクロールで表示した時にアニメーションが動き出すようにしたい

という感じでしょうか？
出来るか出来ないかで言えば、出来るはずです。

実装の手順としては
・canvasのアニメーションはとめておく
・スクロールのイベントを取得
・規定のスクロール位置まで来たら、canvasのアニメーションを再生

ということになりますので、
★canvasのアニメーションを再生させている部分がどこか
がわからないと、解決ができないと思います。
ココがわかればアニメーションを再生させなければ、止まっているはずです。

そして、そこがわかればあとは
・スクロールのイベントを取得
・規定のスクロール位置まで来たら、何かする（この場合は再生させる）
の2つだけになりますので、これらは「javascript scroll 位置」とかで
検索したら出てくるのではと思います。

投稿2016/09/05 11:27

mattari_panda

総合スコア429

manaeos

2016/09/07 02:27

解答ありがとうございます。スクロールイベントの取得まではできたので、（例えば、文字を出すなど）あとは「再生させる」なのですが、コードを見て、再生させている場所を見つけては試しているのですが、うまくいきません。よく調べてみたら <body onload="init();"> があるので、ページを読み込んだら自動再生になっているようなのですが、これを「スクロール位置まできたら再生する」に変更できればいいのですがそれがまだわからない状態です。一応スクロールイベントの取得は下記の内容でやってます。 $(function(){ $(window).scroll(function(){ var obj_t_pos = $('#cn').offset().top; var scr_count = $(document).scrollTop() + (window.innerHeight/1.5); if(scr_count > obj_t_pos){ //実行内容 } }) })

行動規範の内容に同意します