In this JavaScript tutorial, we’ll be implementing a dynamic wallpaper for any website to display a different background image and greeting based on the time of day.
Dynamic wallpapers (like you’ll find on MacOS) lend an aspect of personalisation to your website. This dynamism can be anything from changing the background image to match the weather, or displaying fun facts about the user’s current location.
Dynamic Wallpaper Demo
Here’s a look at the dynamic wallpaper we’ll be creating (which will appear differently depending on the time of day you’re seeing it!):
Now let’s build it.
Background Graphics on Envato Elements
These are some of the illustrations I used for the dynamic wallpaper—there are literally thousands more graphic backgrounds you can choose from on Envato Elements!
1. Markup
We’ll begin by adding the background and greeting elements to the page using HTML:
1 | <divid="background"> |
2 | <h1id="greeting"></h1> |
3 | </div> |
Well, that was easy.
2. Styling With CSS
For our styling, we’ll set our background image to be the full height of the viewport and place the greeting in the centre. We’ll also place a slightly darker overlay over the background to improve the contrast between our text and background image.
This is what our CSS looks like:
1 | #background{ |
2 | height:100vh; |
3 | background-size:cover; |
4 | background-position:center; |
5 | display:flex; |
6 | align-items:center; |
7 | justify-content:center; |
8 | text-align:center; |
9 | } |
10 | |
11 | #background::before{ |
12 | content:''; |
13 | width:100%; |
14 | top:0; |
15 | height:100%; |
16 | left:0; |
17 | position:absolute; |
18 | background-color:rgba(0,0,0,0.1); |
19 | } |
20 | |
21 | #greeting{ |
22 | color:white; |
23 | position:relative; |
24 | padding:16px; |
25 | } |
3. Setting Up the JavaScript Functionality
For our dynamic wallpaper, we’ll need to decide what times we want to update the background. In this tutorial, these are the times we’ll be using:
- Early hours: 12am to 6am
- Morning: 6am to 12pm
- Afternoon: 12pm to 5pm
- Evening: 5pm to 9pm
- Night: 9pm to 12am
We want to set a background image and greeting for each of these times so we’ll create an array to handle these values.
1 | constbackgrounds=[ |
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 | ]; |
Next, we’ll assign the elements we’ll be updating to variables:
1 | constbackgroundEl=document.getElementById("background"); |
2 | constgreetingEl=document.getElementById("greeting"); |
Define the Logic
Now we need to define the logic to handle displaying the background and greeting to the user:
First, we’ll get the current hour for the user using the Date() constructor and the getHours() method:
1 | constgetCurrentHour=()=>{ |
2 | constcurrentDate=newDate(); |
3 | returncurrentDate.getHours(); |
4 | }; |
The new Date() constructor returns the current time based on the user's device and getHours() returns the current hour in 24-hour format.
Next, we’ll need to compare the time values in our backgrounds array and return the background object which contains the current hour in its range.
Using the array.find() method, we’ll look for the background object where the min time is less than or equal to the current hour and the max time is greater than the current hour.
1 | constcurrentHour=getCurrentHour(); |
2 | |
3 | constcurrentBackground=backgrounds.find((background)=> |
4 | background.min<=currentHour&&background.max>currentHour |
5 | ); |
For example, if the current hour is 11 we’ll want to get the values for the morning object which has a minimum of 6 and maximum of 12.
Once we’ve gotten the corresponding background object, we’ll update our elements with the values contained in the object. This is what our function looks like:
1 | constsetBackground=()=>{ |
2 | constcurrentHour=getCurrentHour(); |
3 | |
4 | constcurrentBackground=backgrounds.find((background)=> |
5 | background.min<=currentHour&&background.max>currentHour |
6 | ); |
7 | |
8 | backgroundEl.style.backgroundImage=`url(${currentBackground.src})`; |
9 | greetingEl.innerHTML=currentBackground.greeting; |
10 | }; |
Trigger With an Event Listener
We can pass this function to a load event listener to set the background when a user first lands on our website.
1 | window.addEventListener("load",()=>{ |
2 | setBackground(); |
3 | }); |
Add Interval
Finally, we can create a setInterval() method to update the background every hour - this way the background and greeting gets updated without the user needing to reload the webpage.
1 | window.addEventListener("load",()=>{ |
2 | setBackground(); |
3 | |
4 | consteveryHour=1000*60*60; |
5 | setInterval(setBackground,everyHour); |
6 | }); |
Conclusion
And with that, we’ve created a dynamic wallpaper with personalised greetings for our website. Don’t forget to check back later to see how it’s changed!
