The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // Grow your CSS skills // Land your dream job

Parallax count up scrolling

  • # December 11, 2012 at 2:14 pm

    Hello, i’am trying to use a parallax scrolling plugin to creat something like this . The hardest part is to increment the number like the one on the computer ( ). Do you guys having any ideas ? :/

    # December 12, 2012 at 8:27 am

    To me the easiest way would be to get the scroll value and put it through an algorithm to display that text, then write the text on window scroll. As it scrolls down the text can increment up until a max of 57% or however much. Something like:

    $(window).scroll( function() {
    var waypointPosition = 500;
    var scroll = $.scrollTop();
    scroll = scroll – waypointPosition;
    if (scroll > 57) { scroll = 57; }
    $(‘#percentage’).text(‘%’ + scroll);

    I haven’t tested it so that might not work – but could give you some ideas.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed