jQuery explode effect on viewport

Question

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

You need to check if the current "y coordinate" of the window is in the range of the "top y coordinate" of your element. — Ofir Baruch
– Ofir Baruch, Commented Mar 4, 2015 at 14:49

Roger · Accepted Answer · 2015-03-04 14:57:22Z

3

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>

answered Mar 4, 2015 at 14:57

Roger

3,2661 gold badge25 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darius Serapinas Over a year ago

Thanks for your reply, Neoaptt. Actually I'm building a page with FullPage.js plugin installed ( alvarotrigo.com/fullPage/ ). So I guess I should pass in section ID to the if statement not distance from top?

Collectives™ on Stack Overflow

jQuery explode effect on viewport

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related