アニメーション化されたGIFをマスキングする - これはJqueryなどで可能でしょうか？

Question

誰かがウェブサイトのアニメーションGIFムービーをマスクする方法の提案があるのだろうかと思います。

例： - （あなたがhttp://iwdrm.tumblr.com/で見るもののような）正方形のアニメーションのループGIFムービー - アルファチャネル状マスクなどの星形 - アニメーションの背後には写真（ないソリッドカラー）である - 結果：の代わりに、正方形のアニメーションを見ると、スターマスクの背後に背景が見える星形のアニメーションが表示されます

現時点では理想的ではありませんが、別の低フレームのGIFでFlashを使用することは、モバイルやデスクトップで動作するJqueryやその他の非Flashソリューションを使用する提案があるかどうかを知りたいです。考え

アイデア： - PNGの正方形のGIFアニメーションなどのスターノックアウト上記オーバーレイアルファのようなPNGはそれ を通じてアニメーションを示して - 最も簡単かつ最速のが、可能 フラッシュを避けるためにしようとしているフラッシュ、 - 全体のGIFアニメーションを実行します。背景を最適にするために艶消し色で透明にする

おそらく、Flashが最適な解決策です - 私が間違いを犯したことがある場合は、この質問をそこに送ってください。

これを考慮していただきありがとうございます。

ありがとうございました！

Answer 1

。記事自体はPNG画像の可能性を強調していますが、技法はGIF画像で背景としても機能します。

<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> 

をそしてCSS：

このクリーンな例では、画像のマスキングのためのHTML + CSSを使用しています

ここ

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

がマスクされたアニメーションGIF

Answer 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> 

このような考えはどうですか？ところで、DIVなしで同じロジックをIMGだけで使用することは可能です

BGにはアニメーションGIFがあります。

あなたの必要とするフォームの透明領域であなたのload mask.pngをロードします。

別の方法：あなたがウェブ上に透明画像を使用する方法について多くのアイデアを見てJeff Croft's articleを読みたい

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