CSS animation interferes with Javascript?

[grimski]

I was split as to which forum to post this in but hopefully someone can help…

I have a CSS animation which you can see in the following CodePen.

http://codepen.io/moy/pen/RNymea

On load a div will fade in gracefully – great! The problem now is I had a bit of javascript which faded the same div out when the user scrolled the window, which not doesn’t work.

If you remove all the CSS from the .inner div the javascript works fine.

I thought this might be something to do with the opacity values conflicting but I tried setting visibility instead but that didn’t work at all. I would of thought the javascript would overwrite anything the CSS has done?

Hope someone can help!

[Paulie_D]

Not sure but it makes more sense to do this all with JS rather than animations & JS both.

Plus I’m not sure what your JS is actually achieving…why make the div transparent at all?

It’s still going to be there just see through which will look pretty odd.

[Shikkediel]

I agree with Paulie_D (fading is very easy with jQuery) but adding this to the script will solve the issue :

$('.inner').css('animation', 'none')

[grimski]

Thanks for the replies guys!

I’m open to changing the approach I’ve used, I just assumed the CSS Animation would be easier for the browser? But I suppose if I’m already using javascript to fade out when scrolling down the page (kinda parallax-y), I could just use it to fade in on load too?

Out of interest, is it possible to move the text with a top or bottom value as well as the opacity?

[Paulie_D]

Just remember that fadeIn/Out is not the same as fadeTo in Jquery…I suspect you want the latter as it only affects opacity and not the display property.

[Paulie_D]

Out of interest, is it possible to move the text with a top or bottom value as well as the opacity?

Only if it has a position value of something other than static..but I’m really not sure what it is you are trying to do.

“sort of parallax” doesn’t really explain it…at least not to me.

[Shikkediel]

Out of interest, is it possible to move the text with a top or bottom value as well as the opacity?

Certainly, very generally speaking it would look something like this :

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

$(this).scroll(function() {

var position = // some offset calculation
var dimness = 1-(($(this).scrollTop())/200);

$('.inner').css({'top': position, 'opacity' : dimness});          
});
});

Only if it has a position value of something other than static.

Note how the actual window onload trigger was added – currently everything would run on document ready which is a step before it (all files have been read but the window is yet to fully load).

[grimski]

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?

[Paulie_D]

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

…and Lo, it came to be.

[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! ;)

[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.

[grimski]

Sorry, here you go, I’ve updated the CodePen:

http://codepen.io/moy/pen/RNymea

I’ve included the Media Query with the min-height as well, you might need to change the min-height value depending on the size of your monitor so you can see both layouts in action.

The effect actually appears to work but I assume this has something to do with the code in CodePen. If you remove the Media Query @media screen and (min-width: 768px) and (min-height:768px) { from around the CSS you get what I’m seeing, where there is a jump in position when you scroll …hopefully that makes sense when you see it.

[Shikkediel]

First I want to mention that all the CSS could be replaced with this :

$('.inner').fadeIn(800);

Seems worth considering…

Edited – posted some incorrect info but having a bit of a hard time to currently wrap my brain around this one. Think I blew a coding fuse.

[Shikkediel]

Fog cleared somewhat – I was adding plain numbers to values in pixels. :-S
This ought to work (media queries removed for demonstration) :

Accounting for initial offset

[grimski]

@Shikkediel that is absolutely spot on, thanks!!

I think I would be responsible for the fog and the blown coding fuse, I could of explained it better/updated my example!

Do you think it would be worth while stopping the top value when the opacity is zero? Or would that not really make any impact/difference to the resources being used?

Thanks again, I think I need to get myself signed up to Code Academy or Treehouse to learn Javascript!

[Author]

Posts