Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Aug 25, 2013, 07:12 AM   #1
bitfidelity
macrumors member
 
Join Date: Jul 2012
Trying to reverse-engineer Microsoft site...

http://www.microsoft.com/en-us/news/...ers/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?
bitfidelity is offline   0 Reply With Quote
Old Aug 25, 2013, 10:57 AM   #2
Ap0ks
macrumors regular
 
Join Date: Aug 2008
Location: Cambridge, UK
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.
Ap0ks is offline   0 Reply With Quote
Old Aug 27, 2013, 12:15 PM   #3
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
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/
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Aug 28, 2013, 08:00 AM   #4
bitfidelity
Thread Starter
macrumors member
 
Join Date: Jul 2012
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?
bitfidelity is offline   0 Reply With Quote
Old Aug 28, 2013, 11:11 AM   #5
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by bitfidelity View Post
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?
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?
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Resolved: Microsoft Surface advertising on this site Larry Hamilton Site and Forum Feedback 2 Dec 9, 2013 05:25 AM
Microsoft's Media Center offer site doesn't work SnowLeopard2008 Windows, Linux & Others on the Mac 5 Dec 20, 2012 04:31 PM
Help on an audio engineer setup afroAnt Digital Audio 11 Oct 10, 2012 07:21 AM

Forum Jump

All times are GMT -5. The time now is 11:55 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC