PDA

View Full Version : Keynote-like grid effect using CSS/AJAX?




Mal
Apr 25, 2008, 02:00 PM
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



angelwatt
Apr 25, 2008, 02:24 PM
Perhaps something like this. (http://randsco.com/index.php/2005/01/31/css_photo_caption_zoom)

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.

Mal
Apr 25, 2008, 03:11 PM
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

Photomax
Apr 25, 2008, 04:25 PM
You might want to look into Moo tools(SP?) and Jquery. I bet there is some sort of combo that might work...

Mal
Apr 25, 2008, 04:38 PM
I'm not familiar with JavaScript libraries, but I'll look into it. Mootools looks especially promising with the capablities shown.

jW

angelwatt
Apr 25, 2008, 05:09 PM
FancyZoom seems pretty nice and is more visually appealing. (http://www.cabel.name/2008/02/fancyzoom-10.html)

EvanLugh
Apr 26, 2008, 05:21 AM
You might want to look into Moo tools(SP?) and Jquery. I bet there is some sort of combo that might work...

Was about to suggest mootools (http://mootools.net/) too.
Also have a look here (http://miniajax.com/) for some ajax goodness.