Javascript 向下滚动时的元素动画 #首先 { 宽度：100%；高度：1000px；背景：红色； } #第二 { 宽度：100%；高度：1000px；背景：蓝色； } 欢迎_Javascript_Html_Css_Css Animations

Javascript 向下滚动时的元素动画 #首先 { 宽度：100%；高度：1000px；背景：红色； } #第二 { 宽度：100%；高度：1000px；背景：蓝色； } 欢迎

javascript html css

Javascript 向下滚动时的元素动画 #首先 { 宽度：100%；高度：1000px；背景：红色； } #第二 { 宽度：100%；高度：1000px；背景：蓝色； } 欢迎,javascript,html,css,css-animations,Javascript,Html,Css,Css Animations,我想在这里实现的是，在向下滚动文档时，我希望“h1”标记淡入并在我到达id=“second”时立即出现“。如何使用JS实现这一点。我试过几次，但都没有达到我想要的效果。我也浏览了关于滚动的动画，并得到了结果，但我并没有得到真正发生的事情。有人能帮我吗？我是JS的新手，尝试过各种各样的东西。谢谢。如果您想对多个元素使用淡入功能。为这些元素指定一个类，并使用已注释的循环。 $（文档）.ready（函数（）{ $（窗口）。滚动（函数（）{ //$（'.fadein'）。每个（函数（i）{ 变量bot

我想在这里实现的是，在向下滚动文档时，我希望“h1”标记淡入并在我到达id=“second”时立即出现“。如何使用JS实现这一点。我试过几次，但都没有达到我想要的效果。我也浏览了关于滚动的动画，并得到了结果，但我并没有得到真正发生的事情。有人能帮我吗？我是JS的新手，尝试过各种各样的东西。

谢谢。

如果您想对多个元素使用淡入功能。为这些元素指定一个类，并使用已注释的循环。

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
//$（'.fadein'）。每个（函数（i）{
变量bottom_of_元素=$（'#welcome'）.offset（）.top+$（'#welcome'）.outerHeight（）；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
if（窗口的底部>元素的底部）{
$（'welcome'）。动画（{'opacity'：'1'}，1000）；
}
// }); 
});
});
div{
高度：600像素
}
#首先{
背景：红色；
}
#第二{
背景：绿色；
}
#欢迎光临{
不透明度：0；
}

h1淡入
欢迎
请阅读
    <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>