スクロールした瞬間にCSSを使った演出が行われるように実装したい。

スクロールした瞬間に、toggleClassでクラスを付与して、CSSを使った演出（円が出現してそれが画面いっぱいに広がる演出)が行われるようにしたいのですが、スクロールした際に、その演出がしっかり実行される時と、されない時があり困っています。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>circle-move</title>
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11  
12  <body>
13    <header id="header">
14      <h1>Logo</h1>
15    </header>
16      
17    <main id="main">
18      
19      <section class="area-1">
20        <div class="circle-bg"></div>
21        <h2>Area 1</h2>
22        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
23        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
24      <!--/area1--></section>
25        <section>
26        <h2>Area 2</h2>
27      <!--/area2--></section>
28        <section class="area-3">
29        <h2>Area 3</h2>
30        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
31        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
32        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
33        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
34        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
35  
36      <!--/area3--></section>
37        <section class="area-4">
38        <h2>Area 4</h2>
39      <!--/area4--></section>
40        <section>
41        <h2>Area 5</h2>
42            
43        <p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
44      <!--/area5--></section>
45    <!--/main--></main>
46  
47    <footer id="footer">
48    <small>&copy; copyright.</small>
49    </footer>
50
51  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="  crossorigin="anonymous"></script>
52  <script src="js/script.js"></script>
53
54</body>
55</html>
56

CSS
1@charset "utf-8";
2
3/*========= 演出のためのCSS ===============*/
4
5/*丸の拡大*/
6.circle-bg{
7    position: fixed;
8  z-index:3;
9    /*丸の形*/
10    width: 100px;
11    height: 100px;
12    border-radius: 50%;
13    background: rgb(00, 11, 22,0.9);
14    /*丸のスタート位置と形状*/
15    transform: scale(0);/*scaleをはじめは0に*/
16    top:calc(50% - 50px);/*50%から円の半径を引いた値*/
17    left:calc(50% - 50px);/*50%から円の半径を引いた値*/
18    transition: all .6s;/*0.6秒かけてアニメーション*/
19}
20
21.circle-bg.circleactive{
22  transform: scale(50);/*クラスが付与されたらscaleを拡大*/
23}
24
25
26
27/*========= レイアウトのためのCSS ===============*/
28
29h1{
30  font-size:1.2rem;
31}
32
33h2{
34  font-size:1.2rem;
35  text-align: center;
36  margin: 0 0 30px 0;
37}
38
39p{
40  margin-top:20px;  
41}
42
43small{
44  color:#fff;
45  display: block;
46  text-align: center;
47}
48
49#header{
50  width:100%;
51  background:#333;
52  color:#fff;
53  text-align: center;
54  padding: 20px;
55}
56
57section{
58  padding:100px 30px;
59}
60
61section:nth-child(2n){
62  background:#f3f3f3; 
63}
64
65#footer{
66  background:#333;
67  padding:20px;
68}
69

jQuery
1$(function() {
2  $(window).scroll(function () {
3        $(".circle-bg").toggleClass('circleactive');//丸背景にcircleactiveクラスを付与
4      })
5});

大変恐れ入りますが、どなたか上手くいかない原因と解決方法を教えていただけないでしょうか？？すみませんが、どうぞよろしくお願いしますm m

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

回答1件

ベストアンサー

toggleClassは、対象となる要素が
指定したclass属性値を持っていなければ追加し、
持っていたら削除するという機能を持つメソッドです。

そして、そのトリガーとしているscrollイベントは、
画面がスクロールしている間中、何度も繰り返し発生するイベントです。

マウスのホイールをちょっとコロッとしただけでも、
実は、複数回のscrollイベントが発生しているんです。

なので、

実行された時
→　scrollイベントの発生が、circleactiveクラスを追加するタイミングで終わった

実行されない時
→　scrollイベントの発生が、circleactiveクラスを削除するタイミングで終わった

という差です。

理由が分かれば、他の方法や解決策をご自分で検討できるかと思いますので、
参考にしていただければと思います。

投稿2022/01/14 09:56

mix-peach

総合スコア1910

juke-footwork

2022/01/14 12:31

丁寧にご説明いただき、ありがとうございました! おかげ様でしっかりと理解することができましたm m if・else ifで条件を設定し、.addClass()と.removeClass()で対応することにしました。ありがとうございますm m

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.30%

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

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

質問する

関連した質問