What technique is used to create this website?

[Lucas Schwartz]

Hello,

Would someone be able to tell me what technique is used to create this animated background image with the rotating windmills, and where can I find This type of background images, please?

Link address: http://www.hazmatlogistics.co.uk/dangerous_goods_classes.html

[Bret Williams]

Looks like an animated gif on top of a jpeg. The gif http://www.hazmatlogistics.co.uk/web_images/emotive/windTurbines/turbineThreeMAX35.gif

______________________________________________________
FCPX TUTORIALS – https://www.youtube.com/BretFX

[Lucas Schwartz]

So you propose that the designer of the webpage took a static image, from which he created several gif animations, Then laid it over the original image?

It sounds like a lot of effort to achieve the effect. I have checked the HTML portion of the webpage and noticed that the gif has been laid over the original image in three different locations.

I have never seen that technique being applied before.

Videos and GIF animations commonly used as backgrounds, but this solution seem truly unique to me.

What would be your workflow to create something like that?

[Bret Williams]

They did that because an animated gif of that size would likely look like crud. this way the only potential artifacts are the rotating blades. Doesn’t seem like that much work. Make a couple rotating gifs in FCPX or Apple Motion, etc. very creative. Saves on overhead which is the name of the game. The jpegs can look good highly compressed and the gifs provide the animation.

I’m not a coder, but it could be done in Elementor Pro with a background image and absolute positioning of the blades on top I think.

Other pages on the site that just have simpler elements like a blinking taillight or blinking airplane light seem to have just a background gif.

______________________________________________________
FCPX TUTORIALS – https://www.youtube.com/BretFX

[Lucas Schwartz]

Yes, what you suggesting would be a great starting point. But have you noticed the shadows that the turbine pole casts on the rotating blades and the constantly changing shadows? I can see how the rotating motion could be achieved, but how could the shadows be created?

[Bret Williams]

The blades are real video footage turned into a repeating gif. The jpeg is a freeze frame from said video. In fact, it only rotates 1/3 around before looping. Minimum data.

______________________________________________________
FCPX TUTORIALS – https://www.youtube.com/BretFX

[Lucas Schwartz]

Ahhh, now I get it! That is really clever. I will try to mimic that for my sites. Thank you for your reply.

[Andy Ford]

If you ever get a chance to take a class with Chris Converse, he does some really cool stuff like this and also dynamic response animations controlled with css