当元素进入视口时淡入
Fade in elements when they come into viewport
我试图在出现 "fade-me" 的 class 元素时淡入这些元素。我发现了这个 fiddle: http://jsfiddle.net/tcloninger/e5qad/ 并且它确实做了这件事,但是它重复地将不透明度值添加到进入视野的元素中。如果我尝试使用 Velocity 的过渡 slideUpIn 而不是不透明度,这会创建一个循环动画。所以我有以下代码:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).velocity('transition.slideUpIn', { stagger: 700 }).delay(1000)
}
});
});
});
它可以工作,但它会循环播放 SlideUpIn 动画。如何在出现的那个元素上只制作一次 运行 动画?
将 CSS class 切换为指标,然后检查它:
var $window = $(window);
var $doc = $(document);
var $hideMe = $('.hideme');
$doc.ready(function () {
$window.scroll(function () {
var bottom_of_window = $window.scrollTop() + $window.height();
$hideMe.each(function (i) {
var $elm = $hideMe.eq(i);
var bottom_of_object = $elm.offset().top + $elm.outerHeight();
if (bottom_of_window > bottom_of_object) {
if (!$elm.hasClass('in-viewport')) {
$elm.addClass('in-viewport');
$elm.velocity('transition.slideUpIn', { stagger: 700 }).delay(1000);
}
} else {
$elm.removeClass('in-viewport');
}
});
});
});
我试图在出现 "fade-me" 的 class 元素时淡入这些元素。我发现了这个 fiddle: http://jsfiddle.net/tcloninger/e5qad/ 并且它确实做了这件事,但是它重复地将不透明度值添加到进入视野的元素中。如果我尝试使用 Velocity 的过渡 slideUpIn 而不是不透明度,这会创建一个循环动画。所以我有以下代码:
$(document).ready(function() {
/* Every time the window is scrolled ... */
$(window).scroll( function(){
/* Check the location of each desired element */
$('.hideme').each( function(i){
var bottom_of_object = $(this).offset().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
/* If the object is completely visible in the window, fade it it */
if( bottom_of_window > bottom_of_object ){
$(this).velocity('transition.slideUpIn', { stagger: 700 }).delay(1000)
}
});
});
});
它可以工作,但它会循环播放 SlideUpIn 动画。如何在出现的那个元素上只制作一次 运行 动画?
将 CSS class 切换为指标,然后检查它:
var $window = $(window);
var $doc = $(document);
var $hideMe = $('.hideme');
$doc.ready(function () {
$window.scroll(function () {
var bottom_of_window = $window.scrollTop() + $window.height();
$hideMe.each(function (i) {
var $elm = $hideMe.eq(i);
var bottom_of_object = $elm.offset().top + $elm.outerHeight();
if (bottom_of_window > bottom_of_object) {
if (!$elm.hasClass('in-viewport')) {
$elm.addClass('in-viewport');
$elm.velocity('transition.slideUpIn', { stagger: 700 }).delay(1000);
}
} else {
$elm.removeClass('in-viewport');
}
});
});
});