Morgan's Projects: Swanky Slideshow

Swanky Slideshow is inspired by the many gaming websites that make use of a slideshow function to advertise their latest news, previews and reviews features. Most of them make use of Flash - my doesn't. You can see a demonstration below.

Each slide is a <DIV> element with a background image and contains a further <DIV> element for other HTML markup. Here it's just simple header and <SPAN> elements but there's nothing to stop the developer using links.

Onslaught Review

Check out my review of Hudson's stunningly original shooter.

Snowboard Riot Review

Mario Kart Wii hits the slopes.

Pop'em Drop'em: Same Game Review

That's right - it is the same game you've already played.

Developer Blog

7th April 2009

I started the project yesterday and had a fully working slideshow within a couple of hours. The project has also spawned a utility function file which will be used to make this site's navigation menus Internet Explorer compatible.

I'd like to add a little more oomph to the presentation by providing a rebounding impact effect - a bit like when you open a sliding door too quickly. Updating the navigation bar code shouldn't take more than a couple of lines of code so I hope to have the effect done by today.

So far today I've learned alot of things like Firefox, Chrome and Safari are considerably more reliable than Internet Explorer 7, which only seems to recognize the third slide in the animation. The funny thing is is IE7 actually performs the transition correctly on that slide - weird - even the Internet Browser on Wii copes better.

I've also noticed that CSS's rgba() is supported on Firefox, Safari and Chrome but not on IE7 or the Wii browser (I haven't tested with Opera on Windows yet) I really don't want to but I might have to make use of a semi-transparent PNG image for the background of the textual elements and I'm nearly 100% certain that's supported all-round.

Update: I changed the text area so it makes use of a PNG image and in all honesty it looks a bit sexier with the curves. Curves are always sexy. The transition has been sped up a little so it's more slide-show than slow-show.

Finally, I've added the judder effect. It's not perfect but it'll do - personally I'd like to add a proper physics based effect rather than fixed movement - maybe later.