uprava javascript

4 years ago · 8c565cdb35
2 changed files with 52 additions and 17 deletions
--- 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;
+}
--- 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>
+        <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");
+                }
+                }
+            
            
            
-            }