Using the website design mock up that I create using the purple colour scheme I had initially chosen, I used this as the starting point to create the final web mock up in photoshop, Once this was complete I sliced up the relevant areas of the image and saved the for web so I could begin to code the website. The website was made using code I was already familiar however the only area of the website that I struggled to implement was the fading image in the header on the homepage.
I needed the image in the header to be a background image, however much of the css and javascript out there is for fading images in divs or just images, you can't easily fade between background with javascript or css which I didn't know until I did my research! After using a few resources I found online that people have created in order to create fading background images. Many of them didn't work for various reasons and mainly because the code created was for full screen fading background images but I want only a section of the page background to change. I eventually found some code that I modified and managed to get working.
The next issue I had was getting the text to fade at the same time, for this I used a simple fading image code with CSS and this faded the images and then I changed the times to match that the backgrounds and it all worked...after many hours of laborious coding!
Leave your comment