Welcome to WebmasterWorld Guest from 54.144.48.103

Forum Moderators: not2easy

Message Too Old, No Replies

Fading background

Can it be done?

     
2:26 am on Sep 23, 2001 (gmt 0)

10+ Year Member



Can anyone please tell me if it is possible to fade one background into another. I am trying to make a webpage for my wife at [angelfire.com...] and I want to take the current background picture and make it fade into another picture of her about a minute after the page loads. Is that possible, and if so, how. Thanks alot in advance!
2:48 am on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You can use an animated gif for the background. I don't think it will work in netscape, but it works in IE. Your other option is some sort of timeline using layers.
2:57 am on Sep 23, 2001 (gmt 0)

10+ Year Member



How do I do a timeline using layers?
3:57 am on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If it doesn't actually have to fade, you could use a meta-refresh tag:

<meta http-equiv="Refresh" content="10; URL=http://www.">

Content represents seconds.
4:10 am on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sorry about the timeline suggestion, after looking at it, I doubt it would work. Time to go to sleep. :)
6:22 am on Sep 23, 2001 (gmt 0)

10+ Year Member



Ok Marshall(or anyone else), how do I do it with a picture I already have in my directory... such as jan2.jpg?
7:37 am on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



southernpaw,

Basically, you have to create a whole other page - same content, but with the new background. If your main page is say www.home1.html with background 1.gif, then the "Refresh" page can be www.home2.html with background 2.gif. You can also use this technique to create a slide-show effect, but you have to account for the download time of the image. The page will change regardless if the image is fully downloaded. That's the drawback to this option. I also noticed you use a fixed background. Remember, that doesn't work in all browsers.

9:11 am on Sep 23, 2001 (gmt 0)

10+ Year Member



Thank you, Marshall!
9:23 am on Sep 23, 2001 (gmt 0)

10+ Year Member



Marshall (or anyone else), I have another question....

You said not all browsers show the background as "fixed", well my question is... On those browsers, will they see "bgproperties="fixed">" written on the page somewhere, or will the words not show up, and the background just scroll with it? Does that question make any sense? If not, let me know. Thanks!

10:08 am on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



southernpaw,

Browsers ignore attributes which do not apply. When they're in a tag, such as <BODY>, they will not appear as text on the page. However, if you're using a script in the <HEAD>, or anywhere else on the page for that matter, if the browser doesn't support it, odds are the script will appear as text. You want to place <!-- at the beginning of each script and --> at the end. This will make it invisible to older browsers.

As for your background image, if the browser doesn't support the "fixed" attribute, the image will merely repeat.

5:23 pm on Sep 23, 2001 (gmt 0)

10+ Year Member



Just wanted to say thanks Marshall. I appreciate the help.
11:56 pm on Sep 23, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Indeed Marshall, thanks! :)

(My home computer has been out of commission for the last two weeks... it's very nice to know the board members have been keeping an eye on the Graphics forum over the weekends...)

12:02 am on Sep 24, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



mivox,

I'll send you a bill ;)

3:41 am on Sep 24, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



hi southernpaw, you can do it also with directX transitions and filters. check this url [msdn.microsoft.com] to begin scratching the surface. like most techy things this is definately a can of worms but you more or less have directX at your fingertips if you go far enough. below are some image fades i experimented with a year or so ago. almost forgot ..!.. these probably don't work in NS :)

these all take two images and perform some transistions or fades etc.

webgoonz.com/trans/transition2.htm
' ' transition3.htm
' ' transition4.htm
' ' transition5.htm

3:54 am on Sep 24, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try taking a peek at eastergardbuilders.com. It uses some flash to fade sketches of houses in and out. Its much smoother than any animated gif, and probably smaller too. The only trick then is learning a little flash.
1:01 pm on Sep 24, 2001 (gmt 0)

10+ Year Member



I do faded images every day at work. I use Macromedia Fireworks. In the layers option you can select the image and make it from 0-100% transparent. Just put that into three or four different frames, and then have the transparency increase in each frame, and your all done.

If you don't have access to fireworks and the other methods mentioned don't work, then feel free to email me the image, and I will do it for ya. Only takes a couple minutes. :)

4:16 pm on Sep 24, 2001 (gmt 0)

WebmasterWorld Senior Member mivox is a WebmasterWorld Top Contributor of All Time 10+ Year Member



I'll send you a bill

LOL... Hope you don't mind receiving payment in virtual currency. :)

6:40 pm on Sep 24, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



mivox,

You're credit is good with me ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month