动画浏览器的滚动

Question

我已经使用jQuery的像下面的代码

$(window).load(function() { 
    $(".shuffle").each(function() { 
    $(this).circulate({ 
     speed: Math.floor(Math.random()*300) + 100, 
     height: Math.floor(Math.random()*100) - 70, 
     width: Math.floor(Math.random()*100) - 70 
     }); 
     }); 
    }); 

线的圆形动画作品在页面加载的罚款。

的HTML是像

<div id="target"> 
    <div class="shuffle"></div> 
    <div class="shuffle"></div> 
    <div class="shuffle"></div> 
    <div class="shuffle"></div> 
    </div> 

现在我想的是，当用户向下滚动浏览器，因为他达到与ID目标部分的股利，动画应该开始...

请帮帮我 ！！！

Answer 1

var isElementInViewport = function ($element) { 
    //element has to be a jQuery element with length > 0 
    var domElement = $element[0]; 
    var height = $element.outerHeight(); 
    var rect = domElement.getBoundingClientRect(); 
    return (
     rect.top >= 0 - height && 
     rect.bottom <= $(window).height() + height 
    ); 
}; 

var shuffle = function($element) { 
//only shuffle elements within the target 
$(".shuffle", $element).each(function() { 
    $(this).circulate({ 
     speed: Math.floor(Math.random()*300) + 100, 
     height: Math.floor(Math.random()*100) - 70, 
     width: Math.floor(Math.random()*100) - 70 
    }); 
    }); 
} 

var flag = false; 
var $target = $('#target'); 
$(document).on('scroll', function(){ 
    if(isElementInViewport($target)){ 
    if (!flag) { 
     flag = true; 
     shuffle($target); 
    } 
    } 
});