Keynote-like grid effect using CSS/AJAX?

Discussion in 'Web Design and Development' started by Mal, Apr 25, 2008.

  1. Mal
    macrumors 603

    Mal

    #1
    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
     
  2. Moderator emeritus

    angelwatt

    #2
    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.
     
  3. Mal
    macrumors 603

    Mal

    #3
    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
     
  4. macrumors regular

    #4
    You might want to look into Moo tools(SP?) and Jquery. I bet there is some sort of combo that might work...
     
  5. Mal
    macrumors 603

    Mal

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

    jW
     
  6. Moderator emeritus

    angelwatt

  7. macrumors 68000

    EvanLugh

    #7
    Was about to suggest mootools too.
    Also have a look here for some ajax goodness.
     

Share This Page