matt laine dot com / blog

HTML 5 and WebKit

by on Jun.23, 2009, under Uncategorized

It’s been awhile since I’ve blogged, so I thought I’d write about some HTML 5 studies I’ve been experimenting with. Check out the demo in Safari 4

In the example, I’m using King Kong to demonstrate several new features of the HTML 5 specification, such as the <video> tag, as well as some very cool WebKit CSS animations.

WebKit is the open source project with backing from Apple. Apple’s Safari and Mobile Safari browsers run on WebKit. You can think of WebKit as where the chrome (address bar, etc.) ends and the content begins; basically it’s everything in the viewport. Google Chrome and other browsers also run on a WebKit core.

Animations and Keyframes

As a UI developer, HTML 5 is a gift from God. Traditionally, developers would use images, Javascript or flash to accomplish what HTML 5 and CSS 3 can do with a few simple lines of code. WebKit has fully embraced the HTML 5 spec, which is still under development, and added it’s own set of CSS transforms, transitions and animations to further enrich the user experience. Let’s look at some code from the example:


/* this CSS controls the spotlights at the base of the building */
ul li.light1 {
        -webkit-transform-origin: bottom;
        -webkit-animation-name:'lightsrc1';
        -webkit-animation-duration:5s;
        -webkit-animation-iteration-count:infinite;
}

ul li.light2 {
        -webkit-transform-origin: bottom;
        -webkit-animation-name: 'lightsrc2';
        -webkit-animation-duration:5s;
        -webkit-animation-iteration-count:infinite;
}

Here I’m using a transparent .png background image as the spotlight. I positioned the lights at the base of the building and am using animations called ‘lightsrc1’ and ‘lightsrc2’ for each light respectively. The animations themselves look like this:


/* animations */
@-webkit-keyframes 'lightsrc1' {
	0% {
		-webkit-transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(-15deg);
	}
	50% {
		-webkit-transform: rotate(15deg);
	}
	75% {
		-webkit-transform: rotate(-15deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
	}
}
@-webkit-keyframes 'lightsrc2' {
	0% {
		-webkit-transform: rotate(-15deg);
	}
	25% {
		-webkit-transform: rotate(15deg);
	}
	50% {
		-webkit-transform: rotate(0deg);
	}
	75% {
		-webkit-transform: rotate(15deg);
	}
	100% {
		-webkit-transform: rotate(-15deg);
	}
}

I’m using CSS keyframes to set the properties at certain intervals of the animation. As you can see, I’m setting -webkit-transform:rotate(# degrees) for each frame. This creates a pretty smooth transition between states. I’m also using keyframes to animate King Kong and the airplanes flying overhead; King Kong is also using the ‘rotate’ property on his arm. The planes are using ‘scale’ to fake a near-to-far effect. Here is that animation:


/* Plane A and Plane B CSS */
div.planeA,
div.planeB {
        -webkit-transition:-webkit-transform 4s linear;
        -webkit-animation-duration:4s;
        -webkit-animation-iteration-count:infinite;
}

div.planeA {
        background-image:url('planeA.png');
        -webkit-animation-name: 'planecircleA';
        z-index:4;
}

div.planeB {
        top:50px;
        left:-200px;
        background-image:url('planeB.png');
        -webkit-animation-name: 'planecircleB';
        z-index:0;
        -webkit-animation-delay:2.8s;
}

/* animations */
@-webkit-keyframes 'planecircleA' {
	0% {
		top:-40px;
		left:300px;
		-webkit-transform: scale(1.0, 1.0);
	}

	100% {
		top:50px;
		left:-100px;
		-webkit-transform: scale(0.1, 0.1);
	}
}
@-webkit-keyframes 'planecircleB' {
	0% {
		top:50px;
		left:-100px;
		-webkit-transform: scale(0.1, 0.1);
	}

	100% {
		top:-40px;
		left:300px;
		-webkit-transform: scale(1.0, 1.0);
	}
}

Once again, I’m using the keyframes to control the CSS transformations. I was attempting to make the planes look like 1 plane flying in a circle, but failed (albeit gracefully). Notice the property on planeB for -webkit-animation-delay, which delays the start of the animation.

HTML 5 Video

Probably one of the most exciting features of HTML 5 is the <video> tag. This allows the browser to play video in a variety of formats without requiring plugins (such as Flash). The can open up a whole new dimension in building rich applications in HTML/CSS and Javascript. The demo video is a .mov file and uses Javascript for the play/pause and full-screen functions.

Here is some CSS (I’m only including the -webkit* related properties):


/* this is the CSS for the video controls */
div.controls a { 
	background: -webkit-gradient(linear, left top, left bottom, from(rgb(22,22,22)), to(rgb(66,66,66)));;
	-webkit-border-radius:4px; 
	-webkit-transition: -webkit-transform 0.1s ease-in;
}

div.controls a:hover {
	-webkit-transform: scale(1.2, 1.2);
	-webkit-box-shadow: 1px 1px 5px rgba(255, 255, 255, 0.6);
}

/* this is the CSS for the video */
video { 
	background:(22,22,22,0.5); -webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.85, transparent), to(white));  
	-webkit-transition: -webkit-transform 1s ease-in; 
}

video.fullscreen { 
	-webkit-transform-origin: top left; 
	-webkit-animation-name: 'fullscreen'; 
	-webkit-animation-duration:1s; 
}
video.normal { 
	-webkit-transform: scale(1.0, 1.0); 
}

…HTML…


<div class="controls">
	<a href="#" class="play" onclick="toggle(this)">play</a>
	<a href="#" class="fullscreen" onclick="fullscreen(this)">fullscreen</a>
</div>

…and the Javascript:


//this function handles the play/pause actions
var toggle = function(obj){
	if(obj.innerHTML == 'play'){
		obj.innerHTML = 'pause';
		document.getElementsByTagName('video')[0].play();

	} else {
		obj.innerHTML = 'play';
		document.getElementsByTagName('video')[0].pause();
	}
}

//this function handles the fullscreen/normal views
var fullscreen = function(obj){
	var video = document.getElementsByTagName('video')[0];
	try { console.log(video); } catch(e) { alert(video); }
	video.className = video.className == 'fullscreen'?'normal':'fullscreen';
	obj.innerHTML = obj.innerHTML == 'fullscreen'?'normal':'fullscreen';
}

What I found is that HTML 5 and WebKit allows developers to write less Javascript and more CSS. In fact, the Javascript becomes limited to toggling classnames, such as what happens in fullscreen and normal video views.

Anyways, all in all, WebKit seems to be pushing the RIA experience into the HTML 5 standard, which is a beautiful thing. If only other browsers (ahem..IE) could follow suit. But that’s a whole other rant…

1 comment for this entry:
  1. Toby

    Killer stuff! Hopefully there will be cross browser solutions for all this before I retire.

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

Archives

All entries, chronologically...