質問: Adobe Animate CCで作成したHTML5Canvasについて教えてください。 ホームページの下部に、内容がグラフのアニメーションのHTML5 Canvasを組み込んだのですが、これをスクロールをして現れた時にHTML5 Canvasが動きだすというようにしたいのですが、どうすればいいのか分からなくて困ってます。 そもそもHTML5 Canvasでできるのかもわからないのですが。 どうか、よろしくお願いします。
回答: Adobe Animate CCを使ったことがないので、どのようなcanvasのJavaScriptが書き出されるか わからないのですが、以下の解答が解決へのヒントになれば幸いです。 問題 * Adobe Animate CCを使ってアニメーションで動くグラフを作った * ページの上の方に設置すれば、アニメーションが動き出す部分が見られる * しかしページの下の方に設置すると、スクロールするまでにアニメーションが終わっている * スクロールで表示した時にアニメーションが動き出すようにしたい という感じでしょうか? 出来るか出来ないかで言えば、出来るはずです。 実装の手順としては ・canvasのアニメーションはとめておく ・スクロールのイベントを取得 ・規定のスクロール位置まで来たら、canvasのアニメーションを再生 ということになりますので、 ★canvasのアニメーションを再生させている部分がどこか がわからないと、解決ができないと思います。 ココがわかればアニメーションを再生させなければ、止まっているはずです。 そして、そこがわかればあとは ・スクロールのイベントを取得 ・規定のスクロール位置まで来たら、何かする(この場合は再生させる) の2つだけになりますので、これらは「javascript scroll 位置」とかで 検索したら出てくるのではと思います。