Animated Day Cycle

I’ve made a nice crossfading experiment in jQuery just for fun.

A while ago, while I was exploring the new zone Enedwaith in LOTRO, I decided to stand still on a hilltop and gaze into the distance for quite a while, taking a screenshot as the day grew brighter. This gave me three screenshots ranging from night to day.

A little later I combined the three screenshots and saved it as this GIF animation:

Spoiler: GIF animation

Dawn in LOTRO (Thrór’s Coomb)

But then earlier this week I had this thought that perhaps the transition could be made really neat by crossfading the images using jQuery. Yesterday I threw the idea together and you can now see the result by clicking the DEMO link below.

DEMO    DOWNLOAD

Note: If you use the slider for a faster speed and the current crossfade animation is slow, you have to wait a bit for the current stage to finish before the new speed is actually applied.

If you wish, you can download the lot (468 KB) and replace the three “stage” images with your own. Perhaps there’s another computer game you’d like to see a dawn effect from? You’re also welcome to adapt and post it on your own web site.

Leave a Reply