Grow your CSS skills. Land your dream job.

Slow down animation when last element reached (jQuery)

  • # February 5, 2013 at 3:53 am

    Hello all,

    Curious if anyone can suggest a method for slowing down a jQuery animation when the last element is reached. Thank You.

    Sample Code:


    $(window).load(function(){

    var lastAnimation = 0;
    var animationTime = 700; // in ms
    var quietPeriod = 0; // in ms, time after animation to ignore mousescroll
    var easing = 'easeInOutQuart';

    function scrollThis(event, delta, deltaX, deltaY) {
    var timeNow = new Date().getTime();

    // change this to deltaX/deltaY depending on which
    // scrolling dir you want to capture
    deltaOfInterest = deltaY;

    if (deltaOfInterest == 0) {
    // Uncomment to use deltaX
    // event.preventDefault();
    return;
    }

    // Cancel scroll if currently animating or within quiet period
    if(timeNow - lastAnimation < quietPeriod + animationTime) {
    event.preventDefault();
    return;
    }

    if (deltaOfInterest < 0) {
    if ($('.current').next('.row').length) {
    lastAnimation = timeNow;
    $('.current').removeClass('current').next('.row').addClass('current');
    $('html,body').stop().animate( {
    scrollTop: $('.current').offset().top -=80 }, animationTime, easing);
    }
    } else {
    if ($('.current').prev('.row').length) {
    lastAnimation = timeNow;
    $('.current').removeClass('current').prev('.row').addClass('current');
    $('html,body').stop().animate( {
    scrollTop: $('.current').offset().top -=80 }, animationTime, easing);
    }
    }

    return false;
    }
    $(document).mousewheel(scrollThis);
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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