I'm at the very beginning of learning JS, right now what's bugging me is I want to animate the opacity of a div when scrolling is detected I have 2 options from what i've found online:
window.addEventListener('scroll',function());
or
window.onscroll()=function();
Using the first variant, and the console, I see it is detecting the scrolling but here comes my trouble.
Let:
let loadingscreen=document.getElementsByTagName('div')[3];
loadingscreen.style.opacity="0";
Why won't this work?
window.addEventListener('scroll',()=>{
console.log("!"); //detecting the scroll in the console
setInterval(function(){loadingscreen.style.opacity+=".1"},100);});`
The opacity only changes once, i believe it is from 0 to 0.1
Is it that my opacity goes from 0 to 0.1 to 0.11 to 0.111? Tho i cant understand why that would be. Thank you for taking your time to read this, any response is apreciated!!
I know the code doesn't look that tidy, i promise it is better in my vsc, im having a little trouble with stackoverflow
This is because you are adding a string to a string, not a number to another number. If you want to add 0.1 of opacity when scrolling is detected, you would have to parse the opacity value with parseInt(loadingscreen.style.opacity), then add 0.1 and then apply it to loadingscreen.style.opacity.
However:
scroll events can fire at a high rate
see https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event
So, if you scroll one time, your event-handler will maybe fire 20 times, and everytime there is an eventlistener added. So, first you should add { once: true } to your eventListener options.
Secondly, you are adding more opacity every 100 milliseconds.
If you want a nice animation, you should add a class and animate the opacity in CSS.
Consider the following example:
let loadingscreen = document.querySelector(".loadingscreen");
window.addEventListener("scroll", () => {
loadingscreen.classList.add("scrolled");
}, {
once: true
}
);body {
height: 200vh;
}
div.loadingscreen {
margin-top: 25%;
height: 50%;
width: 100%;
background: red;
opacity: 0;
}
div.loadingscreen.scrolled {
opacity: 1;
transition: opacity 1s linear;
}<div class="loadingscreen"></div>const loadingscreen = document.getElementsByTagName('div')[2];
loadingscreen.style.opacity= 0;
let incOpa = 0
function callIncOpacity(){
let refreshIntervalId = setInterval(function(){
console.log(incOpa); //detecting the scroll in the console
if(incOpa < 1) {
incOpa += 0.1;
loadingscreen.style.opacity = incOpa
}
}, 10);
setTimeout(function(){
clearInterval(refreshIntervalId);
}, 100)
}
window.addEventListener('scroll',()=>{
if(incOpa < 1) callIncOpacity()
}); .content-container,
.second-div,
.third-div{
height: 500px;
width: 100%
}<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div class="content-container">
<p>
Test content
</p>
</div>
<div class="second-div">
<p>
test content 1
</p>
</div>
<div class="third-div">
<p>
test content 2
</p>
</div>
</body>
</html>Two things to be kept in mind.