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 http://www.hispanicsatnbcu.com/part3.html . The hardest part is to increment the number like the one on the computer ( http://cl.ly/image/2j2P3k2s0l10 ). 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.

*May or may not contain any actual "CSS" or "Tricks".