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

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

新規登録して質問してみよう
ただいま回答率
85.50%
スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

0回答

876閲覧

jqueryにおけるアニメーションの開始のタイミングについて

Yuto1800

総合スコア6

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/07/05 22:07

*以前こちらで質問した内容です。再掲載です。*
(以前の質問はTERATAILを利用するにあたってのマナーを守り切れておらず、解答者様にご迷惑、ご指摘をいただきましたので再びこちらで質問させていただく運びとなりました。)
以下質問です。

アニメーションの開始のタイミングについての質問です

これまでの流れ

ポートフォリオ作成にあたり、jquery最高の教科書という参考書の『回転のアニメーション』を参考にして動きのある円チャートを作成しました。掲載したコードのページの『SKILLS』に当たる部分です。
(1~3つ目のコードを組みました。1つ目HTML 2つ目CSS 3つ目JavaScript のファイルです)

円チャート単体では動くのですがページを開いたらすぐにアニメーションが始まるため、スクロールして可視範囲に入ったらアニメーションさせたく、 JavaScriptのファイルに追加でプログラムを組みました。スクロール量を取得して、可視範囲に入ったら、定義したアニメーションの関数『activateScene2』という関数を実行するようなプログラムです
(4つ目のコードが最終形です)
すると動かなくなりました。

円チャート単体では動いているので、『可視範囲に入ったらアニメーションさせる』プログラムが間違っていると思うのですが調べても解決方法が分からず、知恵をお借りしたく質問しました。

(理想としては、スクロールで可視範囲に入ったら、JSファイルで定義している activateScene2 という関数を実行できるようにタイミングを設定するようなプログラムを組みたいです。)

HTMLコード

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <title>Yuto's Room</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- プロフィール --> <div class="heading-txt"> <h2><i class="fas fa-user"></i> PROFILE</h2> </div> <div class="profile container"> <div class="introduce"> <img src="" alt="自分の写真"> </div> </div> <!-- スキル --> <div class="skills heading-txt"> <h2><i class="fas fa-wrench"></i> SKILLS</h2> </div> <div class="container" id="scene-2-content"> <div class="skill-wrapper"> <div class="skill-item"> <!-- パイチャート --> <div class="charts"> <div class="chart" id="pi-html"> <div class="circle-mask-outer left"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="circle-mask-outer right"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="chart-content"> <p class="text"> <i class="fab fa-html5 fa-2x html-color"></i> <div class="percent"> <span class="percent-number">70</span> <span class="percent-symbol">%</span> </div> </p> </div> </div> </div> <!-- パイチャートここまで --> <div class="skill-txt"> <h3 class="html-color">HTML</h3> <p>SEOを考慮し、見やすく、後から編集しやすいコーディングをします。</p> </div> </div> <div class="skill-item"> <div class="charts"> <div class="chart" id="pi-css"> <div class="circle-mask-outer left"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="circle-mask-outer right"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="chart-content"> <p class="text"> <i class="fab fa-css3-alt fa-2x css-color"></i> <div class="percent"> <span class="percent-number">70</span> <span class="percent-symbol">%</span> </div> </p> </div> </div> </div> <div class="skill-txt"> <h3 class="css-color">CSS</h3> <p>後から編集しやすく、パーフェクトピクセルを意識して綺麗にコーディングをします</p> </div> </div> <div class="skill-item"> <div class="charts"> <div class="chart" id="pi-sass"> <div class="circle-mask-outer left"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="circle-mask-outer right"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="chart-content"> <p class="text"> <i class="fab fa-sass fa-2x sass-color"></i> <div class="percent"> <span class="percent-number">60</span> <span class="percent-symbol">%</span> </div> </p> </div> </div> </div> <div class="skill-txt"> <h3 class="sass-color">Sass</h3> <p>効率が良い丁寧なコーディング、綺麗なレスポンシブデザインのサイトを構築します。</p> </div> </div> <div class="skill-item"> <div class="charts"> <div class="chart" id="pi-js"> <div class="circle-mask-outer left"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="circle-mask-outer right"> <div class="circle-mask-inner"> <div class="circle-body"></div> </div> </div> <div class="chart-content"> <p class="text"> <i class="fab fa-js-square fa-2x js-color"></i> <div class="percent"> <span class="percent-number">50</span> <span class="percent-symbol">%</span> </div> </p> </div> </div> </div> <div class="skill-txt"> <h3 class="js-color">JavaScript</h3> <p>Webサイトに動的な要素を加えます。</p> </div> </div> </div> </div> <!-- フッター --> <footer> <p><small>&copy; 2020 / Yuto Nagayoshi / All Rights Reserved.</small></p> </footer> <!-- JavaScriptファイル --> <script src="js/jquery-3.5.1.min.js"></script> <script src="js/script.js"></script> </body> </html>

Sassコード

@charset "utf-8"; /* 共通 */ body { width: 100vw; color: #5fc1c7; background-color: #000000; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } a { text-decoration: none; } .container { width: 90%; margin: 100px auto; max-width: 1200px; } .heading-txt { height: 180px; width: 100vw; } /* プロフィール */ .introduce { display: flex; justify-content: center; } .introduce { img { width: 350px; height: 350px; margin-right: 60px; } } /* スキル */ .skill-item { display: flex; margin-top: 10px; } .skill-wrapper { margin: 0 15%; } /* パイチャート */ .chart { position: relative; width: 80px; height: 80px; } .circle-mask-outer, .circle-mask-inner { overflow: hidden; position: absolute; width: 40px; height: 80px; } .circle-mask-outer.left { left: 0; } .circle-mask-outer.right { right: 0; } .circle-mask-inner { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .circle-mask-outer.left { .circle-mask-inner { left: 100%; -webkit-transform-origin: 0 50%; -ms-transform-origin: 0 50%; transform-origin: 0 50%; } } .circle-mask-outer.right { .circle-mask-inner { right: 100%; -webkit-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; transform-origin: 100% 50%; } } .circle-body { border-radius: 50%; position: absolute; width: 80px; height: 80px; } .circle-mask-outer.left { .circle-body { right: 0; } } .circle-mask-outer.right { .circle-body { left: 0; } } .chart-content { position: absolute; top: 9px; left: 8px; width: 63px; height: 63px; background-color: #fff; border-radius: 50%; text-align: center; .text { display: flex; flex-direction: column; padding-top: 5px; } } .percent { span { color: #000000; } } .skill-txt { margin-left: 25px; margin-top: 10px; h3 { font-size: 25px; } p { margin-top: 10px; letter-spacing: 1; color: #ffffff; } } #pi-html { .circle-body { background-color: #00a040; } } .html-color { color: #00a040; } #pi-css { .circle-body { background-color: #e6191c; } } .css-color { color: #e6191c; } #pi-sass { .circle-body { background-color: #f585cc; } } .sass-color { color: #f585cc; } #pi-js { .circle-body { background-color: #254678; } } .js-color { color: #254678; }

JSコード

$(function(){ /* 回転アニメーションのやつ */ activateScene2(); function activateScene2() { var $content = $('#scene-2-content'), $charts = $content.find('.chart'); $charts.each(function() { var $chart = $(this), $circleLeft = $chart.find('.left .circle-mask-inner').css({transform: 'rotate(0)'}), $circleRight = $chart.find('.right .circle-mask-inner').css({transform: 'rotate(0)'}), $percentNumber = $chart.find('.percent-number'), percentData = $percentNumber.text(); $percentNumber.text(0); $({percent: 0}).delay(1000).animate({percent: percentData}, {duration: 1500, progress: function() { var now = this.percent, deg = now * 360 / 100, degRight = Math.min(Math.max(deg, 0), 180), degLeft = Math.min(Math.max(deg - 180, 0), 180); $circleRight.css({transform: 'rotate(' + degRight + 'deg)'}); $circleLeft.css({transform: 'rotate(' + degLeft +'deg)'}); $percentNumber.text(Math.floor(now)); }}); }); } });

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問