You may have noticed a 3D effect to my website. This will appear if you're using up-to-date versions of Google Chrome, Safari or Firefox, among others. It works best in Webkit (Chrome/Safari), but if it isn't working smoothly, it should turn itself off. Or you can control its effects using the options at the bottom right.

Older or non-standards compliant browsers (yep, that's you, Internet Explorer) can't do the effect at all. Even mobile browsers do it to a degree, although because of the lack of a hover I've disabled the effect by default on mobile browsers just so it doesn't confuse the users, but it can be turned on manually.

I've wanted to create an effect like this after being impressed at the Crysis 2 game menus, which had a pleasing 'wobble' to the screen as you moved the mouse across its interface. I've seen sites doing similar things before, but in Flash, which I prefer to avoid.

How the magic happens
Have a look at the source javascript file and look for 'updateScene()'. This is called every time the mouse moves, passing to it the new coordinates of the mouse. Depending on what options are enabled, it will then tilt and/or scroll the page appropriately. A quick calculation is performed based on the window width and mouse position to work out how much to tilt by. The tilt then happens by updating the CSS of two containing divs - one across the X axis, one across the Y axis. Two divs were required because the CSS 3D transform cannot update both X and Y simultaneously, so I just decided to move the outer div in X, and the inner div in Y to achieve this effect. It also moves the background in the opposite direction.

If 3D scroll is enabled, it will call a jQuery plugin which enables CSS transformations to be more easily called by jQuery. A 3D scroll to this script then happens based on the class name of any element named 'layer' on the page. Each element with a 'layer' class also contains a number to say which layer this element should be moved as if it is contained within.

What next
Opera and IE interpretations of 3Dness appear to differ from other browsers, so I'd like to get something working in these. The whole thing is a trial at the moment - mainly to see if it could actually be done in any browser, and it could certainly do with some optimisation and tweaks. But I'm fairly happy with it... for now.

This is a website designed to share motorsport news and videos.  Once logged in, you can view feeds from various websites and have the option to share them on the home page to comment and rate.  

There is also a countdown calendar to the next race for sports covered, as well as relevant Twitter feeds.  A mobile view allows content to be displayed seamlessly - whenever the screen is detected to be less than a certain width, mobile view is enabled by adding a class to the main container.   Items are then selected through CSS based on this new container to switch dynamically between views when required.

The content for the feeds section is dynamically retrieved from public RSS feeds after a fixed period of time, and the first 200 characters of the feed are stored in a local database, so as not to keep pounding external servers each time a page loads.  The URL of the original article is also stored, so a link is displayed to view the whole article - the website acting as a kind of advertisement for multiple relevant websites.

View site

I'm refreshing everything on my site, and so older blog posts may now have links that point to places that no longer exist.  For history's sake, I'm keeping the old blog posts as they are, as all the content within them should still be fine, but links may not be!

This application is all about managing tasks. To begin with, click the 'create new task list' at the bottom. This then opens a panel in which the list can be named, and items inserted into it.

If logged in, changes are saved automatically so when you revisit the page, your previous settings remain, including the name and state of each task.

Click here to use

An interactive motorsport calendar. It contains events for 2011, and displays the status of each event - whether past, present or future - and highlights this in the interface.

For F1 events, there's also the option to view an archive of races from the BBC website's Classic F1 series.

Click here to use