2
我目前在使用視差滾動效果的網站上有一個使用惰性線條畫家創建的SVG路徑動畫。目前,該動畫在第三頁下來時是看不見的,當用戶滾動到該頁面時,它已經生成動畫。我對JavaScript和jQuery非常陌生,並且不確定如何在動畫處於視口中時觸發動畫。這是代碼,我目前有:如何在視口中觸發惰性線條畫家svg動畫
HTML:
<section id="intro1" class="background">
<div class="content-wrapper data-section">
<div id="icons"></div>
</div>
</section>
JS:
var pathObj = {
"icons": {
"strokepath": [
{
"path": "M654.4,95.7c-119.8-83.9-264-97.5-397-38.3C53.1,148.4-38.9,387.6,52,591.9",
"duration": 600
},
{
"path": "M182.9,227.1l0.2-0.1C293.6,95.2,490,78.2,621.8,188.7c36.9,31,61.8,63.2,82.1,106.9",
"duration": 600
},
{
"path": "M205.1,408.8c10.5-120,116.2-208.7,236.2-198.2c8,0.7,14.7,1.6,22.6,3.2",
"duration": 600
}
],
"dimensions": {
"width": 728,
"height": 606
}
}
};
$(document).ready(function(){
$('#icons').lazylinepainter(
{
"svgData": pathObj,
"strokeWidth": 10,
"strokeColor": "#4A90E2"
}).lazylinepainter('paint');
});
編輯的代碼:
function paintLine(){
$('#icons').lazylinepainter({
"svgData": pathObj,
"strokeWidth": 10,
"strokeColor": "#4A90E2"
}).lazylinepainter('paint');
}
var element_position = $('#intro1').offset().top;
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test) {
paintLine();
}
});
感謝您的建議,我試過這個,但無法獲得頁面滾動工作的事件監聽器,並且在元素位於視口中時註冊 –
您可以發佈您迄今嘗試過的內容嗎? – Shnibble
我在上面的代碼中添加了一個部分,以便您可以看到我目前爲止的內容 –