目標 htmlの74~87行の部分をスクロールして見えてきた時にフェードインさせることです。 ・Our Serviceが下に ・image/black.png が上に ・image/educure01.jp DXを推進するエンジニア育成 IT事業参入をご検討中の事業者様向けのサービスです。 が上に faideinさせたいです。 問題 一部設定してみました。cssは機能しているがjavascriptで止まっています。 今回のfadeinの設定しているのが30-42列目にあたります。 一部ずつ変更してみたりして改善していますが機能しません。 エラーは出ていません。 ご意見よろしくお願いします。 <!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("scrollin"); } else { $(this).removeClass("scrollin"); } }); }); }); </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"> <h1>Our Service</h1> </div> <div class="content1-wrp"> <div class="fadeIn_up"> <div class="content1-imgs1"> <img src="image/educure01.jpg"> </div> <div class="servis-text"> <img class=img1 src="./image/black.png" alt=""> <p class=dx>DXを推進するエンジニア育成</p> <p class=it>IT事業参入をご検討中の事業者様向けのサービスです。</p> </div> </div> </div> </div> </div> </body> </html> 以下css #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; } .dx{ font-size: 32px; margin: -20px 0 20px 45px; } .it{ margin:0 0 20px 45px; opacity: 0.5; } .fadeIn_up { opacity: 0; transform: translate(0, 20px); transition: all 1s ease-out; } .fadeIn_down.is-show { transform: translate(0, 0); opacity: 1; }