haha

4 years ago · ed6eb5476c
1 changed files with 57 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vesmir</title>
    <style>
        section{
            height: 100vh;
        }
        #hvezdy{
            color: white;
        }
    </style>
 </head>
 <body>
    <section id="uvod">
        void
    </section>
    <section id="dark">
        dark
    </section>
    <section id="hvezdy">
        hvezdy
    </section>
    <script>
        function handler() {
            let dark = document.querySelector('#dark');
            let dark_rect = dark.getBoundingClientRect();
            console.log(dark_rect.top);
            let value = Math.ceil(255 * (dark_rect.top / dark_rect.height));
            if (value >= 0 && value <= 255) {
                document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";
            }
            let hvezdy = document.querySelector("#hvezdy");
            let hvezdy_rect = hvezdy.getBoundingClientRect();
            console.log("hvezdy: " + (hvezdy_rect.height - hvezdy_rect.top));
            if (hvezdy_rect.height - hvezdy_rect.top > 0) {
                let opacity = (hvezdy_rect.top / hvezdy_rect.height);
                if (opacity >= 0 && opacity <= 1){
                console.log("opacity: " + opacity);
            }
            }
        }
        window.addEventListener('load', handler, false);
        window.addEventListener('scroll', handler, false);
        window.addEventListener('resize', handler, false);
    </script>
 </body>
 </html>