So at the moment the website is all together but you need to scroll or 'use arrow keys' to navigate the page. As the page is so massive and long this can bee really tedious and loosing your place is easy. To deal with this I plan in implementing a navigation bar capable of smooth scrolling the user to a given decade and back to home if they need. The smooth-scroll feature is particularly important firstly because it allows the user to see the rest of the website run past, giving some perspective as to where they are in the timeline. Secondly in the smart phone generation the user expects smooth-scrolling to be there, jumping to the location would be clunky and unprofessional.
I coloured the nav bar container grey temporarily so if anything went wrong it would be easier to spot the cause. The second home button beneath the bar is part of the image that contains the running man, this will be changed asap.
Here I have added the rollover buttons. They will flash to the same image but with drop shadows when hovered over, and will eventually work as buttons to scroll the user to a point in the image.
To work around several problems I cut up the massive time line image into one for each decade. This will improve performance, quality and allow me to actually use smooth scroll. It also gave me the opertunity to remove the second home button. Here I have saved the image as a PNG which has allowed for transparency and the website background colour has shown through.
Here I have altered the background colour back to white. Having taken the smoothscroll for a run I realisr that I need to use this code:
Pre-loading the images into the website to make sure they don't have to load really quickly as the page is scrolling (leading to juttering).
I will write more about how the website runs in the next post.
No comments:
Post a Comment