On this JavaScript tutorial, we’ll be implementing a dynamic wallpaper for any web site to show a special background picture and greeting based mostly on the time of day.
Dynamic wallpapers (such as you’ll discover on MacOS) lend a side of personalisation to your web site. This dynamism will be something from altering the background picture to match the climate, or displaying enjoyable details in regards to the consumer’s present location.
1. Markup
We’ll start by including the background and greeting parts to the web page utilizing HTML:
1 |
<div id="background"> |
2 |
<h1 id="greeting"></h1> |
3 |
</div>
|
Nicely, that was simple.
2. Styling With CSS
For our styling, we’ll set our background picture to be the complete top of the viewport and place the greeting within the centre. We’ll additionally place a barely darker overlay over the background to enhance the distinction between our textual content and background picture.
That is what our CSS seems like:
1 |
#background { |
2 |
top: 100vh; |
3 |
background-size: cowl; |
4 |
background-position: heart; |
5 |
show: flex; |
6 |
align-items: heart; |
7 |
justify-content: heart; |
8 |
text-align: heart; |
9 |
}
|
10 |
|
11 |
#background::earlier than { |
12 |
content material: ''; |
13 |
width: 100%; |
14 |
prime: 0; |
15 |
top: 100%; |
16 |
left: 0; |
17 |
place: absolute; |
18 |
background-color: rgba(0, 0, 0, 0.1); |
19 |
}
|
20 |
|
21 |
#greeting { |
22 |
coloration: white; |
23 |
place: relative; |
24 |
padding: 16px; |
25 |
}
|
3. Setting Up the JavaScript Performance
For our dynamic wallpaper, we’ll have to determine what occasions we need to replace the background. On this tutorial, these are the occasions we’ll be utilizing:
- Early hours: 12am to 6am
- Morning: 6am to 12pm
- Afternoon: 12pm to 5pm
- Night: 5pm to 9pm
- Evening: 9pm to 12am
We need to set a background picture and greeting for every of those occasions so we’ll create an array to deal with these values.
1 |
const backgrounds = [ |
2 |
{
|
3 |
min: 0, |
4 |
max: 6, |
5 |
src: "", |
6 |
greeting: "Quiet Hours 😴" |
7 |
},
|
8 |
{
|
9 |
min: 6, |
10 |
max: 12, |
11 |
src: "", |
12 |
greeting: "It's going to be a beautiful day 😊" |
13 |
},
|
14 |
{
|
15 |
min: 12, |
16 |
max: 17, |
17 |
src: "", |
18 |
greeting: "Good afternoon" |
19 |
},
|
20 |
{
|
21 |
min: 17, |
22 |
max: 21, |
23 |
src: "", |
24 |
greeting: "Good evening" |
25 |
},
|
26 |
{
|
27 |
min: 21, |
28 |
max: 24, |
29 |
src: "", |
30 |
greeting: "Good night" |
31 |
}
|
32 |
];
|
Subsequent, we’ll assign the weather we’ll be updating to variables:
1 |
const backgroundEl = doc.getElementById("background"); |
2 |
const greetingEl = doc.getElementById("greeting"); |
Outline the Logic
Now we have to outline the logic to deal with displaying the background and greeting to the consumer:
First, we’ll get the present hour for the consumer utilizing the Date() constructor and the getHours() technique:
1 |
const getCurrentHour = () => { |
2 |
const currentDate = new Date(); |
3 |
return currentDate.getHours(); |
4 |
};
|
The new Date() constructor returns the present time based mostly on the consumer’s system and getHours() returns the present hour in 24-hour format.
Subsequent, we’ll want to check the time values in our backgrounds array and return the background object which comprises the present hour in its vary.
Utilizing the array.discover() technique, we’ll search for the background object the place the min time is lower than or equal to the present hour and the max time is bigger than the present hour.
1 |
const currentHour = getCurrentHour(); |
2 |
|
3 |
const currentBackground = backgrounds.discover((background) => |
4 |
background.min <= currentHour && background.max > currentHour |
5 |
);
|
For instance, if the present hour is 11 we’ll need to get the values for the morning object which has a minimal of 6 and most of 12.
As soon as we’ve gotten the corresponding background object, we’ll replace our parts with the values contained within the object. That is what our perform seems like:
1 |
const setBackground = () => { |
2 |
const currentHour = getCurrentHour(); |
3 |
|
4 |
const currentBackground = backgrounds.discover((background) => |
5 |
background.min <= currentHour && background.max > currentHour |
6 |
);
|
7 |
|
8 |
backgroundEl.model.backgroundImage = `url(${currentBackground.src})`; |
9 |
greetingEl.innerHTML = currentBackground.greeting; |
10 |
};
|
Set off With an Occasion Listener
We will move this perform to a load occasion listener to set the background when a consumer first lands on our web site.
1 |
window.addEventListener("load", () => { |
2 |
setBackground(); |
3 |
});
|
Add Interval
Lastly, we are able to create a setInterval() technique to replace the background each hour – this manner the background and greeting will get up to date with out the consumer needing to reload the webpage.
1 |
window.addEventListener("load", () => { |
2 |
setBackground(); |
3 |
|
4 |
const everyHour = 1000 * 60 * 60; |
5 |
setInterval(setBackground, everyHour); |
6 |
});
|
Conclusion
And with that, we’ve created a dynamic wallpaper with personalised greetings for our web site. Don’t overlook to test again later to see the way it’s modified!
Background Graphics on Envato Components
These are a few of the illustrations I used for the dynamic wallpaper—there are actually 1000’s extra graphic backgrounds you’ll be able to select from on Envato Components!
