Javascript 当用户滚动到特定部分时触发动画

我有一个图标的动画序列（），当图标滚动到用户的视野中时，我想激活它。我在这里找到了一些我认为是我需要的代码：

我已经尝试将它与我的代码片段合并在一起。虽然它似乎不起作用，我也不知道为什么。这似乎也让建筑商崩溃了。如有任何建议，将不胜感激

HTML

JS

---

首先，您需要将

float

id更改为类名，因为您在HTML上多次使用它，并且id必须是唯一的

然后，当您到达

gallery

元素时，使用代码触发事件，如下所示：

$(window).scroll(function() {
   var hT = $('#gallery').offset().top,
       hH = $('#gallery').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
      $(this).addClass('float').delay(i*200).fadeIn(3000);
    });
   }
});

---

那正是我想要的。谢谢你的帮助。我正在慢慢地学习一些东西（整个迷你网站是一条巨大的学习曲线）。我想帮你mate@SchroSorry问另一个问题@DaniP，当我将代码从SCSS更改为CSS时，为什么代码停止工作？@Schro你知道CSS预处理器吗？SCSS有另一种语法来编写css，需要正确转换。在codepen上，您可以通过单击css窗口上的箭头来查看编译后的css结果。这似乎是我要学习的一长串东西中的另一个。谢谢你给我指明了正确的方向，我已经开始研究它了。

@import "compass/css3";

.red {
    height:800px;
    background:red;
}

body { background: #e6e6e6; } 
#gallery { width:90%; 
  img { margin:1px; display: none; } 
} 

#float{
position: relative;
-webkit-animation: floatBubble 2s;
  animation-fill-mode: forwards;  
  }


@-webkit-keyframes floatBubble{
 0%{
        top:0;
        -webkit-animation-timing-function: ease-in;

   }


   33% {
      top: 50px;
      -webkit-animation-timing-function: ease-out;
   }
  66%{
        top:25px;
        -webkit-animation-timing-function: ease-in;

   }

  100%{
        top:50px;
        -webkit-animation-timing-function: ease-in;

   }

}

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
  $(this).delay(i*200).fadeIn(3000);
});


$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});

$(window).scroll(function() {
   var hT = $('#gallery').offset().top,
       hH = $('#gallery').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
      $(this).addClass('float').delay(i*200).fadeIn(3000);
    });
   }
});