91283


### 実現したいこと

こちらのサイトを参考にスクロールしたときに文字を浮かび上がらせたいです。  
「1.【サンプル】フェードイン（ふわっと）」をまねしたいです。

現状は表示させたい文字が現れません。

[【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集](https://125naroom.com/web/3532)

### 解説をいただきたい部分

[![画像の説明をここに入力](https://i.stack.imgur.com/Sgsvj.jpg)](https://i.stack.imgur.com/Sgsvj.jpg)

①なぜ最初に$(なのか

②eventはここでのスクロール操作なのか

③isInviewの役割

④stop()の意味

よろしくお願いいたします。

[code]

    $(function() {
      $('.inview').on('inview', function (event, isInview) {
        if(isInview) {
          $(this).stop().addClass('is-show');
        }
      });
    
    });
[/code]

[code]

    * {
        background-attachment: fixed;
    }
    
    
    /* aboutmeの余白をうまいことしたい */
    
    
    .navbar {}
    
    
    header {
        padding: 300px 0;
        background-image: url(images/top.jpg);
        height: 100px;
    }
    
    .fadeIn {
        color: #fff;
        opacity: 0;
        transition: 2s;
    
    }
    
    .fadeIn.is-show {
    opacity: 1;
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Iori's Website</title>
    
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
      </script>
    
    
      <!-- slick ‍headとbody終わりの直前-->
      <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
      <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
    
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    
      <!-- Font Awesome -->
      <script src="https://kit.fontawesome.com/3715e2b643.js" crossorigin="anonymous"></script>
    
    
    
    
      <link rel="stylesheet" href="styles.css">
      <!-- <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> -->
      
    </head>
    
    
    
    
    <body class="text-center">
    
    
      <!-- Nav Bar -->
    
      <nav class="navbar navbar-expand-lg navbar-light ">
        <a class="navbar-brand" href="">yoriss67</a>
    
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <a class="nav-link" href="">Contact</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Pricing</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="">Download</a>
            </li>
          </ul>
        </div>
      </nav>
    
    
      <!-- Title -->
    
    
      <header id="header">
        <div>
          <h1 class="fadeIn">Thank you for visiting.</h1>
        </div>
        <div class="">
          <p class="fadeIn" data-test-daa="This is a test">I'm Iori.</p>
        </div>
        </style>
    
    
      </header>
    
      <hr>
    
      <div class="aboutme">
        <h2>About Me</h2>
    
        <div class="row">
          <div class="col-md-6">
            <img class="imgprofile" src="images/8fdb71d0-e360-4b74-9761-7795784871bd-0-modified.png" alt="my-profile"
              width="200px" height="200px">
          </div>
          <div class="col-md-6">
            <p>I'm a sophomore student at a university in Japan. My major is English and Social Science.
              <br><br>I have started studying programming out of mainly curiosity and a bit of hope to make use of it for my
              future career.</p>
          </div>
        </div>
    
        <!-- <a href="https://www.notion.so/396eca31a8f44b5c989ac4b8efa302f0?v=c3d6906ee5654da9a5534cfa7b0b79bc&p=d67a03c53bd949b0902f76774734cf57&pm=s" target="_blank">Here's my Notion.</a> -->
    
      </div>
    
    
      <hr>
    
    
      <div class="mywebdevelopmentpath">
        <h2>My Web Development Path</h2>
    
    
        <!-- Web Dev Blog-->
        <button data-modal-id="modal-1">Open Modal 1</button>
        <button data-modal-id="modal-2">Open Modal 2</button>
    
        <div id="modal-1">Modal 1</div>
        <div id="modal-2">Modal 2</div>
    
    
    
    
      </div>
    
    
      <hr>
    
    
      <div class="whatilike">
        <h2>What I like</h2>
    
        <div class="slider">
          <div><img src="images/surfers.jpg" alt="surfers" /></div>
          <div><img src="images/circle.jpg" alt="circle" /></div>
          <div><img src="images/kelia.jpg" alt="kelia" /></div>
          <div><img src="images/sunset.jpg" alt="sunset" /></div>
          <div><img src="images/surfboy.jpg" alt="surfboy" /></div>
          <div><img src="images/yogurt.jpg" alt="yogurt" /></div>
          <div><img src="images/palmtree.jpg" alt="palmtree" /></div>
          <div><img src="images/yoga.jpg" alt="yoga" /></div>
    
        </div>
    
    
      </div>
    
      <hr>
    
      <h2>Works</h2>
      <div class="works">
        
    <ul>
        <li id="Travel Blog">
          <div>
          <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
            <img src="./images/images06.jpg" alt="images06">
            <h5>Travel Blog</h5>
          </a>
      
        </div>
        <div>
    
        <small> Sep 2022 </small>
        <p>初めての模写です。</p>
    
        </div>
    
        </li>
    
    
        <li id="Travel Blog">
          <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
            <img src="./images/images06.jpg" alt="images06">
            <h5>Travel Blog</h5>
          </a>
          <span> Sep 2022 </span>
        </li>
    
        <li id="Travel Blog">
          <a href="https://yoriss67.github.io/Travel-Blog/" target="_blank">
            <img src="./images/images06.jpg" alt="images06">
            <h5>Travel Blog</h5>
          </a>
          <span> Sep 2022 </span>
        </li>
    
      </ul>
    
    
    
    
      </div>
    
    
    
    <h2>Contact</h2>
    
    <div class="contact">
    <div class="github">
      <i class="fa-brands fa-github"></i>
      <a href="https://github.com/yoriss67">yoriss67</a>
    </div>
    
    <div class="twitter">
      <i class="fa-brands fa-twitter"></i>
      <a href="https://twitter.com/iori73wsy">Iori67</a>
    </div>
    
    <div class="instagram">
      <i class="fa-brands fa-instagram">  </i>
    
        <a href="https://www.instagram.com/ioriiii_13/">ioriii_13</a>
    </div>
    
    </div>
    
    
    
    
    
    
    
    
    
    
    
    
    <!-- inview CDN -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script>
    
    
    <!-- inview download -->
    
    <script src="./jquery.inview.min.js"></script>
    
      <!-- slick -->
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
      </script>
    
    
    
    
      <script src="index.js"></script>
    
    
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2022-09-24T14:59:55.653
91281
2022-09-24T22:15:03.780
2022-09-24T22:15:03.780
3054
53823
question
javascript html css
inview.jsでスクロールした際に文字を浮かび上がらせたい


### なぜ最初に `$(` なのか

jQuery というライブラリを使用しているので、`$` は `jQuery` を指します。

> `jQuery(callback)`
>
> DOM Documentのロードが終わった際に、バインドしておいた関数が実行されるようになる。  
>  この関数は `$(document).ready()` と全く同様に動作する。  
>  —— [jQuery(callback)](http://semooh.jp/jquery/api/core/jQuery/callback/)

例えば HTML の最後に JavaScript を書くなら、必要ありません。

### `event` はここでのスクロール操作なのか

jQuery のプラグインである [inview](https://github.com/zuk/jquery.inview)
を使用しているので、それによって追加された `inview` イベントです。スクロール操作により発生するという意味では、スクロール操作であると言えます。

### `isInview` の役割

> The event will only fire when the element comes in to view of the viewport,
> and out of view.  
>  ...  
>  The variable after the event argument indicates the visible state in the
> viewport.  
>  —— [Usage](https://github.com/zuk/jquery.inview#usage)

イベントはターゲットの要素が可視領域に入った時と出た時の両方で発生します。どちらなのか区別するのが2番目の引数 (質問のコードでは `isInview`
として利用) です。

### `stop()` の意味

> 指定した要素集合から、現在動作中のアニメーション処理を全て中止します。  
>  —— [`stop()`](http://semooh.jp/jquery/api/effects/stop/_/)

他でアニメーションさせていないなら、必要ないと思います。

### 「現状は表示させたい文字が現れません」

現在の JavaScript では `$('.inview').on('inview' ` としていますね。対象の要素を `inview`
というクラスで探しています。しかし、HTML には `inview` クラスが指定されていません。HTML で `class="inview
fadeIn"` のように `inview` クラスを追加する必要があります。

もしくは、JavaScript 側を `$('.fadeIn').on('inview' ` のようにして `fadeIn`
クラスで探すようにしてもよいでしょう。

（その他にも、重複した JavaScript の読み込みや、 `color: #fff;` など気になる点はあります）


CC BY-SA 4.0
2022-09-24T21:32:14.770
91283
2022-09-24T22:12:35.207
2022-09-24T22:12:35.207
3054
3054
91281
answer