So I’m sure many of you will have seen Steve Jobs show off the new iAd platform and if you’re a developer like myself you were probably interested to see that the iAd platform is HTML5 based. As part of the Toy Story 3 iAd there was a nice 3d carousel for the video navigation as shown below.
Anyway, Jobsie reckoned that making something like this in HTML5 was ‘real easy’ so I thought I’d see if he was right. If you’ve got an iphone head over to bit.ly/iAdEasy for the full ‘emotional’ experience of the results, or you can see a screencast below.
I used pictures of my brother’s dog, Chopper, instead of pixar characters as his images aren’t copywrited and he doesn’t have lawyers!
So was it real easy? Well it wasn’t real easy but that was partly as there isn’t a huge amount of documentation or tutorials out there.
[Update] To clarify this point, all CSS3 transitions/animations are fully documented on the Webkit and Apple websites, it’s just that it takes a bit of digging to find exactly what you are looking for and there aren’t many tutorials which show features like WebKitCSSMatrix in action.
I used the webkit team’s morphing cube example as my starting point as that showed how to get a bunch of flat elements arranged as a 3d ring. I just created a function to add the 3d transform to each li dynamically rather than in the css file:
jAd.createRing = function(){
var items = shape.getElementsByTagName('li');
var angle = 360 / items.length, newAngle;
for(var i = 0, l = items.length; i < l; i++){
newAngle = (angle * i);
var matrix = new WebKitCSSMatrix();
items[i].style.webkitTransform = matrix.rotate(newAngle, 0, 0).translate(0, 0, 380);
}
}
The next step was to bind the finger swiping events. Webkit allows you to bind ‘touchstart’, ‘touchmove’ and ‘touchend’ events to any html element and from the touch event you can access the screenPosition and the time of the touch. Using these it is easy to determine which direction the swipe is and how hard the user swiped
jAd.bindTouches = function(){
//ignore the touchmove event
document.addEventListener('touchmove', function(e) {e.preventDefault();});
document.addEventListener('touchstart', function(e) {
e.preventDefault();
//e.touches is an array (for multitouch usage) but we just want the first finger down
var touch = e.touches[0];
//save the time and the screenY coordinate
jAd.currentTouch.startY = touch.screenY;
jAd.currentTouch.startTime = e.timeStamp;
}, false);
document.addEventListener('touchend', function(e) {
e.preventDefault();
var touch = e.changedTouches[0];
jAd.currentTouch.endY = touch.screenY;
//work out the speed using the saved coordinate and time
var time = e.timeStamp - jAd.currentTouch.startTime;
var speed = (jAd.currentTouch.startY - jAd.currentTouch.endY)/time;
//send the speed to the spin function
jAd.spin(speed);
}, false);
};
The speed that is sent to the spin function can be positive or negative and this determines which way the nav spins.
Next I had to create a function to change the rotation of the <ul> element which contains the <li> elements that make up the ring.
jAd.spin = function(speed){
//get a string representation of the current 3dCSSMatrix of the <ul> (jAd.shape)
var theTransform = window.getComputedStyle(jAd.shape).webkitTransform;
//from this create a new WebKitCSSMatrix
var matrix = new WebKitCSSMatrix(theTransform);
//do some stuff to get a number that is somewhere between 0 and 179
var newX = Math.round(speed * 120);
newX = (newX > 179) ? 179 : ((newX < -179) ? -179 : newX);
//rotate the <ul> in the x plane by this value
shape.style.webkitTransform = matrix.rotate(newX, 0, 0);
};
Note that this function doesn’t animate the ring, it simply changes the rotateX value of the webkit-transform css property. In order to get the animation to happen we have to give the <ul> some webkit-transition css.
#shape {
/* this tell it to animate whenever the -webkit-trasform property changes */
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1500ms;
-webkit-transition-timing-function : ease-out;
-webkit-transition-delay: 0;
}
And that’s pretty much it, feel free to dig around in the source code and do some experimenting. I haven’t added any interaction to the contents of the carousel yet, I’ll be doing that soon and writing another post.
This is my first time I’ve written a how-to so sorry if I glossed over anything. Feel free to post questions in the comments and I’ll do my best to answer them
[...] This post was mentioned on Twitter by Dion Almaer, Daniel Erickson, Rafał Piekarski, neilellis, topsy_top20k_en and others. topsy_top20k_en said: Ted Littledale has recreated the 3d vertical carousel that Steve showed in iAd http://superted.me/toy-story-iad-navigation [...]
Social comments and analytics for this post…
This post was mentioned on Twitter by dalmaer: Ted Littledale has recreated the 3d vertical carousel that Steve showed in iAd http://superted.me/toy-story-iad-navigation...
Good work, Ted, nice write up! I’d be happy to act as your brother’s dog’s legal representative in the event of you taking this thing in a commercial direction.
[...] video above isn't from Steve Jobs' keynote, but is by Ted Littledale. He created a 3d navigation carousel that mimics the iAds demo that Steve gave: I used the webkit team’s morphing cube example as my [...]
[...] video above isn’t from Steve Jobs’ keynote, but is by Ted Littledale. He created a 3d navigation carousel that mimics the iAds demo that Steve gave: I used the webkit team’s morphing cube example as my [...]
Great demo. Which devices besides the iPhone and Android uses these new events?
Thanks Patrick. I think currently only iPhone and Android support these events, which are a webkit dom extension. PPK has a done some great research into touch events across various mobile platforms, http://www.quirksmode.org/mobile/tableTouch.html
One quick note is the effect is A LOT smoother on an actual device than on the video you used to demo it.
[...] video above isn’t from Steve Jobs’ keynote, but is by Ted Littledale. He created a 3d navigation carousel that mimics the iAds demo that Steve gave: I used the webkit team’s morphing cube example as my [...]
[...] (Source : Ajaxian – Site : Super-Ted) [...]
[...] to see if it’s actually so easy to create an iAd.Well, probably not, because as he wrote in his blog post he had to go through some documentation from the Webkit team and play around with functions and [...]
Not bad, except it’s bit slow on 3G.
[...] volete provare di persona, prendete il vostro iPhone e cliccate su questo link. Qui invece potrete trovare maggiori informazioni dal punto di vista di codice, con una breve [...]
[...] volete provare di persona, prendete il vostro iPhone e cliccate su questo link. Qui invece potrete trovare maggiori informazioni dal punto di vista di codice, con una breve [...]
[...] volete provare di persona, prendete il vostro iPhone e cliccate su questo link. Qui invece potrete trovare maggiori informazioni dal punto di vista di codice, con una breve [...]
[...] the Toy Story 3 iAd from the keynote? Well, iPhone developer Superted was curious to see if recreating the 3D Carousel above in html5 was really as easy as Steve [...]
Can you post a download link?
If you go to the demo in a browser you can grab the source files from there, they aren’t compressed.
[...] pelo que a Apple criou, o desenvolvedor Ted Littledale postou um tutorial de como recriar o menu 3D em seu blog Superted, trazendo inclusive um vídeo demonstrativo: [...]
[...] the Toy Story 3 iAd from the keynote? Well, iPhone developer Superted was curious to see if recreating the 3D Carousel above in html5 was really as easy as Steve [...]
[...] the Toy Story 3 iAd from the keynote? Well, iPhone developer Superted was curious to see if recreating the 3D Carousel above in html5 was really as easy as Steve [...]
[...] Bez wątpienia iAd jest nową jakością przynajmniej na rynku reklamy mobilnej. Programista Ted Littledale postanowił sprawdzić czy przygotowanie reklamy w HTML5 jest w istocie “real easy” jak [...]
[...] más información y detalles sobre el desarrollo incluyendo el código, en el sitio de Ted Littledale.Internet, Medios y Publicidad, iPhone, iPods0HTML5, iAd /**/ « anterior | Fondo de pantalla [...]
[...] the Toy Story 3 iAd from the keynote? Well, iPhone developer Superted was curious to see if recreating the 3D Carousel above in html5 was really as easy as Steve [...]
[...] [...]
Hey Ted,
under what license are you releasing this?
Jaka
[...] Pro Tweets Ted Littledale has recreated the 3d vertical carousel that Steve showed in iAd http://superted.me/toy-story-iad-navigation dalmaer – Mon 19 Apr 22:08 All Things [...]
Thanks for the write up! I’ve been reading up on HTML5 and trying to find tutorials. Will need to look into webkit as well.
This the only source code I could see from your demo, (see below) how and where do all the other functions work and fit in??
thanks for explaining all this, cheers
Toy Story Demo
window.addEventListener(‘load’, jAd.init, true);
function initScreen() { setTimeout(“window.scrollTo(0,1);”,100); }
function updateOrientation() {
initScreen();
}
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
ChopperThis is chopper. He’s a pretty cool dog.
The javascript and css are in external files, you can view the js here : http://superted.me/iAds/js/jAd.js and the css is here: http://superted.me/iAds/css/main.css
Hi Ted
thanks for the refs. I copied and pasted these files and uploaded to http://www.gillan.mobi/iAds just for fun and to try to get to understand a little of how it all works. However, the rotating nav doesnt scale down to fit in the iphone window. As the files appear to be identical to yours, can you think why this would happen? I have also replicated the file structure to created etc etc.
Just say if you dont have time, (or cant be bothered to look) I wont be offended in the slightest
Cheers
Alistair
Ted
I’m getting more interested in HTML5 on iDevices, what is your work status at the moment, there may be some work here. I also gave your details to one of the digital Creative directors here (Dave Birss)
P.S deleted the meta tags, but unsurprisingly it had no affect on the scaling of the 3D navigation, wierd. wonder if it could be Dreamweaver CS4 causing the problem, what do you use to write the html?
Hey Ted,
I’m trying to figure out how to use the
window.getComputedStyle(element).webkitTransformpart of the Safari reference. I am also using jQuery. Maybe this is a really beginner question, but I have tried doing the following:
var theTransform = window.getComputedStyle($("#id")).webkitTransform;AND
var id = $("id");var theTransform = window.getComputedStyle(id).webkitTransform;
and can’t get that to work. Am I close to figuring this out… if you don’t have time to answer that’s fine. Just wondering how you got that working (trying to retrive the translateX data for a [ul] element.)
Nice.
Just chiming in to say thanks — for the clear code, and for illuminating things like WebKitCSSMatrix and window.getComputedStyle(element).webkitTransform().
window.getComputedStyle expects a native dom element rather than a jquery object which is probably why it is failing
try var id = $(‘id’)[0];
This will make the var id a native dom element rather than a jquery object.
[...] Demo [...]
[...] Tutorial Source Toy Story iAd Navigation: [...]
Hey Ted,
Very nice job.
There is a way too change the carousel to be horizontal display?
Thanks,
Hey Ted,
Very nice job!!
Any suggestion how to horizontal the carousel??
Thanks eran
What a great navigation tool. We are playing with it on our iPhones and iPads. One question maybe you know the answer. Is it possible to create links to the individual elements/planes? WIth the a href code we attach links to each plane, but this only works in web browser, not on the iPhone/iPad. Is there a easy way to create a clickable button in your navigator?
Found the solution by rewriting some code in the Javascript.
Hi Ted, this is great…but I can’t understand the lines above:
var newX = Math.round(speed * 120);
newX = (newX > 179) ? 179 : ((newX < -179) ? -179 : newX);
Care to explain? Why changing the x value? I guess my math is not that good afterall
Thanks