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

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

ただいまの
回答率

88.92%

アニメーションのタイミング設定のプログラムの解決方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 136

Yuto1800

score 6

アニメーションの開始のタイミングについての質問です
jquery最高の教科書という参考書の、回転のアニメーションを参考にして動きのある円チャートを作成しました。
単体では動くのですが、スクロールして可視範囲に入ったらアニメーションさせたく追加でプログラムを組みました。
すると動かなくなりました。
円チャート単体では動いているので、『可視範囲に入ったらアニメーションさせる』プログラムが間違っていると思うのですが調べても解決方法が分からず、知恵をお借りしたく質問しました。

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

htmlのソースコード

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>Yuto's Room</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>

<!-- ヘッダー -->
<header>

</header>

<!-- プロフィール -->
<div class="heading-txt">
<h2><i class="fas fa-user"></i> PROFILE</h2>
</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>
</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>

cssのコード

@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 {
background-color: #1d4763;
border-top: #e6e500 dotted 5px;
border-bottom: #e6e500 dotted 5px;
height: 1800px;
width: 100vw;
h2 {
text-align: center;
color: #e6e500;
line-height: 180px;
font-size: 45px;
font-weight: 500;
letter-spacing: 3px;
}
}

/* スキル */
.skill-item {
display: flex;
margin-top: 10px;
}

.skill-wrapper {
margin: 0 15%;
}

.skill-txt {
margin-left: 25px;
margin-top: 10px;
h3 {
font-size: 25px;
}
p {
margin-top: 10px;
letter-spacing: 1;
color: #ffffff;
}
}

/* フッター */
footer {
height: 150px;
background-color: #1d4763;
p {
text-align: center;
line-height: 150px;
}
}

/* パイチャート */
.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;
}
}

pi-html {

.circle-body {
background-color: #00a040;
}
}

.html-color {
color: #00a040;
}

pi-css {

.circle-body {
background-color: #e6191c;
}
}

.css-color {
color: #e6191c;
}

jsのソースコード

$(function(){
/* 回転アニメーションのやつ */
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));
}});
});
}

/* スクロールしたらアニメーションのやつ */
$(window).on('scroll', function() {
var $skillScroll = $('#skill-scroll');

$skillScroll.each(function() {
var skillOffset = $(this).offset().top,
scrollPos = $(window).scrollTop();

if(scrollPos > skillOffset) {
$(this).activateScene2();
}
});
});
});

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Lhankor_Mhy

    2020/07/03 16:37

    ソースコードを書きましょう
    https://teratail.com/help/question-tips#questionTips3-5-1

    エラーメッセージや実行ログをコピー&ペーストしましょう
    https://teratail.com/help/question-tips#questionTips3-4-2

    結果(実際に起きたこと)を書きましょう
    https://teratail.com/help/question-tips#questionTips3-4-1

    キャンセル

  • yambejp

    2020/07/03 16:56

    ソースを画像で貼るということは、回答者が手書きでソースを起こすということです
    (特に長文の場合)普通はそんなめんどくさいことまでして回答はしません。
    そもそもなぜ画像で貼ろうと思ったかも不明・・・

    キャンセル

  • yoorwm

    2020/07/03 17:25

    自分で試したのなら、そのソースを貼り付けるだけなはずですがね。
    なぜ、画像にしましたか?

    キャンセル

  • Yuto1800

    2020/07/03 23:14

    大変失礼いたしました。
    こういった質問の場に慣れておらず、回答してくださる方のことを考えていない配慮がない質問になってしまいました。
    今後はこういったことがないようにいたします。
    ご指摘ありがとうございます。

    質問を編集いたしますので、もう一度質問の場をくださると助かります。
    もしまだ足りない場合はご指摘ください。

    改めて大変失礼いたしました。

    キャンセル

回答 1

check解決した方法

0

コードの書き方も間違えていたので、一度質問をなしにしてまた改めて
質問しなおします。
ご指摘くださった方有り難うございました

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る