Web Design Forums

grafiks · 30-01-2007, 07:34

Does anyone know if there is a JS that would give the same effect as the flash in the banner of this website.

http://www.erroldouglas.com/index.php

The banner image that looks like a mirror. I am not a fan of flash and would prefer to use JS.

Help appreciated.

funkyprem · 30-01-2007, 07:52

i think you can do this easily in java (not javascript)

don't ask me how though.

cam · 30-01-2007, 07:58

I honestly don't get the animosity towards flash for uses like this - it's what it was designed to do, it's got a massive install base, you can use SWFObject or similar to provide alternate content... why make things harder than they have to be?

Dusteh · 30-01-2007, 08:00

Is it 95% of users now have flash installed? Something like that... coverage is so high that its not a problem.

djeglin · 30-01-2007, 08:11

Flash actually has a higher userbase than javascript now... Mainly because JS is turned off in some workplaces and flash is still left installed. I'm not a fan of flash just for its own sake either... But if you want an effect like this, it really is the way to go.

Javascript is a good presentation tool... In theory using prototype or mootools you could have two images slide in, one from its left edge and one from its right edge, creating a similar animated effect to what you sited as your example, but as is it all done at a page-render level, it is extremely intensive doing animation effects this way, and is likely to produce slow, jerky results on low-power computers. At least with flash you can be sure it will look and work the same for just about everyone... And you dont have to deal with all the niggly problems with using script libraries, not to mention the page load overheads!

David

grafiks · 30-01-2007, 08:26

LOL, ok ok I will open flash..

Point taken. Thanks for the input

dtrenz · 30-01-2007, 11:25

you could just put to divs side by side; 1 with the original image as the background-image, the other with the mirror image as the background-image. make the left postion of 1= div width + 1, and the second with div width = -1, then use a timer to shift the bg image positions over.

you could also probably do this with a relative positioned img in each div with overflow: hidden.

pgo · 30-01-2007, 12:07

Quote:

Originally Posted by dtrenz

you could just put to divs side by side; 1 with the original image as the background-image, the other with the mirror image as the background-image. make the left postion of 1= div width + 1, and the second with div width = -1, then use a timer to shift the bg image positions over.

you could also probably do this with a relative positioned img in each div with overflow: hidden.

Or your could do it in Flash!

30-01-2007, 07:34	#1 (permalink)
grafiks Senior Member Join Date: Jan 2004 Posts: 368	js instead of flash Does anyone know if there is a JS that would give the same effect as the flash in the banner of this website. http://www.erroldouglas.com/index.php The banner image that looks like a mirror. I am not a fan of flash and would prefer to use JS. Help appreciated.

30-01-2007, 07:52	#2 (permalink)
funkyprem For all your goober needs Join Date: Dec 2004 Location: Coventry, UK Posts: 1,557	i think you can do this easily in java (not javascript) don't ask me how though. __________________ Time is really the only capital that any human being has, and the one thing that he can’t afford to lose. - Thomas Edison prem ghinde

30-01-2007, 07:58	#3 (permalink)
cam vague™ Join Date: Mar 2004 Location: Glasgow Posts: 5,595	I honestly don't get the animosity towards flash for uses like this - it's what it was designed to do, it's got a massive install base, you can use SWFObject or similar to provide alternate content... why make things harder than they have to be? __________________ The Blog™ \| TWHF \| Twitter \| LinkedIn

30-01-2007, 08:00	#4 (permalink)
Dusteh Sir digby chicken caesar Join Date: Sep 2004 Posts: 5,413	Is it 95% of users now have flash installed? Something like that... coverage is so high that its not a problem. __________________ unconsolidated isoparms

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

30-01-2007, 08:11	#5 (permalink)
djeglin goober :-) Join Date: Dec 2006 Location: Birmingham, UK Posts: 533	Flash actually has a higher userbase than javascript now... Mainly because JS is turned off in some workplaces and flash is still left installed. I'm not a fan of flash just for its own sake either... But if you want an effect like this, it really is the way to go. Javascript is a good presentation tool... In theory using prototype or mootools you could have two images slide in, one from its left edge and one from its right edge, creating a similar animated effect to what you sited as your example, but as is it all done at a page-render level, it is extremely intensive doing animation effects this way, and is likely to produce slow, jerky results on low-power computers. At least with flash you can be sure it will look and work the same for just about everyone... And you dont have to deal with all the niggly problems with using script libraries, not to mention the page load overheads! David

30-01-2007, 08:26	#6 (permalink)
grafiks Senior Member Join Date: Jan 2004 Posts: 368	LOL, ok ok I will open flash.. Point taken. Thanks for the input

30-01-2007, 11:25	#7 (permalink)
dtrenz blam blam Join Date: Aug 2006 Location: ann arbor, mi usa Posts: 528	you could just put to divs side by side; 1 with the original image as the background-image, the other with the mirror image as the background-image. make the left postion of 1= div width + 1, and the second with div width = -1, then use a timer to shift the bg image positions over. you could also probably do this with a relative positioned img in each div with overflow: hidden.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)