From 8c565cdb355a668f6b2b0c9b3581ae44d00d557d Mon Sep 17 00:00:00 2001
From: petr <p.plachy2@seznam.cz>
Date: Mon, 19 Apr 2021 14:33:56 +0200
Subject: [PATCH] uprava javascript

---
 css.css    |  8 ++++++-
 index.html | 61 ++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 52 insertions(+), 17 deletions(-)
diff --git a/css.css b/css.css
index 0f1641d..8325748 100644
--- a/css.css
+++ b/css.css
@@ -9,5 +9,11 @@ h1{
     text-align: center;
     
 }
+#hvezda{
+    background-image: url("stars.jpg");
+}
 
-
+.zeme01{
+    position: fixed;
+    opacity: 0;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index ec9102e..8bbbd83 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,11 @@
     <title>Vesmir</title>
 </head>
 <body>
+        <div id="planet">
+            
+                <img class="zeme01" src="e1.jpg">
+            
+        </div>
         <div class="section" id="zacatek">
             
                 
@@ -24,23 +29,21 @@
     
         <div class="section" id="hvezda">
             
-                <h1>Ahoj</h1>
+                <h1 style="color: aliceblue;">Ahoj</h1>
+                
             
         </div>
-        <div class="section">
-            
-                <h1>Ahoj</h1>
+        <div class="section" id="odkrytí">
+            <h1 style="color: aliceblue;">afff</h1>
             
         </div>
-        <div class="section">
+        <div class="section" id="rotace">
+                <h1 style="color: aliceblue;">afff</h1>
             
-                <h1>Ahoj</h1>
-            
-        </div>
-        <div class="section">
             
-                <h1>Ahoj</h1>
         </div>
+        
+        
     
 
     <script>
@@ -49,14 +52,40 @@
             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) {
+                document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";     
+                }
+            let hvezdaa = document.querySelector('#hvezda');
+            let hvezda_rect = hvezda.getBoundingClientRect();
+            let opacity =(hvezda_rect.top / hvezda_rect.height);
+            if (opacity >= 0 && opacity <= 1) {
+                console.log("Opacity: " +opacity);  
+                document.body.style.backgroundImage = "rgb(" + opacity + "," + opacity + "," + opacity + ")";     
+                }
+            let odkrytí = document.querySelector('#odkrytí');
+            let odkrytí_rect = odkrytí.getBoundingClientRect();
+            let zeme_img = document.querySelector(".zeme01");
+            console.log("odkrití:" + (odkrytí_rect.height - odkrytí_rect.top));
+            if (odkrytí_rect.height - odkrytí_rect.top > 0) {
+                let opacity = 1 - (odkrytí_rect.top / odkrytí_rect.height);
+                console.log("zjevení opacity:" + opacity);
+                zeme_img.style.opacity = opacity;
+            
                 
-                
-            }
+                }
+            let rotace = document.querySelector('#rotace');
+            let rotace_rect = rotace.getBoundingClientRect();
+            console.log("rotace:" + (rotace_rect.height - rotace_rect.top));
+            if (rotace_rect.height - rotace_rect.top > 0) {
+                let cislo = Math.ceil(13 * (1 - (rotace_rect.top / rotace_rect.height)));
+                console.log("cislo:" + cislo);
+                if (cislo >= 1 && cislo <= 13) {
+                        zeme_img.setAttribute("src", "e" + cislo + ".jpg");
+                }
+                }
+            
+            
+            
             
 
 
