JavaScript: CSS and Conditions
I am new to Javascript.
I am looking forward to triggering the animation when a specific div is visible after scrolling.
I already found some code that checks the code if the div is not shown on the screen after scrolling, but trying to call animation or css or whatever.
Here is 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 the body to black when the element is visible.
How can we do this?
thank
source to share
If the item is Visible, you want to assign a class visible
or something similar. This lets you use CSS animations to animate what 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 can use element.className
Once that's done the css is easy. You just need 2 cases - one to show how the element should look when hidden, and the one 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;
}
Animates an background-color
element of an element.
source to share