Trying to reverse-engineer Microsoft site...

Discussion in 'Web Design and Development' started by bitfidelity, Aug 25, 2013.

  1. bitfidelity macrumors member

    Joined:
    Jul 2, 2012
    #1
    http://www.microsoft.com/en-us/news/bythenumbers/index.html

    I love this site and am trying to recreate it. I've saved a local copy using Firefox but none of the animations in the tiles happen to work, which is weird, because they all seem to be CSS3 based. The index.htm file is pointing to the CSS file correctly, so I don't know what the problem is.

    Anyone interested in taking a crack at it?
     
  2. Ap0ks macrumors 6502

    Joined:
    Aug 12, 2008
    Location:
    Cambridge, UK
    #2
    Why do you need to reverse-engineer the site? Surely you can just create the effect from scratch.

    It just seems to be a tile <div> with a CSS3 gradient applied with a container <div> overlaid containing the animated elements, in this case an icon and some text that slide up then back down on a timer.
     
  3. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #3
    ApOks hit the nail on the head in my opinion, all I can add is use jQuery with the slider plugin to move content divs around based on ID's, z-indexing and event triggering using some not so tough to do Javascript. The rest is up to a good designer to make the nice looking tiles, but their behavior is pretty routine stuff.

    http://jqueryui.com/slider/
     
  4. bitfidelity thread starter macrumors member

    Joined:
    Jul 2, 2012
    #4
    You guys are right. I also found some good information here that would probably let me create the full-screen animation effect.

    I know this should probably be simple, but what is the easiest or best way to create the actual tile grid? Will merely pure CSS and floats do the trick?
     
  5. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #5
    I found it amusingly ironic that the link you provided which uses CSS3 3D transforms doesn't work on MSIE browser and you're trying to create a Microsoft tiling page. I advise you use the basic concepts on that link but consider using the jQuery plugin I named. Add to the graphics any really advanced styling to accomplish the effect cross browser compatible (if needed at all), but be smart about it by optimizing or adding to CSS sprites if so.

    Absolutely you'll use container div's and CSS2 floats and such to create the tiling effect. Is there any other way? If you were thinking a table -- that's for tabular data only, not a best practice these days. If not, what else did you consider?
     

Share This Page