我有一个动画图标序列 ( http://codepen.io/Dingerzat/pen/XNjzVr )，当图标滚动到用户并显示在用户视野中时，我想激活它。我在这里找到了一些我认为是我需要的代码:Trigger event when user scroll to specific element - with jQuery
我已经尝试将它与我的代码片段合并在一起。虽然它似乎不起作用，但我不确定为什么。它似乎也使构建器崩溃。任何建议将不胜感激。
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Delayed image load in</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
</head>
<style>
</style>
<body>
<div class="red"></div>
<div id="gallery scroll-to">
<a href="#" data-click=".collapsible .collapsible-header:eq(0)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" id="float" alt="" width="125" /></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(1)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" id="float" alt="" width="125" /></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(2)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" id="float" alt="" width="125"/></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(3)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" id="float" alt="" width="125"/></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(4)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" id="float" alt="" width="125"/></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(5)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" id="float" alt="" width="125"/></a>
<a href="#" data-click=".collapsible .collapsible-header:eq(6)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" id="float" alt="" width="125"/></a>
<img src="" alt="" />
<img src="" alt="" />
<img src="" alt="" />
</div>
<br><br>
<div>
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Gah</div>
<div class="collapsible-body">
<p>Hello StackOverflow! SO's da' bomb diggidy!</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
<div class="collapsible-body">
<p>Why is the person who invests your money called a broker?</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
<div class="collapsible-body">
<p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
<div class="collapsible-body">
<p>I'd like to in this list.</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
<div class="collapsible-body">
<p>I'd like to in this list.</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
<div class="collapsible-body">
<p>I'd like to in this list.</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
<div class="collapsible-body">
<p>I'd like to in this list.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
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;
}
}
JS
$(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');
});
最佳答案
首先您需要将 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);
});
}
});
Codepen Demo
关于javascript - 当用户滚动到特定部分时触发动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41225692/