0

ウェブサイトのアニメーションGIFムービーをマスクする方法について誰かが提案を持っているかどうか疑問に思います。

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

現在の、しかし理想的ではない解決策は、モバイルのフォールバックとして透明性のある個別の低フレームGIFを備えたFlashを使用することですが、モバイルとデスクトップで機能するJqueryまたはその他の非Flashソリューションを使用した提案があるかどうかを知りたいと思います。

考慮されるアイデア：-正方形のGIFアニメーションの上にアルファのようなpngをオーバーレイします。たとえば、pngのスターノックアウトはアニメーションを表示します-Flashは最も簡単で最速ですが、可能な限りFlashを避けようとします-GIFアニメーション全体をマットカラーの透明度で最高の状態にします背景

おそらくFlashが最善の解決策ですが、見逃したことがある場合に備えて、この質問を送信するだけです。

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

アイデアを聞くのを楽しみにしています、ありがとう！

4

2 に答える 2

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>

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

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

その上に、必要なフォームの透明な領域を含むloadmask.pngがあります。

別の方法：

<div style="background-image: url('animated.gif');"><img src='mask.png'></div>
于 2012-05-08T06:43:12.763 に答える
1

ジェフ・クロフトの記事を読んで、Web上で透明な画像を使用する方法に関する多くのアイデアを確認してください。記事自体はPNG画像の可能性を強調していますが、実証された手法はGIF画像を背景としても機能します。

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

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

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

これは、マスクされたアニメーションGIFを使用したデモの例です。

于 2012-05-08T07:01:28.073 に答える