Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript CSS animation interferes with Javascript? Reply To: CSS animation interferes with Javascript?

#196827
grimski
Participant

Yeah to be honest this is completely aesthetic and has no functional purpose. I know, I shouldn’t maybe be doing it then …but it’s a landing page I can go to town on and it’s been a while since I’ve been able to get a bit more creative and play around with some fun effects ;)

Sorry, I feel like this should be in the JS Jungle now!


@Shikkediel
I had to add the .css('animation', 'none') like this or it broke, is there a way to include it in the 2nd .css()?

$(window).on('load', function() {
    $(this).scroll(function() {
        var position = 400-(($(this).scrollTop())/200);
        var dimness = 1-(($(this).scrollTop())/200);
        $('.inner').css('animation', 'none').css({'top': position, 'opacity' : dimness});          
    });
});

Using the script above the .inner div fade outs out smoothly when you start scrolling down the page. But the vertical position jumps to the value rather than a smooth animation transition. In my ‘base’ CSS there is no top value set on .inner, I’ve tried setting top: 0; but it didn’t make a difference.

I do have a vertical media query, when the browser window exceeds 768px in height the #billboard div is set to 100% height and width (like in my Codepen example), for this the .inner div has a top value of top: 16%;. Could it be the % value causing the issue?