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