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

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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 –


    .sidetiggeriphone {opacity:0.5}


    $(document).ready(function() {

    $(window).scroll(function () {

    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


    This isnt the answer but this may help you.


    # 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(){
    opacity: ‘1’
    } ) );

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

Viewing 4 posts - 1 through 4 (of 4 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