CODEWITHSUNDEEP
jqueryhtmljquery-animate
Deepak Kumar
Deepak Kumar

Reputation: 682

Animate a div with jquery when we scroll to its position

I am need of a jquery functionality through which when user is scrolling the page and a certain div comes in visible portion/middle of the screen some action happens. For example: Verelo.com. If you scroll down you will see a glob with two icons along with and an jquery animation with black arrows. I need similar functionality. I don't expect exact but at least something to be nearest.

For my efforts, I found this example : Verelo.com and did some googling. But didn't find anything yet.

Please help.

Upvotes: 3

Views: 7116

Answers (4)

sepehr
sepehr

Reputation: 5749

jQuery waypoints plugin do exactly this for you:

$('.thing').waypoint(function(direction) {
    // do stuff
}, { offset: 50 })

in above example handler function runs when top of the element is 50px from the top of the viewport. you can check if user is scrolling 'down' or 'up' with direction parameter.

for more advanced options and examples see jquery waypoints docs page.

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

They listen to the document's scroll event, and calculate the document's scrollTop compared to the element's position.

Basically, the parameters you'll need to consider in order to calculate whether or not an element is in viewport (taking only Y-axis scroll into consideration), is the document's scroll position, the height of the viewport, the position of the target element, and the height of the target element.

$(window).scroll(function() {

   var scrollTop = $(document).scrollTop();
   var viewportHeight = $(window).height();

   var targetPosition = $('#target').position().top;
   var targetHeight = $('#target').outerHeight();

   // viewport stretches from scrollTop to (scrollTop + viewportHeight)

});

You'll also need to figure out if .position().top or .offset().top is most suitable for you, depending on how the element is positioned, and on what it is that is being scrolled.

Demo

Upvotes: 4

Prasenjit Kumar Nag
Prasenjit Kumar Nag

Reputation: 13471

What you can do do is, analyze the source of this file http://www.verelo.com/js/themeFunctions.js from their site, it's not minified so You can dig how they are doing this:

Here's the list of necessary functions from that js file

$(window).scroll(function scrollDetection() {
                scrollLogic();
                });

So scrollLogic(); is being called when window is scrolled. Now whats in scrollLogic(); function. I am adding only the necessary part of it as it is big

function scrollLogic(){
    //If page is scrolled further than 100%, drop navigation menu from top and do a dance. Preferably an Irish River dance of sorts
    if( $(window).scrollTop() > howItWorksPosition) {
        window.sliderTimerOn = 'false';
        clearInterval(intervalId);

        if( $(window).scrollTop() > howItWorksPosition && $(window).scrollTop() < featuresPosition) {btnClick('.howItWorks'); executeScene(); window.ourCustomersFrame = 'false';}
.......
}

howItWorksPosition has been calculated before using

    howItWorksOffset = $('#howItWorks').offset();
howItWorksPosition = howItWorksOffset.top -180;

They are calling executeScene(); when window is scrolled up to that div and executeScene(); is doing the animation. You can check executeScene(); to find how they are doing the animation.

Upvotes: 0

Bryan
Bryan

Reputation: 6752

I just answered this question here haha, if element in sight, do something

The plugin located here, https://github.com/protonet/jquery.inview, gives you a trigger you can bind to, to determine when an element is in view

Upvotes: 0

Related Questions