I’ve been trying to get around to a site redesign for literally a couple of years. Finally, got the chance to revamp the site and blog and you’re looking at the results.
I ditched the photo gallery as it was a private indulgence and I wanted the site to be a little more focused this time around. Plus I just haven’t had chance to get out and take photos since I’ve not been biking so it was looking rather stale.
I’ve chosen to use quite a bit of jQuery in the site this time around, hopefully not in an over the top ‘look at this’ kind of way. Here are the scripts I’ve used and where they were applied:
1. Cufon – this script enables you to use any font on a web site. I used it on the front page for ‘Hello, I’m Ben Frain’ rather than use a graphic
2. Smooth Scroll – this is used on the ‘to the top’ link in the footer and the ‘contact’ link on the home page and gives a nice scrolling effect rather than a sudden jump.
3. Blend – I used this on the navigation bar. Hovering over any of the links gives a nice pulsating effect
4. Colorbox – another script from colorpowered, this provides the ‘lightbox’ effect on the portfolio section of the webdesign page
5. jQuery UI – I used different parts of this library: tabs for the tab sections of the writing and web design pages and slider for the ‘who I’ve worked with’ section on the front page.
6. With the tabs I also used localscroll and scrollto to enable the tab sections to be bookmarked and loaded directly e.g. http://benfrain.com/website-designer.php#portfolio takes you straight to the relevant tab on the web design page.
7. Cycle was a script I used for the main rotating graphic on the web design page.
8. jshowoff was used for the rotating quotes on the writing page
9. jReject was used to let IE6 users know just how shite their browser is 🙂
There we are – enough jQuery to keep anyone satisfied. My hope is that they are fairly transparent for the user, like special effect done right in films…
My latest book, 'Enduring CSS' is out nowGet $5 off HERE ↠
Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp