CODEWITHSUNDEEP
jquery
Darius Serapinas
Darius Serapinas

Reputation: 11

jQuery explode effect on viewport

I'm trying to use explode effect when element is scrolled to the view port. how can i make it explode only when its visible? I guess this is easy to accomplish, but I'm very new at jQuery and can't find the answer. Sorry if it was asked before

Upvotes: 1

Views: 143

Answers (1)

Roger
Roger

Reputation: 3256

I am going to allow you to figure this one out. But here is the beginning code you need.

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>

Upvotes: 3

Related Questions