Masking an animated GIF - would this be possible with Jquery or other?

Question

I am wondering if anyone has a suggestion on how to mask an animated GIF movie for a website.

Example: - square animated looping GIF movie (like what you would see at http://iwdrm.tumblr.com/) - alpha channel-like mask eg star shape - behind animation is a photograph (not solid color) - result: instead of seeing a square animation, you see an animation in a star shape where you can see the background behind the star mask

Current, but not ideal solution for me is to use Flash with separate low frame GIF with transparency as fallback for mobile but would love to know if you would have any suggestions using Jquery or other non-Flash solution that works on mobile and desktop.

Ideas considered: - overlay alpha-like png above the square GIF animation eg star knockout of png shows animation through it - Flash, which is easiest and fastest but trying to avoid Flash where possible - Do entire GIF animation with transparency with matte color to best the background

Perhaps Flash is the best solution - but just sending this question out there in case there is something I've missed which I'm sure is the case.

Thanks for considering this.

Look forward to hearing any ideas, thanks!

DaneSoul · Answer 1 · 2012-05-08T07:09:07.203

2

<div style='possition: absolute; z-index:0;'><img src='animated.gif'></div>
<div style='possition: absolute; z-index:1;'><img src='mask.png'></div>

What about such idea? BTW, it's possible to use same logic without DIVs, just with IMGs

On BG you have your animated gif.

On top of it your load mask.png with transperent area of what form you need.

Another way:

<div style="background-image: url('animated.gif');"><img src='mask.png'></div>

edited May 08 '12 at 07:09

answered May 08 '12 at 06:43

DaneSoul

4,491
3
21
37

Much appreciated DaneSoul - your sample is what we've been considering as well and greatly appreciate your time and thoughtfulness. Cheers! – Chumtarou May 08 '12 at 12:18

Community Driven Business · Accepted Answer · 2012-05-08T08:06:24.800

You would like to read Jeff Croft's article to see many ideas on how to use transparent images on the web. The article itself highlights possibilities of PNG images however techniques demonstrated works with GIF images as backgrounds as well.

This clean example uses HTML + CSS for image masking:

<a class="photo-container" href="http://www.flickr.com/photos/jcroft/2622915/">
  <img class="full-size-photo" src="http://static.flickr.com/2/2622915_8b78c1207d.jpg" 
    alt="CTA, a photo by Jeff Croft" />
  <img class="mask" src="http://media.jeffcroft.com/img/core/jeffcroft_logo_mask.png" 
    alt="Mask" />
</a>

And then the CSS:

a.photo-container {
  position: relative;
  display: block;
} 
img.mask {
  position: absolute;
  top: 0;
  left: 0;
}

Here is a demo example with masked animated GIF

Thank you and I really appreciate the thought and level of detail of your suggestion. I am closer to considering a PNG mask and the website and sample you've provided is great. It's been the top alternative to Flash so far. I'd like to give it a day to see if there are any other solutions that might exist that I've never heard of - but I'll be sure to select this as solved if no other suggestions come in. Thank you again! — Chumtarou, May 08 '12 at 12:17

Masking an animated GIF - would this be possible with Jquery or other?

2 Answers2