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

Well the last design didn't last long. I liked the idea of having it 3D, but this version is much nicer and cleaner, hopefully showing off the content better.

I was going to add a screenshot of the old one for comparison, but Google have hastily cached the new site. Oh well, it's gone forever now.

Now to get round to adding more content....

My entry into the 11 Second Club competition finished 23rd. A little disappointed with my final position, but it was close, a few more votes my way and I would have been much higher. Judging by the winner (which was excellent), I think I should have gone for a more cartoony feel and gone further into disregarding the laws of physics than I did in order to get more votes!

Here's a website that I developed and it has recently gone live. It's for blogging about a round the world trip, and has a fully fledged admin system to quickly allow posts to be created, along with the use of the Google Maps API to add markers for locations and some nice animations to display the journey path as it develops.

It also features a photo gallery, with the Fancybox jQuery plugin, and includes PHP image manipulation to automatically generate the required thumbnails.

Visit the site here: http://www.leeanneroundtheworld.co.uk

A test of some camera matching. My main focus was on the motion of the camera rather than the animation or rendering of the ball - that's to come later, now that I know I can match up the camera! Time to come up with some ideas...

I've been working on this extension to my website for the last few days, and it's ready to be viewed and played around with. It's an online version of Blackjack, created with PHP, Javascript and MySQL, and can be played as single or multiplayer - to test out the multiplayer, just open another browser window and be another player. The aim is to get a hand as close to 21 without going over, and to beat the dealer (not the other players - each individual player just plays against the dealer).

Aces count as one or eleven, whichever is better for you - this is taken account of in the game and adds the higher value as long as it won't make you go over 21. A 2 is worth 2, 3 worth 3, etc, and face cards are worth ten.

It requires cookies and obviously Javascript to be enabled. The Javascript is the main workings of the game, calling a PHP function to check the SQL database when updates have been made, then refreshing section of the screen in an Ajax style way, allowing other sections (such as the chat) to continue independently without interruption. An auto kick function is added, so that if any player leaves without clicking the leave button, the game doesn't just cripple to an indefinite halt - players can then return when they're back.

One of the most difficult challenges was working out how to accommodate new players, and also those that leave without destroying the game. I decided to add a value to the database when a new player joins, and have them wait until the next deal, then update them into the game. A player leaving caused more problems, but I resolved this by first adding the timer so they have to leave if they don't actually click the leave button, then if they do click to leave, it takes the player's cards with them. Initially, it meant that a leaving player transferred their cards onto the next player, which would be a bit harsh if they were a bad hand. So this player is still 'in' the game even after leaving, even though their cards and score aren't visible, a message is noted that a player has left, and they are then removed at the next round.

I then added a chat function, since the server was already calling a PHP script every couple of seconds, it may as well check the file size of the saved chat, then update if it's larger. A javascript function to then force the div to automatically scroll to the bottom (and so the updated messages) is also called when loading new data. The line required, for anyone that may find this useful (it took me quite a bit of Googling, hopefully you'll fare better), was:

Where chat_div is your div ID.

It doesn't include all of the rules of Blackjack just yet - but enough to form a functioning game. Features such as splitting a hand, betting and keeping track of high scores will come in the future.

Try it out, and let me know what you think, and if you find any errors. I'm aware of quite a few ways to cheat, but I left some of the ways I thought of in there as they were handy debuggers - I'll remove them when I come to finish everything off.

www.adamgleeson.co.uk/blackjack

This post is now out of date, but I've kept it in for future reference.

I've now redesigned my portfolio page, and as a result there's no space for this little feature, so I'm going to write about it instead and give the example.

It's a handy way of having extra interaction on the web page, by allowing a nice little animation every time a link is clicked. I was using a jQuery plugin to load content dynamically, and it gave me the idea that because the rest of the page outside of the target div is static, it would be good to have a small animation. So each time the page swapped from one section to another, this little guy pressed the button.

The Javascript used is pretty much the same as that found at Permadi. Just copy that code and stick it in some 'script' tags:



This allows the browser to communicate with Flash. Next, it needs to be told what to tell Flash once the command is given. In my case, my Flash file was looping between frames 60 and 111, once the initial part of the animation (lasting 60 frames) had finished, so I wanted a 'gotoAndPlay(112) command:



Note that I have called the Flash file 'robot', and this needs to be defined above. To display the



This method of displaying Flash is probably quite out of date, but it works and doesn't produce errors as far as I know.

Finally, add a button, just a standard 'a' link and include the onClick action:



And that's it! Your Flash movie should now gotoAndPlay frame 112. You just have to be careful to design your animation so that if someone goes crazy and keeps clicking, it still looks OK. And if it's in a loop as mine is, that it doesn't matter from which frame of the animation it jumps from. You should add in an extra bit to the Flash telling it to trigger a certain animation once it reaches the happy frame though. Now if only Flash worked on Apple devices...

Credit for the code goes to Permadi.com.

Click me!

This is the website intro video I used in April 2010.

Finished updating the site. Split content into technical and design to be able to include web design work as well as 3D and more graphical projects, to demonstrate more of my skills. Even if one person may not be necessarily interested in the other half of the site, it allows me to show that I can do more than I was previously showing.

Also included a jQuery tab system to quickly slide between tabs within sections. The background and main video as well as many of the graphics and buttons have been altered too, to give a cleaner look.

This is the intro sequence on the home page at the moment, I'm just including it here as well in case I redesign my site at some point and replace it.

It was made in After Effects and demonstrates some of my animated work, and was a silly idea to have it loop on the home page because I've just spent the last 15 minutes watching it repeatedly.