Reply To: CSS animation interferes with Javascript?

[grimski]

Thanks! ;)

Having a play around (and google around) this nearly works too…

$(window).scroll(function(i){
    var scrollVar = $(window).scrollTop();
    $('.inner').css({'top': 2*scrollVar });
    $('.inner').css('animation', 'none').css({'opacity':( 100-scrollVar )/100});
})

As mentioned I have 2 layouts for this section. The first being the ‘base’ styles. For this the .inner div I’m animation has no top value set so the above actually works.

Where it falls down is I have a Media Query like the following:

@media screen and (min-width: 768px) and (min-height:768px) {

    #billboard {
        background-attachment: fixed;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        width: 100%;
    }

    #billboard .inner {
        top: 16%;
    }
}

So in larger browser windows the .inner div has top: 16%; set. I’m guessing this causes the div to jump to top: 0; when the javascript is triggered, then it starts moving/fading out. I could set a CSS value to top in the JS – but then it would effect the other layout, outside of the Media Query right?

Also if there’s a better way to write the code let me know, to say I’m no javascript expert is being kind to me! ;)