Grow your CSS skills. Land your dream job.

animate element during scroll – pleaaase help!

  • # October 19, 2012 at 6:25 am

    Hey Guys – been racking my brains for the last day or so trying to get this to work. im pretty new to jquery so forgive me if this is really simple.

    i want to be able to set the opacity of an element to 1 during scrolling, and for it to set back to 0.5 when the user stops scrolling.

    is this possible?

    heres what ive got so far – for give me if its completely wrong -

    CSS:

    .sidetiggeriphone {opacity:0.5}

    JS:

    $(document).ready(function() {

    $(window).scroll(function () {

    $(‘.sidetiggeriphone’).animate({
    opacity: ’1′
    });
    });

    });

    # October 19, 2012 at 1:17 pm

    It’s *almost* there. You just need to figure out a callback for when the user has stopped scrolling.

    # October 19, 2012 at 6:05 pm

    @Sami,

    This isnt the answer but this may help you.

    http://jsfiddle.net/hYsRh/4/

    Resource: http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling

    # October 19, 2012 at 7:15 pm

    I’m not sure if you’re looking for the answer or hints…. so forgive me lol!

    $(window).scroll($.debounce( 250, true, function(){
    $(‘.sidetiggeriphone’).animate({
    opacity: ’1′
    });
    } ) );

    $(window).scroll($.debounce( 250, function(){
    $(‘.sidetiggeriphone’).animate({
    opacity: ’0.5′
    });
    } ) );

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

You must be logged in to reply to this topic.

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