opacity ändern onScroll
Schönen guten Tag,
ich stehe nun den 3. Tag vor ein und demselben Problem und erhoffe mir hiermit Hilfe/neue Denkanstöße.
Ich habe ein DIV und dieses soll die opacity 1 haben, wenn es genau im Center vom Bildschirm ist.
Wenn es noch zu weit unten ist, soll die opacity langsam auf 1 steigen und wenn es über dem Center ist, soll die opacity auf 0 sinken.
Ein Code zur detect von der scroll direction habe ich bereits:
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<script src="/image/jquery.js"></script>
<style>
body{
display:flex;
flex-direction:column;
min-height:1500px;
}
header{
background:#27abcd;
height:100px;
font-size:80px;
text-align:center;
}
nav{
font-size:40px;
text-align:center;
margin-bottom:500px;
display:block;
background:green;
}
.framebox{
border:2px solid black;
margin:120px auto;
width:60vw;
height:300px;
}
</style>
</head>
<body>
<header>HEADER</header>
<nav>Navigation<br>Bitte im Fenster Scrollen</nav>
<iframe class="framebox" id="frame1" src=""></iframe>
<iframe class="framebox" id="frame2" src=""></iframe>
<iframe class="framebox" id="frame3" src=""></iframe>
<iframe class="framebox" id="frame4" src=""></iframe>
<iframe class="framebox" id="frame5" src=""></iframe>
<iframe class="framebox" id="frame6" src=""></iframe>
<iframe class="framebox" id="frame7" src=""></iframe>
<iframe class="framebox" id="frame8" src=""></iframe>
<script>
function isElementPartiallyInViewport(el){
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
var vertInView = (rect.top <= windowHeight) && ((rect.top + rect.height) >= 0);
var horInView = (rect.left <= windowWidth) && ((rect.left + rect.width) >= 0);
return (vertInView && horInView)
}
var helper=false;
function isElementInViewport (el) {
if (typeof jQuery !== 'undefined' && el instanceof jQuery) el = el[0];
var rect = el.getBoundingClientRect();
var windowHeight = (window.innerHeight || document.documentElement.clientHeight);
var windowWidth = (window.innerWidth || document.documentElement.clientWidth);
return (
(rect.left >= 0)
&& (rect.top >= 0)
&& ((rect.left + rect.width) <= windowWidth)
&& ((rect.top + rect.height) <= windowHeight)
);
// console.log(el.id+'='+rect.height+'='+rect.top)
}
var stylevariable='<style>*{ font-size:40px;text-align:center}</style>';
window.addEventListener('scroll',function(){
elem=document.querySelectorAll('.framebox');
elem.forEach(function(ele){
var inVpFull = isElementInViewport(ele);
var inVpPartial = isElementPartiallyInViewport(ele);
if(inVpPartial==true){
ele.setAttribute('srcdoc',`${stylevariable} Element ist im Fenster`);
ele.style.border='5px solid orange';
if(inVpFull==true){
ele.setAttribute('srcdoc',`${stylevariable} Jetzt ist das Element ganz zu sehen`);
ele.style.height='500px';
ele.style.border='5px solid green';
}else{
ele.setAttribute('srcdoc',`${stylevariable} Jetzt sieht man es nur zum Teil`);
ele.style.border='5px solid orange';
}
}else{
ele.setAttribute('srcdoc',`${stylevariable} Element ist auserhalb des fensters`);
ele.style.border='5px solid red';
}
});
})
</script>
</body>
</html>