Creative Communities of the World Forums

The peer to peer support community for media production professionals.

Forums Web Design (WordPress, Joomla, etc.) What technique is used to create this website?

  • What technique is used to create this website?

  • Lucas Schwartz

    June 13, 2020 at 2:28 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

  • Bret Williams

    June 13, 2020 at 3:42 pm

    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

    June 13, 2020 at 4:23 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?

  • Bret Williams

    June 13, 2020 at 4: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

  • Lucas Schwartz

    June 13, 2020 at 4:47 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?

  • Bret Williams

    June 13, 2020 at 5:30 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

  • Lucas Schwartz

    June 13, 2020 at 7:33 pm

    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

    September 24, 2020 at 3:49 am

    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

Viewing 1 - 8 of 8 posts

Log in to reply.

We use anonymous cookies to give you the best experience we can.
Our Privacy policy | GDPR Policy