Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Keynote-like grid effect using CSS/AJAX?

Mal

Mal

macrumors 603
Original poster
Jan 6, 2002
6,253
30
Orlando
Ok, I just had a really cool idea, and I'd love to try to implement it. I want to try to recreate the Keynote Grid effect for a part of the website I'm setting out to build. Basically, it's 6 items laid out in a 2x3 grid, and as you advance the slides (or in this case, click on an item), it gets zoomed to the full size of the grid, and the others fade out behind it. Is this something that could be recreated using CSS/AJAX (not flash)? If so, I'd love to do so, because I'm designing a website for my company that will showcase the Apple products, which is 2 lines of 3 products for the hardware, which makes this a perfect effect.

Thanks in advance for any suggestions!

jW
 
Perhaps something like this.

I don't use Keynote so note sure about the effect you're talking about. Should be doable though with CSS and JavaScript. You shouldn't need to make use of AJAX unless you're making server calls in the background, otherwise it's just JavaScript.
 
Looks good, just missing one thing I'd love to have it do: an active zoom to the larger state instead of simply jumping up to the larger size. It's not an absolute must, but would be nice. I'll use the caption ability to provide smaller images and a link to the product page, but this should be a nice showcase idea.

jW
 
I'm not familiar with JavaScript libraries, but I'll look into it. Mootools looks especially promising with the capablities shown.

jW
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back