in Coding

Taking a look at Michaelkc.com

I saw a post on Reddit that was asking how a particular site – http://michaelkc.com/ – had been made. The site has some really nice ‘3D’ effects for navigating between pages. This kind of stuff has been possible in Flash forever, but this site is written completely with HTML and Javascript – no need for any kind of plugin, just a modern browser. The site is really nice to look at, easy to navigate and the guy who wrote it clearly knows what he’s doing as the code is really clean and easy to follow. This blog post is basically looking through the source of the site and seeing what I can learn (aka steal) for my own work.

The first thing I saw when looking through the source was the use of Google fonts:

<link href="http://fonts.googleapis.com/css?family=Lobster|Droid+Sans" 
rel="stylesheet">

Google has made a collection of open-source fonts available over at http://www.google.com/webfonts. It’s an easy way to get a more interesting look to your site – simply choose the font you want, and Google will provide you with all the CSS the need to add. The line above get’s added to the head of your html document, and then the following line gets added to the body class of your CSS:

font-family:'Lobster', cursive;

Google even provides you with an indication of how the font will affect your loading time (for example for the black-ops font, it tell me it will add 13ms to a page load – I presume the font is cached by the browser and this may be a one-time cost?).

Behind the scenes, Google serves you a stylesheet specifically for the browser you’re using. You can see some examples of how the css changes for different browsers (and how different browsers support web fonts) here: https://developers.google.com/webfonts/docs/technical_considerations.

Although I don’t think this particular site uses it, Google has provided code for a ‘WebFont Loader’ that can standardise the appearance of the Web Fonts across different sites: https://developers.google.com/webfonts/docs/webfont_loader

Michael’s site also makes use of Google to serve up the jQuery Javascript with this line:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

There are a whole set of Open Source JavaScript libraries that Google make available – see here for the complete list: https://developers.google.com/speed/libraries/. As you can see from the link above you can pass in the version you want to include. I’ll definitely make use of this to serve up the jQuery API in my project, and I looks like I can include the WebFont loader in the same way.

The site also uses a JavaScript library called Modernizr. This creates an object with a set of boolean properties that lets you know whether 40 next-generation features are supported. A custom script that only includes the features you want to check for can be generated at http://modernizr.com/. You can then upload this file to your server and reference it like this:

<script src="/js/modernizr.js"></script>

You can see the results of this test on your own browser by visiting this site:

http://modernizr.github.com/Modernizr/test/index.html

Modernizr also has an unusually cheery syntax, for a method that loads scripts dynamically based on feature support:

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

This is a useful library to know about, and one I might use in the future, but I can’t actually see it being used on the michaelkc.com site currently.

Menu Items – these have a nice animation that plays when you hover over them – they expand slightly, grow a dropshadow and change from white to yellow.

<nav>
    <a class="buttonSlides" onClick="buttonSlide(this)" data-slide="Two">Websites</a>
    <a class="buttonSlides" onClick="buttonSlide(this)" data-slide="Three">Drawings</a>
    <a class="buttonSlides" onClick="buttonSlide(this)" data-slide="Four">Video</a>
    <a class="buttonSlides" onClick="buttonSlide(this)" data-slide="Five">Showcases</a>
    <a class="buttonSlides" onClick="buttonSlide(this)" data-slide="Six">Contact me</a>
</nav>

The whole effect is acheived with a little css:

#wrapper #slideOne nav a:hover 
{
	text-shadow:0 1px 0 #610E0E, 0 5px 10px rgba(0,0,0,0.4);
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
	-moz-transform:scale(1.1);
	-ms-transform:scale(1.1);
	-o-transform:scale(1.1);
}

What’s with all the browser specific CSS styles? As they’re all the same, can’t you just use the generic transform property? Apparently for many of the unfinalised features of CSS3 there are slightly implementations amongst browsers, and the recommendation is to provide browser specific CSS for each (some older browsers require this for some features – see http://wickedlysmart.com/2011/reader-question-what-are-webkit-and-moz/ for more details).

As seems to be a recurring trend with these blog posts, I’ve been distracted from the main topic – the 3D transitions between pages – to research other things that interested me. I’ll look into these in a later post.

Write a Comment

Comment