Keynote-like grid effect using CSS/AJAX?

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

  1. Mal
    macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #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

    Joined:
    Aug 16, 2005
    Location:
    USA
    #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
    thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #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

    Joined:
    Nov 26, 2007
    Location:
    Seattle
    #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
    thread starter macrumors 603

    Mal

    Joined:
    Jan 6, 2002
    Location:
    Orlando
    #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

    Joined:
    Aug 16, 2005
    Location:
    USA
  7. macrumors 68000

    EvanLugh

    Joined:
    Aug 29, 2007
    Location:
    Developer land
    #7
    Was about to suggest mootools too.
    Also have a look here for some ajax goodness.
     

Share This Page