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 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

A game created in JavaScript for your entertainment. Containing retro style glowing graphics - assuming you're using anything better than evil IE8, otherwise you don't get the pretty glows and nice rounded corners. This is an update of the last JavaScript Game I made - I said I'd update it at some point, and here it is. Runs much smoother, although visually I preferred the lighter background looking back, but that's just an easy CSS change.

The idea is to guide the ball through the holes to reach the bottom. The arrow keys, mouse, or a touch screen can be used to control the ball. It technically works on phones as it's not Flash based and widths are set as percentages, but it depends on your screen resolution and graphics provider as to how well it will work.

It heavily uses the jQuery animate tool, as well as the jQuery Rotate plugin, and took around 3 hours to make. The rows are generated randomly with PHP, so the difficulty can also vary slightly between refreshes. A difficulty trigger is activated when the ball reaches the bottom of the screen - when this happens, it speeds everything up as it assumes it has been going too slowly for the player until this point.

High scores are kept locally and per session, but in future it would easily be possible to have them saved in a database. Try it for yourself, it demonstrates itself better than I can explain in words!

Click here to use

A quick app to read RSS feeds from external sources and display them on the page. Three sample feeds are included as demos, along with the ability to add a fourth (which isn't saved).

When clicked, links are expanded to reveal the additional content contained in the feed, as well as a link to the original article. Any images in the feed are displayed directly in the page with styling to prevent them taking over the screen.

Click here to use

A web-based "instant" messaging system - not quite instant because there's a 1.5 second delay while checking for data, since browsers don't have push facilities to be told to retrieve data from the server.

This app requires registration, and from there you can add friends to talk to (assuming they're already registered). An upload function is available to share photos and files, which are then displayed in the page, as well as recent messages. The option to view the past week or day's worth of chat with one particular friend is available, along with email notifications.

It works by sending a request to the server to detect whether an update to a chat has been posted. If it has, the data is then retrieved and instantly animated into the chat window. It's really much more clever than I can put into words - give it a try!

Click here to use

I've just uploaded this simple javascript game: Play here.

The idea is that you move the ball through the gates before the screen closes in on you. Been done many times before, but I wanted to see if I could do it using JavaScript rather than the usual way of creating web browser based games - by using Flash.

Because there's no 'on collision' event that I'm aware of (although I have just discovered gameQuery, which may have helped me, but I haven't looked into it yet), I had to simulate collisions. Each row is the same height and the random row lengths pre-processed by the server and therefore accessible by the JavaScript. This meant that I could calculate an x and a y coordinate of the holes - and so if the ball's current position matches a hole, it starts the drop animation to the next level, and moves on to the next hole.

For motion, it's mostly performed using the animate() jQuery command. To be able to apply separate vertical and horizontal motion to the ball, the image for the ball was placed inside a 'playerX' div, which in turn was placed inside a 'playerY' div. This meant that I could apply a drop animation without losing the horizontal momentum already gathered. Initially, it didn't play well as it stopped its horizontal motion on a fall, which wasn't very smooth.

A detection function to test if the ball is on top of a hole runs every 50 milliseconds, so producing a frame rate of 20fps depending on browser (although the game scroll and player motion should be smoother than this as they're not tied to the hole detection function). Within this function however, I added a jQueryRotate plugin, which was very useful. Depending on whether the ball is moving left or right, it updates the rotation value every 50 milliseconds.

Finally, a scoring system was added along with the ability to post high scores. There are many ways of cheating to log an impossible score, but I wasn't overly concerned about this as it wasn't the main principle of the task.

Anyway, have a play.

For my final (for now) web app I've made recently, I've added an instant chat section to the site, but with image and video uploads integrated within the chat. I could spend hours talking about it, but it's probably best explained in action - feel free to try it out and ask me any questions. I've left a few explanation messages on there for you to read.

Chat here.

Continuing on from my feedreader webapp, I've updated the motorsports calendar I created earlier in the year, and made it ready for next year's events. It's a little quicker, and the added external links now load on demand rather than all at once initially, which saves the server a lot of rummaging around in databases. It's done in PHP with MySQL and jQuery scripts.

The image is how it'll look in the middle of next year, once a few races have taken place. It checks the current date and adjusts the styling depending on whether each race is a future race, a past race or a current race. All events listed are two- or three-day weekend events, so there's a good chance that if you look at the page on a weekend in 2011, there'll be at least one form of motorsport on.

External links to past races are displayed to highlights of past races hosted on the BBC website, as well as to iPlayer if it detects that an F1 race was shown within the last seven days, and so the race will be available on iPlayer. Once a race has completed, a results link appears that takes you to the official F1 website, assuming they don't adjust their link formats in the meantime.

Have a look.

I've just created a feed reader in PHP and Javascript to quickly view favourite sites. It's also possible once signed in to manage your own feeds so that only you can view them, and also to not see the default ones I have added.

On the feed, you get the usual title and links sections so when you click it takes you to the article. When hovering over the feed, you also get the option to expand the feed list to view older articles (assuming the RSS feed goes longer than 10 articles), or to view the article itself - if the article is included in the description tags on the RSS feed, which is the standard. As it relies on other people's sites being done in the same way, little sections don't work, but I've added some exceptions to help work around those. It's set up so that if a website is down where the feed is hosted, it will skip that one and continue, rather than breaking the whole page.

My main reason for creating it is that I couldn't find a reader that worked exactly how I wanted - so I decided it was easier to make my own. The closest I have found to a reader I want is Newsrack for the iPhone, which I like, although when you're sat at a PC, it's pretty pointless looking at your phone.

Next step will be to improve the speed (Firefox Beta 7 helps a little for this), as it gets a bit clunky at times. The code also needs tidying up as I've been tweaking and refining. As it's only me working on it so haven't felt the need to clean up or comment my scripts like I normally would. I may change the styling slightly for an iPhone version, although the app I mentioned does a good job already I probably won't bother, unless it unexpectedly becomes amazingly popular. Loading icons would be handy too, so you know it's trying to do something (or the internet has broken).

Update: Loading icons have now been added. Also included a sidebar to add favourite links that you can return to later - works when signed in and not, so you can either have a personalised set of bookmarks, or a public set that anyone can use. Added a history too, to keep track of which sites have been updated since you last visited the page. Optimised the loading and animation a little, but it still needs the code tidying up further, It's getting there!


Handily, the loading is done with jQuery, so you only load the page once and everything animates within the page whenever you click on something.

Have a play here.