Good night, I need to do a function, I was able to do the logic but I'm not able to execute ... The logic is as follows ... when scrolling the variable that started with 0 becomes 1, moved again from 1 becomes 2 and so goes in succession ... this count will have a maximum limit so that I can zero and start again ... because this count I will use to manipulate opacity
of div and transform:scale()
of div
How can I do it?
Follow my code I've been able to do so far
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
overflow-y: scroll;
height: 300em;
background-color: #000;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
border: 2px solid;
position: fixed;
text-align: center;
}
#box1,
#box2,
#box3 {
color: #ffffff;
font-size: 34px;
opacity: 0;
}
</style>
</head>
<body>
<div id="container">
<div id="box1">
<h1>2015</h1>
</div>
<div id="box2">
<h1>2016</h1>
</div>
<div id="box3">
<h1>2017</h1s>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scripttype="text/javascript">
window.addEventListener('load', function () {
var box1 = document.getElementById('box1'),
docHeight = document.documentElement.offsetHeight;
var box2 = document.getElementById('box2'),
docHeight = document.documentElement.offsetHeight;
var box3 = document.getElementById('box3'),
docHeight = document.documentElement.offsetHeight;
box1.style.display = "block";
box1.style.opacity = 1;
box2.style.display = "none";
box3.style.display = "none";
window.addEventListener('scroll', function () {
var scrolled = window.scrollY / (docHeight - window.innerHeight),
opacityStyle = scrolled;
var scrollRolle = window.scrollY / (docHeight - window.innerHeight),
SizeStyle = 'scale( 0.'+ x + ')';
if (scrolled >= 0) {
//show ou hidden
box3.style.display = "none";
box2.style.display = "none";
box1.style.display = "block";
//scroll
box1.style.transform = SizeStyle;
box1.style.opacity = opacityStyle;
//opacity
box2.style.opacity = 0;
box3.style.opacity = 0;
}
if (scrolled >= 0.5) {
//show ou hidden
box1.style.display = "none";
box3.style.display = "none";
box2.style.display = "block";
//scroll
box2.style.transform = SizeStyle;
box2.style.opacity = opacityStyle;
//opacity
box1.style.opacity = 0;
box3.style.opacity = 0;
}
if (scrolled >= 0.8) {
//show ou hidden
box1.style.display = "none";
box2.style.display = "none";
box3.style.display = "block";
//scroll
box3.style.transform = SizeStyle;
box3.style.opacity = opacityStyle;
//opacity
box1.style.opacity = 0;
box2.style.opacity = 0;
}
}, false);
});
</script>
</body>
</html>