jQuery эффект взрыва на viewport

Question

Я пытаюсь использовать эффект разрыва, когда элемент прокручивается в порт представления. как я могу заставить его взорваться только тогда, когда он станет видимым? Я думаю, это легко сделать, но я очень новичок в jQuery и не могу найти ответ. Извините, если бы его задали до

Answer 1

Я собираюсь разрешить вам это. Но вот начальный код, который вам нужен.

JSFiddle

$(document).click(function() { 
 
    $("#toggle").toggle("explode"); 
 
}); 
 
$(document).scroll(function() { 
 
    var top = $(document).scrollTop(); 
 
    if (top > 600) $("#toggle").toggle("explode"); 
 
    if (top < 600) $('#two').hide(); 
 
});

#toggle { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #ccc; 
 
    position:fixed; 
 
} 
 
body { 
 
    height: 5000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 
 
<p>Click anywhere to toggle the box.</p> 
 
<div id="toggle"></div>