

### 目標

htmlの74~87行の部分をスクロールして見えてきた時にフェードインさせることです。  
・Our Serviceが下に  
・image/black.png が上に  
・image/educure01.jp DXを推進するエンジニア育成  
IT事業参入をご検討中の事業者様向けのサービスです。 が上に  
faideinさせたいです。

### 問題点

一部設定してみました。cssは機能しているがjavascriptで止まっています。  
今回のfadeinの設定しているのが30-42列目にあたります。  
一部ずつ変更してみたりして改善していますが機能しません。

エラーは出ていません。  
ご意見よろしくお願いします。

HTML

[code]

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <title>株式会社LiNew</title>
      <link rel="stylesheet" type="text/css" href="base.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap" rel="stylesheet">
      <script src="jsscript.js"></script>
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
    <script>
    $(function(){
        $(window).scroll(function(){
            $(".fadeIn").each(function(){
                var targetElement = $(this).offset().top;
                var scroll = $(window).scrollTop();
                var windowHeight = $(window).height();
                if (scroll > targetElement - windowHeight) {
                    $(this).addClass("is-show");
                } else {
                    $(this).removeClass("is-show");
                }
            });
        });
    });
    </script>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <section>
     <div class=our-service>
      <div id="content1" class="show">
        <div class="Our-Service fadeIn_down fadeIn">
          <h1>Our Service</h1>
        </div>
          <div class="content1-wrp">
           <li class="fadeIn_up fadeIn">
            <div class="content1-imgs1">
              <img src="image/educure01.jpg">
            </div>
             <div class="servis-text">
              <img class=img1 src="./image/black.png" alt="">
               <p class=first-text>DXを推進するエンジニア育成</p>
               <p class=second-text>IT事業参入をご検討中の事業者様向けのサービスです。</p>
             </div>
          </li>
        </div>
      </div>
    </div>
    </section>
    </body>
    </html>
    
[/code]

css

[code]

    #content1{
        margin:  auto;
        padding-top: 125px;
    }
    
    .content1-wrp{
        display: flex;
    }
    
    h1{
         font-size: 28px;
         font-family: 'Noto Sans JP', sans-serif;
         border-top: solid 2px #2da690;
         max-width: 200px;
         margin: 0 auto;
         font-weight: 500px;
         text-decoration: none;
         padding-top: 4px;
         text-align:center;
         white-space: nowrap;
    }
    
    
    .fadeIn_down {
        opacity: 0;
      transform: translateY(-20%);
      transition: 1s;
    }
    
    .fadeIn_Down.is-show {
        transform: translate(0, 0);
      opacity: 1;
    }
    
    
    .content1-imgs1 img{
     height:665px;
     width: 665px;
     object-fit: contain;
     right: 42vw;
     bottom: -37vw;
    }
    
    .servis-text{
        height: 340.5px;
        width: 672px;
        position: absolute;
        right: 9vw;
        bottom: -50vw;
        background-color: #fff;
        opacity: 0.9;
        font-family: 'Noto Sans JP', sans-serif;
    
    }
    
    .img1{
    display: flex;
     height:100px;
     width: 200px;
     object-fit: contain;
     position: relative;
     margin:40px;
     margin-top: 10px;
    }
    
    .first-text{
     font-size: 32px;
     margin: -20px 0 20px 45px;
    }
    
    .second-text{
        margin:0 0 20px 45px;
        opacity: 0.5;
    }
    
    .fadeIn_up {
        opacity: 0;
        transform: translate(0, 20px);
     }
    
     .fadeIn_up.is-show {
        transform: translate(0, 0);
       opacity: 1;
         transition: all 1s ease-out;
     }
    
    
[/code]


CC BY-SA 4.0
2022-02-11T08:42:58.277
86268
2022-02-11T09:59:34.113
2022-02-11T09:59:34.113
51050
51050
question
javascript html css
javascriptでフェードインさせたい


要件をすべて修正しているわけではありませんが動かない原因を述べます

まずスクリプトですが、 `.fadeIn`
というfadeInクラスがついたdomを取得しにいっていますが、HTML上fadeInクラスがついたタグはありません

[code]

    $(function(){
        $(window).scroll(function(){
            $(".fadeIn").each(function(){
                var targetElement = $(this).offset().top;
                var scroll = $(window).scrollTop();
                var windowHeight = $(window).height();
                if (scroll > targetElement - windowHeight) {
                    $(this).addClass("scrollin");
                } else {
                    $(this).removeClass("scrollin");
                }
            });
        });
    });
    
[/code]

`fadeIn_up` と `fadeIn_down`
が既存のHTMLにあるため恐らくこれらの要素だと推測します。このため以下のようにfadeInクラスを追加するようにを修正します

[code]

        <div class="Our-Service fadeIn_down fadeIn">
          <h1>Our Service</h1>
        </div>
        <!-- 省略 -->
        <div class="content1-wrp">
           <div class="fadeIn_up fadeIn">
           <!-- 省略 -->
           </div>
        </div>
    
[/code]

次にスクリプトでクラスの付け外しをしている処理です。以下の箇所で表示要素が画面内  
なら `scrollin` クラスを付加し画面外なら `scrollin` クラスを削除するスクリプトだと推測します

[code]

    if (scroll > targetElement - windowHeight) {
      $(this).addClass("scrollin");
    } else {
      $(this).removeClass("scrollin");
    }
    
[/code]

cssを見ると `scrollin` クラスではなく `is-show` クラスの付け外しを考えてるように推測できるためそちらに変更します

[code]

    if (scroll > targetElement - windowHeight) {
      $(this).addClass("is-show");
    } else {
      $(this).removeClass("is-show");
    }
    
[/code]

以上の2点の修正で表示ができるのではないでしょうか

余談ですがsectionタグ閉じ忘れになっています


CC BY-SA 4.0
2022-02-11T09:27:48.197
86271
2022-02-11T09:27:48.197
298
86268
answer