元素 animation 向下滚动

Question

    <style>
    #first
    {
    width:100%;
    height:1000px;
    background:red;
    }
    #second
    {
    width:100%;
    height:1000px;
    background:blue;
    }
    </style>
    
    <body>
    
       <div id="first">
       </div>
    
       <div id="second">
          <h1 id="welcome">Welcome</h1>
       </div>

   </body>

What I want to achieve here is that on scrolling down the document I wanted the "h1 tag to fade in and appear as soon as I reach id="second". How to do that with JS. I have tried a couple of things, but nothing is working out the way I want. I also browsed regarding animation on scrolling and got results but I m not getting what's happening really. Can someone plz help me out in this? I m completely new to JS and trying out various kinds of stuff. Thank you.我想在这里实现的是，在向下滚动文档时，我希望“h1 标签淡入并在我到达 id="second" 时立即出现。如何使用 JS 做到这一点。我已经尝试了几件事，但没有按照我想要的方式解决。我也浏览了关于 animation 的滚动并得到了结果，但我没有得到真正发生的事情。有人可以帮助我解决这个问题吗？我对 JS 完全陌生并尝试各种东西。谢谢。

Answer 1

If you want to use the fade-in for multiple elements.如果你想对多个元素使用淡入。 Give a class to these elements and use the loop which is already commented.为这些元素提供 class 并使用已注释的循环。

 $(document).ready(function() { $(window).scroll( function(){ // $('.fadein').each( function(i){ var bottom_of_element = $('#welcome').offset().top + $('#welcome').outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); if( bottom_of_window > bottom_of_element ){ $('#welcome').animate({'opacity':'1'},1000); } // }); }); });

 div { height: 600px } #first { background: red; } #second { background: green; } #welcome { opacity: 0; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>h1 fade-in</title> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div id="first"> </div> <div id="second"> <h1 id="welcome">Welcome</h1> </div> </body> </html>

元素 animation 向下滚动

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-20 14:12:55

元素 animation 向下滚动

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-20 14:12:55

解决方案1
0 已采纳 2020-09-20 14:12:55