Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
opacity ändern onScroll

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>