cerna

4 years ago · 1aef9597a3
16 changed files with 55 additions and 33 deletions
--- a/css.css
+++ b/css.css
@ -1,23 +1,13 @@
 .container{
 .section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: auto;
 }
 .container .section{
    position: relative;
    width: 100%;
    height: 100%;
 }
 h1{
    text-align: center;
 }
 .container .section:nth-child(1){
    background-color: burlywood;
 }
 .container .section:nth-child(2){
    background-color: black;
 }
--- a/e1.jpg
+++ b/e1.jpg
--- a/e10.jpg
+++ b/e10.jpg
--- a/e11.jpg
+++ b/e11.jpg
--- a/e12.jpg
+++ b/e12.jpg
--- a/e13.jpg
+++ b/e13.jpg
--- a/e2.jpg
+++ b/e2.jpg
--- a/e3.jpg
+++ b/e3.jpg
--- a/e4.jpg
+++ b/e4.jpg
--- a/e5.jpg
+++ b/e5.jpg
--- a/e6.jpg
+++ b/e6.jpg
--- a/e7.jpg
+++ b/e7.jpg
--- a/e8.jpg
+++ b/e8.jpg
--- a/e9.jpg
+++ b/e9.jpg
--- a/index.html
+++ b/index.html
@ -8,39 +8,71 @@
    <title>Vesmir</title>
 </head>
 <body>
    <div class="container">
        <div class="section">
            <div class="content">
                <h1>Ahoj</h1>
            </div>
        <div class="section" id="zacatek">
                    <h1>Ahoj</h1>
        </div>
        <div class="section">
            <div class="content">
                <h1>Ahoj</h1>
            </div>
        <div class="section" id="cerna">
                <h1 style="color: aliceblue;">Ahoj</h1>
       </div>
        <div class="section">
            <div class="content">
        <div class="section" id="hvezda">
                <h1>Ahoj</h1>
            </div>
        </div>
        <div class="section">
            <div class="content">
                <h1>Ahoj</h1>
            </div>
        </div>
        <div class="section">
            <div class="content">
                <h1>Ahoj</h1>
            </div>
        </div>
        <div class="section">
            <div class="content">
                <h1>Ahoj</h1>
            </div>
        </div>
    </div>
    <script>
        function handler() {
            let cerna = document.querySelector('#cerna');
            let cerna_rect = cerna.getBoundingClientRect();
            console.log(cerna_rect.top);
            let value = Math.ceil(255 * (cerna_rect.top / cerna_rect.height));
            document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";
            let opacity = (cerna_rect.top / cerna_rect.height);
            console.log("Opacity: " +opacity); 
            if (value >= 0 && value <= 255) {
            }
        }
        window.addEventListener('load', handler, false);
        window.addEventListener('scroll', handler, false);
        window.addEventListener('resize', handler, false);
    </script>
--- a/stars.jpg
+++ b/stars.jpg