net - UK (2020-02)

CSS

To p Taking the time from

the morning, the scene is

transformed into a sunrise,

the sun animates low in the

sky to reflect the early time

Middle As the day

progresses a regular scene

emerges with the sun

higher in the sky and a

daytime background

Above Sunset enables a

similar set up to sunrise

in the graphics but the

difference here is the

position of the sun

bd.classList.add(“rise-back”);
};
if (hourNow >= 9 && hourNow < 16) timeslot = “day”;
if (hourNow >= 16 && hourNow < 18) {
timeslot = “sunset”;
bd.classList.remove(“day-back”);
bd.classList.add(“rise-back”);
}
if (hourNow >= 18 || hourNow < 6) {
timeslot = “night”;
bd.classList.remove(“day-back”);
bd.classList.add(“night-back”);
}

To move the sun, a slight pause has to be added
through a setTimout command. All this does is pause
for half a second (500 milliseconds). The angle of the
sun is worked out and the sun is moved between a
-70 degree and 70 degree angle. The pause enables
the animation to be added to the sun. During
nighttime, the hour angle is slightly more complex
because of hitting midnight, so there is a different
offset for before and after midnight. The sun is
changed to a moon by simply changing the colour to
a more appropriate light blue.

let pause = setTimeout(() => {
if (timeslot == “sunrise” || timeslot == “day” || timeslot ==
“sunset”) {
let angle = -70 + ((hourNow - 6) 12);
sun.style.transform = ‘rotate(‘ + angle + ‘deg)’;
}
if (timeslot == “night”) {
let angle;
if (hourNow >= 18 && hourNow <= 23) {
angle = -70 + ((hourNow - 18) 12);
} else if (hourNow >= 0) angle = -70 + ((hourNow + 5)

• 12);
  sun.style.backgroundColor = “#eafdff”;
  sun.style.transform = ‘rotate(‘ + angle + ‘deg)’;
  }
  }, 500);

The final section of code adds a listener to the SVG
that just checks to see if it’s finished loading. When
it has finished loading, access is available to any of
the IDs in the SVG. Towards the back of the image
is a red tint over the mountains, which needs to be
visible only on sunrise and sunset. Therefore, if it
happens to be day or night, that tint is made invisible
so it doesn’t affect the mountains with a red glow.

svg.addEventListener(“load”, function () {
let svgDoc = svg.contentDocument;
let mt = svgDoc.getElementById(“mountTint”);

if (timeslot == “day” || timeslot == “night”) mt.style.

opacity = 0;

}, false);

Save all your files and test this page in your web

browser and based on the current time, the login

screen will be changed and animated to match the

position of the sun or moon. Don’t forget that you

can test different times by using the hourNow variable

and setting other times.