.theDude{
position: relative;
}
.theDude:before{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
transform: translate(20px, 20px);
background-color: gray;
}
.theDude:after{
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
z-index: -2;
transform: translate(40px, 40px);
background-color: lightgray;
}
let els = document.getElementsByClassName('element')
document.addEventListener("scroll",e=>{
for (let i = 0; i<els.length; i++) {
if ((els[i].getBoundingClientRect().top>390) & (els[i].getBoundingClientRect().top<460)) {
els[i].classList.add('bigusElementus')
} else els[i].classList.remove('bigusElementus')
}
})
.fin{
animation: fadein 3s;
}
.fout{
animation: fadeout 3s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
display: flex;
flex-direction: column;
height:100vh;
margin: 0;
padding: 0;