滾動時延遲SVG動畫

我想延遲SVG動畫的開始。這裏的鏈接 https://jsfiddle.net/h0bLgc2q/1/滾動時延遲SVG動畫

<svg version="1.1" id="line" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="20px" xml:space="preserve"> 
    <path class="line-delay" fill="none" stroke="black" stroke-width="1" stroke-dasharray="10,10" d="M5 10 l200 0"></path> 
</svg> 
.line-delay { 
    stroke-dasharray: 200; 
    animation: draw-svg 3s linear normal; 
} 

@keyframes draw-svg { 
    from { 
    stroke-dashoffset: 200; 
    } 
    to { 
    stroke-dashoffset: 0; 
    } 
}

但我要開始動畫，當用戶滾動到該行。所以我不能理解如何做到這一點。

來源

2016-03-10 allaspaniel

基本上你需要獲得一個）的SVG元素的offsetTop屬性和b）頁面的scrollTop的（在onscroll事件或更好，如果通過requestFrameAnimation完成）。當b> = a時，將一個類應用於爲動畫添加星號的svg。看看SO和B的任務 – fcalderan

基於此answer，我修改了相應的代碼以獲得您想要的結果。現在動畫開始滾動時。

結果：Jsfiddle

function isElementInViewport(elem) { 
var $elem = $(elem); 

// Get the scroll position of the page. 
var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
var viewportTop = $(scrollElem).scrollTop(); 
var viewportBottom = viewportTop + $(window).height(); 

// Get the position of the element on the page. 
var elemTop = Math.round($elem.offset().top); 
var elemBottom = elemTop + $elem.height(); 

return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

// Check if it's time to start the animation. 
function checkAnimation() { 
var $elem = $('svg .line-delay'); 

// If the animation has already been started 
if ($elem.hasClass('start')) return; 

if (isElementInViewport($elem)) { 
    // Start the animation 
    //$elem.addClass('start'); 
    $elem.attr("class", "line-delay start"); 
} 
} 

// Capture scroll events 
$(window).scroll(function(){ 

    checkAnimation(); 
});

來源

2016-03-10 09:55:32 silviagreen

滾動時延遲SVG動畫

回答

相關問題