CODEWITHSUNDEEP
javascript
hSigma
hSigma

Reputation: 1

Scrolling div effect - how is it done?

If you scroll all the way down at the bottom of the page

http://www.wikihow.com/Organize-Business-Cards

there is a circular div that appears with a nice scrolling effect. Does anyone know how can this be done? I mean, is this a library of some kind, or custom code?

I have searched throughout the code, but apart from the HTML and some stylesheets, I couldn't find any code that does the actual effect.

Thank you in advance for your assistance :)

Upvotes: 0

Views: 587

Answers (3)

styler
styler

Reputation: 16481

What you want to do is create the element you want to animate out and give it fixed position at the bottom right of the page, you then want to give it negative right position greater than its width so it is hidden. Using JS you then want to check the window scroll position versus the window height and when the scroll is greater add a class of is-active to the element that transitions the right position from negative to 0.

Sample CSS

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    background: silver;
    position: fixed;
    bottom: 0;
    right: -500px;
    -moz-transition: right .3s ease-in-out;
    -webkit-transition: right .3s ease-in-out;
    -o-transition: right .3s ease-in-out;
    transition: right .3s ease-in-out;
}

.circle.is-active {
    right: 0;
}

JS

var circle = $('.circle'),
    windowHeight = $(window).height();

$(window).on('scroll', function() {   
    if( $('body').scrollTop() >= windowHeight ) {
        circle.addClass('is-active');
    } else {
        circle.removeClass('is-active');
    }
});

And here is a demo http://jsfiddle.net/uYFaq/1/

  • This could be greatly improved on as it will only ever animate the circle once you've started scrolling and there may be times when scroll isn't available, also the window scroll is constantly checking if the scrollTop is less than or greater than and adding or removing the class but I hope this helps.

Upvotes: 1

xdumaine
xdumaine

Reputation: 10329

You can use the jQuery scroll event and detect the scrolltop to trigger the div to hide or show when the scroll is at a certain point.

$(document).on('scroll', function() {
    var s = $(document).scrollTop();
    if(s > 300) {
       $('#popup').show();
    } else {
       $('#popup').hide();
    }
});

See this jsFiddle for an example of how to do this with just jQuery. Then you can replace show() and hide() with any animation you want.

Upvotes: 0

grigno
grigno

Reputation: 3198

I used this jQuery plugin:

http://imakewebthings.com/jquery-waypoints/

an example similar to yours:

http://imakewebthings.com/jquery-waypoints/examples/scroll-analytics/

Upvotes: 0

Related Questions