0

実現したいこと

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

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

【jQuery】スクロールして表示領域に入ったら要素をアニメーション表示させる『inview.js』の実装サンプル集

解説をいただきたい部分

画像の説明をここに入力

①なぜ最初に$(なのか

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

③isInviewの役割

④stop()の意味

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

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

});
* {
    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;
}
<!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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.css" />
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/slick/slick.min.js">
  </script>




  <script src="index.js"></script>


</body>

</html>

1
  • 2
    回答を書いてみましたが、やはり質問項目が多すぎると感じました。できるだけ一問一答形式の読み易い Q&A になるように心掛けていただけると、回答も付きやすいかと思います。ソースコードも再現可能な短いサンプルコードの書き方を参考に、再現可能な最小限のコードを作成するのが解決への早道です。
    – mjy
    Commented 2022年9月24日 21:36

1 件の回答 1

2

なぜ最初に $( なのか

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

jQuery(callback)

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

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

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

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

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

stop() の意味

指定した要素集合から、現在動作中のアニメーション処理を全て中止します。
—— stop()

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

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

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

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

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

1
  • ありがとうございます。ご指摘いただいたとおりHTMLにinviewクラスを指定すると表示されました。アドバイス誠に感謝いたします。
    – Iori_ss67
    Commented 2022年9月25日 11:42

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。