JavaScript : CSS & Conditions

Question

I'm new to Javascript.

I'm looking forward to trigger an animation when a specific div is visible after a scroll.

I already found a code that code test if a div is visible on screen on not after a scroll but struggle to trigger the animation or css or whatever.

Here's the code i found : http://jsfiddle.net/W33YR/3/

var update = function(){
document.getElementById('console').innerHTML = visibleY(document.getElementById('element2')) 
    ? 
    "Inner element is visible" : 
    "Inner element is not visible";};

Let's say we want to change the background color of body to black when the element is visible.

How do we get to do that?

Thanks

Answer 1

If the element is Visible, you want to give a class of visible or something similar. That lets you use CSS animations to animate whichever property you want.

You want to use element.classList

Edit: element.classList is supported in many browsers, but not all. See caniuse.com/#search=classList You may want to use element.className

Once this is done, the css is easy. You simply want 2 cases - one to show how the element should look when hidden, and one to what it should look like when visible.

#element {
    /* Your styles */
    background-color:#00ff00;
    transition: background-color 1s;
}

#element .visible {
    background-color:#0000ff;
    transition: background-color 1s;
}

This animates the background-color of the element.

Answer 2

Just replace

"Inner element is visible" :

with

document.body.style.background = 'black' :