DESIGN FOR WEB// History Of Consoles Website Walkthrough

The website is really very simple, just a series of images with a small amount of Javascript and a very small amount of CSS.

HTML CODE:

HTML code is pretty self explanatory, most of it just handles imagery and ties in the jajvascript code to various buttons I have created. Quite a lot of research had to done on my part to work out how to implement this code here because at first I really did not understand, for example, where the various parts of the codes and handles should be placed.

This images shows where the smoothscroll command is executed when each button is pressed.


CSS CODE:

Thats it, all of the CSS code for the whole site, It really shows how simple the construction is. I could have made this part much more complex, however there would have been zero advantage, this keeps it simple and easy to edit, it also cuts down on errors in spacing and alignment on the actual website page.


JAVASCRIPT :

Javascript is mostly nonsense to me, this javascript runs the smoothscroll feature that allows the buttons to glide the user to a point on the timeline. I did have to edit a small amount of the code to get the scroll to run horizontally (x axis) rather than vertically (y axis), like on most websites.

So here I had to change axis:'y' to axis'x'.

I hade to also link some jquery into the code of the website. I think that this allows the javascript to run however once I placed it, it became un-editable and would freeze up dreamweaver if I tried to access the code.

I have talked about how the smoothscroll function increases the functionality, usability and aesthetic of the website before and there is not really a away I can show it in action, In a future post I may try to produce and animation for the blog, but that would be rather pretend. As an example here I have used screenshots, while clicking on the '60's' tab...

The website will glide horizontally to the first entry of the timeline which features a development from the 1960's. This is the same for every button on the Nav bar, which I have fixed to the top left of the screen meaning it will follow you throughout the timeline.