Superted Ltd

So I decided to redesign my blog and add my portfolio to superted.me (it used to be at tedlittledale.co.uk) as I now use Superted Ltd as my trading name.
I’ve been using this great full screen color picker, http://color.aurlien.net/, for a while now whenever I’ve needed a bit of inspiration to pick a color for something. I really like the mouse effect they use and so used that as the inspiration for the redesign. I also really like Futura so wanted to use some nice big text.

I’ve finally had some downtime recently so I’ve been spending time redesigning my portfolio site. I wanted to add a twitter widget that animated between recent tweets using a bit of css3 transition magic. This is what I came up with (I’ve sped up the interval time for the demo):

In terms of markup, the tweets are generated as a simple unordered list using php.

The javascript was pretty simple really. First some empty divs are added to the containing div to act as a mask. These are sized and positioned so that they cover the whole tweet when the ‘right’ css property of each div is set to 0. They are also given an incremental transition delay so that the top div animates first and the rest follow.

When the tweet transitions the ‘right’ property is set to 0 hideing the tweet. The current tweet is then swapped for the next before the ‘right’ property is set again to the width of the tweet, thus revealing the next tweet. The animation is handled by the css.

The JS

/**
	 * Add markup to twitter div for animation
	 * @private
	 * @param {jQueryObject} section The parent element
	 * @returns Describe what it returns
	 * @type String|Object|Array|Boolean|Number
	 */
	var initTwitterAnimation = function(section){
		var current = section.find('li:visible'), top = 0;
		current.parent().wrap('<div class="shutterWrap"></div>');
		var wrap = 	section.find('.shutterWrap'),
					shutterHeight = Math.ceil(current.outerHeight()/10),
					shutterWidth = current.outerWidth();
		for(var i = 0; i < 10; i++){
			wrap.css('position','relative').append('<div class="shutter"></div>');
		}
		section.find('.shutter').each(function(i){
			$(this).css({
				height : shutterHeight+'px',
				position : 'absolute',
				top : top + 'px',
				width : '100%',
				background : '#fff',
				right:-shutterWidth+'px'
			});
			this.style.webkitTransitionDelay = i*(0.05)+'s';
			this.style.MozTransitionDelay = i*(0.05)+'s';
			top += shutterHeight;
		});
		setTimeout(function() {
			animateTwitter(section, shutterWidth);
		}, 1000);
	};//initTwitterAnimation

	var animateTwitter = function(section, shutterWidth){
		var hiding = true;
		var current = section.find('li:visible'), top = 0, next;
		var next = current.next();
		if(next.length === 0){
			next = section.find('li:first');
		}
		var goToNext = function(){
			if(hiding){
				current.hide();
				next.show();
				shutterHeight = Math.ceil(next.outerHeight()/10);
				section.find('.shutter').each(function(i){
					$(this).css({
						height : shutterHeight+'px',
						top : top + 'px'
					});
					top += shutterHeight;
				});
				section.find('.shutter').each(function(){
					$(this).css({
						right : -shutterWidth+'px'
					});
				});
				hiding = false;
			}
		}
		section.find('.shutter:last')[0].addEventListener('webkitTransitionEnd', goToNext, true);
		section.find('.shutter:last')[0].addEventListener('transitionend', goToNext, true);
		section.find('.shutter').each(function(){
			$(this).css({
				right:0+'px'
			});
		});
		setTimeout(function() {
			animateTwitter(section, shutterWidth);
		}, 2000);
	};//animateTwitter

The CSS

/* twitter */
.twitter{/*container*/
	width:240px;
	padding: 10px;
	float: left;
	overflow: hidden;
}
.twitter li{/*each tweet is an li*/
	list-style: none;
	display: none;
	background-color: #3 3ccff;
	background-image:-webkit-gradient(radial, 50% 50%, 1, 50% 50%, 170, from(#33ccff), to(rgba(51,204,255,0.4)));
	background-image:-moz-radial-gradient(50% 50% 90deg,ellipse closest-side, #33ccff, rgba(51,204,255,0.5));
	color: #fff;
	padding: 10px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	font-size: 18px;
}
.twitter li:first-child{/*show the first tweet by default*/
	display: block;
}
.shutter{/*add the transition to the shutter divs*/
	-webkit-transition: right 0.2s ease-in;
	-moz-transition: right 0.2s ease-in;
}

When Apple first announced their iAd platform they mentioned that they would be releasing an SDK to allow developers to build these ads. This was intriguing as I don’t know any developers who would use an SDK to create HTML/Javascript applications, as opposed to using a text editor such as Textmate. I was a bit concerned that Apple would restrict iAd development to some sort of WYSIWYG built into the XCode application.

So anyway, when Apple officially announced iPhone 4 they released iAd JS, which was available for download as a dmg from the iPhone developer center (paid developer login required I think).

You have to install this using the mac installer but is essentially just unzips a directory into the root developer folder:

The iAdTester.app is an iphone app that you install via itunes and allows you to test your iAds on an iPhone.

The tests folder container examples of all the widgets, controls etc that can Apple has provided for used within iAds. E.g. CarouselView is the the 3D carousel which they used for the toy-story iAd which I recreated (I haven’t dug into their code so see how they’ve implemented it yet). Most of the examples show how to create controls that look and behave like native iPhone controls.

So as you can see this isn’t really an SDK but a javascript library to help in the process of creating iAds. I think this is a good approach as it allows developers to create interfaces with familiar controls but also gives them freedom to use their imagination to create anything that html5/css3 allows.

I’ll save the deployment and testing process for another post but it is fairly simple and painless

I’ve been messing around with css3 transitions and seeing how many can run simultaneously without noticeable performance lag. So, inspired by this cool bit of canvas wizardry I thought I’d create some image shattering effects to test how well css transitions could cope.

Below are two videos of the results. The first is doing simultaneously animating 25 elements in 3d and cope fine without any lag at all. The second is animating 256 elements and although there is some lag after clicking the image, the animation itself is remarkably smooth. You can view the first for yourself at http://superted.me/stuff/shatter.html on any webkit browser although the 3d effect only works on the iphone.

There were three key steps in creating this effect. The first was a function to create the image, which is essentially a collection of divs with the same background image positioned to look like a single image:

shatter.createMozaic = function(uid, first){
		var w = 320 / PANELS;
		var h = w;
		for(var i = 0, l = PANELS; i < l; i++){
			for(var j = 0; j < PANELS; j++){
				//create a div for each panel
				var div = document.createElement('div');
				div.className = 'imgSection '+uid;
				//offset each panel
				div.style.top = (j * h) + 50 + 'px';
				div.style.left = (i * w) + 'px';
				div.style.width = w + 'px';
				div.style.height = h  + 'px';
				//offset the background relative to the position of the div
				div.style.backgroundPosition = (-i * w) +'px '+(-j * h )+'px';
				var matrix = new WebKitCSSMatrix();
				//if it is the first image
				if(first){
					//no image rotation and full opacity
					div.style.webkitTransform	= matrix.rotate(0, 0, 0);
					div.style.opacity = 1;
				}
				else{
					//random X and Y rotation and a Z translation
					var newX = Math.random() * 360;
					var newY = Math.random() * 360;
					div.style.webkitTransform	= matrix.rotate(newX, newY, 0).translate(0, 0, 380);
				}
				document.body.appendChild(div);

			}
		}

	};

The second function was to break up the image by changing the rotation and translation of each div:

	shatter.shatter = function(uid){
		var sections = document.getElementsByClassName(uid);
		//loop through each panel of this image
		for(var i = 0, l = sections.length; i < l; i++){
			var theTransform = window.getComputedStyle(sections[i]).webkitTransform;
			var matrix = new WebKitCSSMatrix(theTransform);
			var newX = Math.random() * 360;
			var newY = Math.random() * 360;
			//give each panel a random X and Y rotation and set opacity to 0
			sections[i].style.webkitTransform	= matrix.rotate(newX, newY, 0).translate(0, 0, 380);
			sections[i].style.opacity = 0;
		}
	};

And finally a function to reassemble an image:

	shatter.unShatter = function(uid){
		var sections = document.getElementsByClassName(uid);
		//loop through each panel of this image
		for(var i = 0, l = sections.length; i < l; i++){
			var matrix = new WebKitCSSMatrix();
			sections[i].style.webkitTransform	= matrix.rotate(0, 0, 0).translate(0, 0, 0);
			sections[i].style.opacity = 1;
		}

	};

And of course some css was needed to handle the transitions

.imgSection {
	position: absolute;
	-webkit-transition-property: -webkit-transform, left, opacity;
	-webkit-transition-duration: 1000ms, 1000ms, 1000ms;
	-webkit-transition-timing-function : ease-out, ease-out, linear;
	-webkit-transition-delay: 0, 500ms, 0;
	-webkit-backface-visibility: hidden;
	-webkit-transform-style: preserve-3d;
	opacity:0;
}
.img1{
	background: url(../img/cb1.jpg) no-repeat 0 0;
}

Hi, thanks for visiting my blog, here’s a bit about me.

My name is Ted. I’m not that super. However I did enjoy watching Superted as a kid and thought it would make a good blog title so there you go.

I’m a web interface developer by trade so that is what I’ll be blogging about mostly. I’m really interested in innovative user interfaces and data visualisation using the latest funky HTML5 and CSS3 techniques so I plan to talk about that a fair bit as well as other stuff which catches my eye.

You can find out more about me and my contact details at my portfolio site tedlittledale.co.uk. I also thought I’d better be a tweeter if I’m going to try to be a blogger so I’d love for you to follow me and boost my numbers (I currently have 3 followers).