petr 4 years ago
parent
commit
937b8d409f
  1. 11
      css.css
  2. 26
      index.html

11
css.css

@ -5,10 +5,7 @@
} }
h1{
text-align: center;
}
#hvezda{ #hvezda{
background-image: url("stars.jpg"); background-image: url("stars.jpg");
} }
@ -16,4 +13,10 @@ h1{
.zeme01{ .zeme01{
position: fixed; position: fixed;
opacity: 0; opacity: 0;
}
.zarovnani{
position:absolute;
left: 50%;
top: 50%;
} }

26
index.html

@ -14,31 +14,37 @@
</div> </div>
<div class="section" id="zacatek"> <div class="section" id="zacatek">
<h1>Ahoj</h1>
<div class="zarovnani">
<h1>Ahoj</h1>
</div>
</div> </div>
<div class="section" id="cerna"> <div class="section" id="cerna">
<div class="zarovnani">
<h1 style="color: aliceblue;">Ahoj</h1> <h1 style="color: aliceblue;">Ahoj</h1>
</div>
</div> </div>
<div class="section" id="hvezda"> <div class="section" id="hvezda">
<h1 style="color: aliceblue;">Ahoj</h1>
<div class="zarovnani">
<h1 style="color: aliceblue;">Ahoj</h1>
</div>
</div> </div>
<div class="section" id="odkrytí"> <div class="section" id="odkrytí">
<h1 style="color: aliceblue;">afff</h1>
<div class="zarovnani">
<h1 style="color: aliceblue;">Ahoj</h1>
</div>
</div> </div>
<div class="section" id="rotace"> <div class="section" id="rotace">
<h1 style="color: aliceblue;">afff</h1>
<div class="zarovnani">
<h1 style="color: aliceblue;">Ahoj</h1>
</div>
</div> </div>
@ -55,13 +61,15 @@
if (value >= 0 && value <= 255) { if (value >= 0 && value <= 255) {
document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")"; document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";
} }
let hvezdaa = document.querySelector('#hvezda');
let hvezda = document.querySelector('#hvezda');
let hvezda_rect = hvezda.getBoundingClientRect(); let hvezda_rect = hvezda.getBoundingClientRect();
let opacity =(hvezda_rect.top / hvezda_rect.height); let opacity =(hvezda_rect.top / hvezda_rect.height);
if (opacity >= 0 && opacity <= 1) { if (opacity >= 0 && opacity <= 1) {
console.log("Opacity: " +opacity); console.log("Opacity: " +opacity);
document.body.style.backgroundImage = "rgb(" + opacity + "," + opacity + "," + opacity + ")"; document.body.style.backgroundImage = "rgb(" + opacity + "," + opacity + "," + opacity + ")";
} }
let odkrytí = document.querySelector('#odkrytí'); let odkrytí = document.querySelector('#odkrytí');
let odkrytí_rect = odkrytí.getBoundingClientRect(); let odkrytí_rect = odkrytí.getBoundingClientRect();
let zeme_img = document.querySelector(".zeme01"); let zeme_img = document.querySelector(".zeme01");

Loading…
Cancel
Save