[web] Help with animated image in CSS

Started by
7 comments, last by CmpDev 15 years, 9 months ago
I am having issues with making my animated gif image as I had much help from the photoshop forums perhaps theres some experts here. Basically, I have a logo with some areas of the image transparent for a website. What i then did was animate lightning effects to it for practice. Now when i uploaded the non animated version to my website it looked fine, but when i uploaded my animated version it went horrendous in terms of a particular layer. The layer is the second one in the list: 1.Background layer 2.rain layer (non animated rain, just a brush preset i made) 3.lightning layer (the animated layer) I have attatched two images to show you what happened between the changes. The blue cloudy background is the website's background not the actual image so the image background is transparent even though it doesn't quite look like it is, if you get me ? Let me know if i have missed out any important infomation that you may need to know to aide me in fixing my mistake. Thankyou in advanced. how it should look (before it was animated): http://www.photoshopforums.com/files/untitled2_137.jpg how it should NOT look (after animation was applied): http://www.photoshopforums.com/files/untitled_121.jpg
Advertisement
If your rain layer is a GIF then it does not support enough transparency information to suit your needs. I would instead use a PNG, however, be aware than PNG transparency is not fully supported in IE6 without the use of special CSS and/or tricks.

The same would apply to the lightning layer.

As far as I know, you cannot animate PNGs.

An actual page example would be best if you're looking for more detailed help.
One way to get a transparent gif to not have noise on a background (regardless of being a solid colour, or a pattern) is to add a matte colour to it during the 'save for web' dialogue. Choose a colour that is similar to the background (so sky blue in this case). I've done it for the logo here. No issues with IE6 as it's a gif.

However, i'm not sure how that will work once it's animated, but it should not be any different.
Quote:As far as I know, you cannot animate PNGs.


You can, but support is very limited. Firefox 2 doesn't support it for example.

Your best bet to get your logo animated is using flash.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Flash does seem the only option but i have never used it so by the time i have learnt it i probably would have wasted tons of my time :(

I'm surprised there is not global image format that can do everything and can be supported on all browsers yet that is as easy to make as gifs.
I'm not; the sort of file sizes it would involve were prohibitively large until recently (although some morons still think it's ok to post 2MB .gif files on websites...*sigh*).
Quote:Original post by Kylotan
I'm not; the sort of file sizes it would involve were prohibitively large until recently (although some morons still think it's ok to post 2MB .gif files on websites...*sigh*).


I agree with your sadness of large gifs. However, I don't see some animated rain of say 50x50px consisting of 3-4 frames, tiled across the page, taking up more than a few hundred kb.
It just sounds like the sort of thing that would look so awful that few people would want it. File formats have tended to follow need, and there's rarely a need for something that is both animated and tileable.
Quote:Original post by Karan Bhangui
Quote:Original post by Kylotan
I'm not; the sort of file sizes it would involve were prohibitively large until recently (although some morons still think it's ok to post 2MB .gif files on websites...*sigh*).


I agree with your sadness of large gifs. However, I don't see some animated rain of say 50x50px consisting of 3-4 frames, tiled across the page, taking up more than a few hundred kb.


Urg! that would look ghastly and surely most people would just block it, personally I even stop blinking text, never mind a blinking screen.

This topic is closed to new replies.

Advertisement