Reply To: CSS animation interferes with Javascript?

[Shikkediel]

I’ll post some general tips first… multiple values can either be set through a single statement or they can be chained. So below would both be valid :

$('.inner').css({'top': 2*scrollVar, 'opacity': (100-scrollVar )/100});

$('.inner')
.css('top', 2*scrollVar)
.css('opacity', (100-scrollVar)/100);

There’s no need to use the selector again in any case. But note the minor differences in using {, : and , that can be a bit tricky. I would only disable the CSS animation on the first scroll (it doesn’t matter a whole lot for performance but it is a bit more correct), something like this :

$(document).ready(function() {

var firstscroll = true;

$(window).on('load', function() {

$(this).scroll(function() {

if (firstscroll) {
firstscroll = false;
$('.inner').css('animation', 'none');
}

// all the other stuff

});
});
});

I think only the opacity of .inner will be animated, while the whole #billboard div should be positioned? You could change their CSS values separately then – so the 16% offset shouldn’t be an issue :

$('#billboard').css({'top': 2*scrollVar });

Otherwise, could you maybe update the pen to what the intention is? A parallel media query could also be built into the script if necessary.