Welcome your Guests

Easy and quick snippet to welcome guests ,who visit your page, depending on the time of the day

HTML part of work boils dow tho these few lines

<div id=d1 class=d1>
<div id=d2 class=d2>
<div id=d3 class=d3>
<div id=d4 class=d4>
<div id=d5 class=d5>
</div>
</div>
</div>
</div>
</div>
</div>

Then You need to set Date Object

let d = new Date();

_min=d.getMinutes();
_hr=d.getHours();
_day=d.getDay();
_mn=d.getMonth();
_year=d.getFullYear();
let _d=d.getHours();

Then , depending on the time of the day, decide what will happen to background, caption and background-picture in your snippet. For example you may want to wish them 'Good morning!', if they land on your page between 6 and 10 a.m.

if(_d>=6 && _d<10){
d_t='mrng';
col='#62C8D2';
caption='Good morning!';
}

To run animation smoothly, best idea would be to use css 'animation' feature. I define animation properties separately for each landscape slice.

I used quite simple graphics to illustrate this approach, just kind of hills perespective

It goes without saying, that more complicated artwork may decisively improve looks of snippet