動畫瀏覽器的滾動

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); 
    } 
    } 
});