1

I've been searching for a way to put a looping animation with alpha over top of web content for a few weeks now. The fact that I can't seem to find anyone asking this question or any answers to it makes me think the solution is so mind-numbingly easy that no one needs to ask it.

For an example of this effect go to bonfirestudios.com

They have used this technique multiple times throughout the website, most notably their logo on the main page. They have an animation loop playing over top of their website content. It could just be a video played with a screen blending mode, but my knowledge of html and css is so limited I'm not sure what I should be looking for.

It seems so simple in concept: play a video (with alpha data) on loop, but I can't find anything (or don't know where/how to look specifically) that explains how to achieve this effect. Notably, there are no video controls or anything to otherwise indicate it is a video that's playing. I've checked their code, but my limited understanding of javascript and the like find it hard to know what I'm looking for.

Any help or direction is greatly appreciated, thank you.

Averee Chaloupka
  • 11
  • 1
  • You mean [CCS3 animation](https://robots.thoughtbot.com/css-animation-for-beginners)? – Xorifelse Oct 06 '17 at 20:12
  • @Xorifelse no, they mean this [**transparent video**](http://db1qjvpyf4hse.cloudfront.net/780557ae3b80feb61da8c1e60cba01bf) (view in Chrome browser for best result). Transparency can be seen at site : http://bonfirestudios.com/ – VC.One Oct 06 '17 at 20:27
  • Aah, I see. Just a video (that supports alpha) playing in a html 5 attribute, with controls disabled. – Xorifelse Oct 06 '17 at 20:48
  • Possible duplicate of [Can I have a video with transparent background using HTML5 video tag?](https://stackoverflow.com/questions/4073303/can-i-have-a-video-with-transparent-background-using-html5-video-tag) – Xorifelse Oct 06 '17 at 20:48

1 Answers1

0

It is a video playing (right-click over the animation and you'll see such option as "save video").

The container format is webM (which can contain VP8 or VP9 video codec).
This format is from Google and supports transparency.

VC.One
  • 14,790
  • 4
  • 25
  • 57
  • So in a situation like this, does the webM video need to be hosted on something other than Youtube/Vimeo? I've done a little looking around and I'm seeing "content delivery network"s in the discussion, but I've never even heard of them, much less know how to use one for something like this. – Averee Chaloupka Oct 06 '17 at 20:09
  • I wouldn't expect a video to keep alpha if used on sites like Youtube & Vimeo since they actually **re-encode** the uploaded video files. You can host video files at your own website server just like other assets. I'd advise checking which browsers can handle webM format. Did you check via Android/iOS browser?What about Safari or Internet Explorer? Not everyone will use Chrome browser. – VC.One Oct 06 '17 at 20:23