Browse Source

added changing background

master
TooMuchRAM 3 years ago
parent
commit
19cbb58aa2
  1. 3
      index.html
  2. 20
      script.ts
  3. 16
      style.css

3
index.html

@ -8,6 +8,7 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="background"></div>
<p id="countdown"></p>
</body>
</html>
</html>

20
script.ts

@ -53,13 +53,22 @@ class CountdownBuilder {
}
}
function setStyleOptions(weeks: number) {
if (weeks < 1) {
document.querySelector("body").style.backgroundImage = "url('bg.jpg')";
function setStyleOptions(totaldays: number) {
const backgroundElement = document.getElementById("background");
if (totaldays < 35) {
backgroundElement.style.backgroundImage = "url('bg.jpg')";
let spans = document.querySelectorAll("span");
for (let i = 0; i < spans.length; i++) {
spans[i].style.color = "#dddddd";
}
backgroundElement.style.filter = "blur(0px) brightness(100%)";
}
if (totaldays < 35 && totaldays > 7 ) {
const percentage = (totaldays-7)/(35-7);
const blur = percentage * 10; //base is 10px
const brightness = 100 - Math.floor(percentage * 100);
backgroundElement.style.filter = "blur(" + blur + "px) brightness(" + brightness + "%)";
}
}
@ -93,7 +102,8 @@ function setNewTime() {
}
document.getElementById("countdown").innerHTML = new CountdownBuilder(timeRemaining).build();
setStyleOptions(timeRemaining.weeks);
const totaldays = timeRemaining.weeks*7 + timeRemaining.days;
setStyleOptions(totaldays);
}
@ -124,4 +134,4 @@ function isMobile(): boolean {
return mq.matches;
}
return false;
}
}

16
style.css

@ -8,6 +8,14 @@ body {
justify-content: center;
background-color: black;
font-family: 'HelveticaNeue Heavy', 'HelveticaNeue', 'HelveticaNeue Regular', monospace;
}
#background {
margin: auto;
height: 100vh;
display: flex;
width: 100vw;
position: absolute;
z-index: -1;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
@ -16,12 +24,12 @@ body {
#countdown {
text-align: center;
font-size: 90px;
margin-top: 0px;
margin-top: 0;
color: white;
text-shadow: 0px 0px 15px #000000;
margin-bottom: 0px;
text-shadow: 0 0 15px #000000;
margin-bottom: 0;
}
#countdown span {
color: #878787;
font-size: 70px;
}
}

Loading…
Cancel
Save