[英]Fade in elements with the same class only when their middle reach the viewport using jQuery waypoints
我有一个包含许多部分的一页网站。 我想使用jQuery Waypoint使它更具动态性。
应该是什么样子:
每当元素类为淡入淡入的元素进入视口(具有一定的偏移量)时,它都会获得一个特殊的类,该类将对元素进行动画处理(淡入淡出)- 但只有一个具有类且当前在视口中可见的元素。
我所取得的成就:
当具有该类的第一个元素进入视口时,具有该类的所有元素都会淡入。
HTML:
<section>Some content</section>
<section>
<div class="container fade-in-element">
<div class="row">
<div class="col-sm-4"> SOME CONTENT </div>
<div class="col-sm-4"> SOME CONTENT </div>
<div class="col-sm-4"> SOME CONTENT </div>
</div>
</div>
</section>
<section>
<div class="container fade-in-element">
<h1 class="heading">HEADING</h1>
<p>TEXT</p>
<p>TEXT</p>
</div>
</section>
CSS:.fade-in-element {不透明度:0; }
jQuery的:
jQuery(document).ready(function ($) {
$(function () {
var inview = new Waypoint.Inview({
element: $('.fade-in-wrap')[0],
entered: function (direction) {
$('.fade-in-element').addClass('animated2 fadeInLeft');
},
offset: '50%'
});
});
});
有人帮忙吗? 谢谢!
那就是你所需要的
$('.fade-in-element').each(function(){
var _this = this;
var inview = new Waypoint({
element: _this,
handler: function (direction) {
$(this.element).animate({'opacity': 1})
},
offset: '50%'
});
});
这是一个演示
您应该将其包装在if中。 您可以使用$(window).width和.height。检查窗口大小,以及使用$(document).scrollTop检查当前位置。 您可以使用这些值设置边界框,并检查div是否在其中。
var top = $(document).scrollTop();
var height = $(window).height();
$('.fade-in-wrap').each(function(){
var off = $(this).offset();
if(off.top > top && off.top < top+height) {
// Add the waypoint here. The element must be $(this)!
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.