I want to fade in with javascript

Goal

Scroll through the 74 to 87 lines of html and fade in when visible.
·Our Service is down
·Image/black.png is up
·Development of engineers to promote image/educure01.jp DX
For businesses looking to enter the IT business,
is on top of
I want to faidein.

Problems

I've set some settings.css is working but stopped with javascript.
This time, fadein is set to column 30-42.
I try to change some of them, but they don't work.

There are no errors.
I look forward to hearing from you.

HTML

<!DOCTYPE html>
<html>
<head>
  <metacharset="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(){
            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>
  <divid="content1" class="show">
    <div class="Our-Service fadeIn_down fadeIn">
      <h1>Our Service</h1>
    </div>
      <div class="content1-wrp">
       <lic class="fadeIn_upfadeIn">
        <div class="content1-imgs1">
          <img src="image/educure01.jpg">
        </div>
         <div class="service-text">
          <img class=img1src="./image/black.png "alt="">
           <p class=first-text>Development of engineers to drive DX</p>
           <p class=second-text>This service is for businesses looking to enter the IT business.</p>
         </div>
      </li>
    </div>
  </div>
</div>
</section>
</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 —solid2px#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-imgs1img{
 height —665px;
 width —665px;
 object-fit:contain;
 right:42vw;
 bottom: -37vw;
}

.service-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: -20px020px45px;
}

.second-text{
    margin —00 20px45px;
    opacity —0.5;
}

.fadeIn_up{
    opacity: 0;
    transform —translate(0,20px);
 }

 .fadeIn_up.is -show{
    transform —translate(0,0);
   opacity:1;
     transition —all 1sease-out;
 }

javascript html css

2022-09-30 22:01

1 Answers

I haven't fixed all the requirements, but I'll explain why they don't work

First of all, I'm going to get a dom with a fadeIn class called .fadeIn, but there is no tag with a fadeIn class on HTML

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

fadeIn_up and fadeIn_down are probably these elements because they are in the existing HTML.For this reason, modify to add the fadeIn class as follows.

<div class="Our-Service fadeIn_down fadeIn">
      <h1>Our Service</h1>
    </div>
    <!-- Abbreviated-->
    <div class="content1-wrp">
       <div class="fadeIn_upfadeIn">
       <!-- Abbreviated-->
       </div>
    </div>

The next step is to remove the class from the script.Display elements are displayed in the screen at the following points:
Then I guess it's a script that adds the scrollin class and deletes the scrollin class if it's off-screen

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

If you look at css, you can guess that you are thinking about removing the is-show class instead of the scrollin class, so I will change it to that one.

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

Wouldn't it be possible to display it with the above two corrections?

By the way, I forgot to close the section tag

2022-09-30 22:01

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656