This marketing site for Siemens encourages engineers to take a series of 5 challenges against the clock to prove their cognitive skills.
The framework was built with CodeIgniter which is a fairly lightweight php framework that allows flexible development of sites quickly within an MVC pattern.
jQuery UI’s draggable and droppable plugins allow user interaction to be introduced easily while still offering a powerful interface for customising their behaviour. For touch devices, use Touch Punch to make sure that mobile and tablet users can make use of the drag and drop too.
jQuery is only the beginning
Challenge number four involved some really interesting animated 3D transforms which are all accomplished with CSS3. Getting your head around the different axis as each of the 6 faces rotate is enough to send you loopy.
Don’t forget the fallback
This site uses some cutting edge CSS3 properties like transitions, transforms, 3d transforms and keyframe animation. All of which are supported in the most recent version of popular browsers, but some older browsers will struggle.
Luckily, the modernizr plugin comes to the rescue and adds html classes to the document which can be interrogated to decide which type of effects to attempt. The spinning and folding cube is replaced by a nice 6-frame fade-through animation for browsers which don’t support 3d transforms.