FORUMS: list search recent posts

What technique is used to create this website?

COW Forums : Web Design (Wordpress, Joomla, etc.)

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT
Lucas Schwartz
What technique is used to create this website?
on Jun 13, 2020 at 2:28:44 pm

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


Return to posts index

Bret Williams
Re: What technique is used to create this website?
on Jun 13, 2020 at 3:42:53 pm

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

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


Return to posts index

Lucas Schwartz
Re: What technique is used to create this website?
on Jun 13, 2020 at 4:23:13 pm

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?


Return to posts index


Bret Williams
Re: What technique is used to create this website?
on Jun 13, 2020 at 4:31:31 pm

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


Return to posts index

Lucas Schwartz
Re: What technique is used to create this website?
on Jun 13, 2020 at 4:47:21 pm

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?


Return to posts index

Bret Williams
Re: What technique is used to create this website?
on Jun 13, 2020 at 5:30:02 pm

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


Return to posts index


Lucas Schwartz
Re: What technique is used to create this website?
on Jun 13, 2020 at 7:33:59 pm

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


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT
© 2020 CreativeCOW.net All Rights Reserved
[TOP]