| |
Doctor Who: The WebKit Implementation |
| |
monkeyson2 (17:38 15/8/2009)
Mark76 (17:51 15/8/2009)
monkeyson2 (17:56 15/8/2009)
Mark76 (18:04 15/8/2009)
Mark76 (18:12 15/8/2009)
monkeyson2 (18:24 15/8/2009)
monkeyson2 (18:35 15/8/2009)
Mark76 (19:38 15/8/2009)
Acornut (19:58 15/8/2009)
monkeyson2 (20:13 15/8/2009)
Mark76 (16:21 16/8/2009)
monkeyson2 (17:17 16/8/2009)
filecore (19:40 16/8/2009)
Mark76 (20:47 16/8/2009)
flibble (23:31 16/8/2009)
monkeyson2 (12:16 30/8/2009)
|
| |
|
Phil Mellor |
Message #110951, posted by monkeyson2 at 17:38, 15/8/2009 |
 Please don't let them make me be a monkey butler
Posts: 12380
|
I've been playing with HTML 5 and CSS animations:
http://www.monkeyson.info/random/webkit/doctorwho/
Get the latest WebKit nightly build to see it properly.
I'd be particularly interested to know whether the audio starts at the right time, and if the right fonts are used - particularly if you don't have them installed on your computer (Gill Sans, Futura and Futura Condensed Medium). I'd also like to know how toasty your processor gets - it uses about 96% of my MacBook Pro's CPU 
It almost works in Safari 4 - it gets a little jerky and the 3D transformations don't work. Google Chrome might be OK, but I've not tried it.
Not sure how other browsers will respond - these new facilities make 'degrading gracefully' a whole new challenge! |
| |
 [ Log in to reply ] |
| |
|
Mark |
Message #110954, posted by Mark76 at 17:51, 15/8/2009, in reply to message #110951 |
Posts: 122
|
No sound on Seamonkey (Gecko browser).
I'll install one of the Linux webkit browsers and let you know how it does on that. |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #110956, posted by monkeyson2 at 17:56, 15/8/2009, in reply to message #110954 |
Please don't let them make me be a monkey butler
Posts: 12380
|
Jesus! It works on an iPhone!
(Apart from the sound and the fonts  )
EDIT: how bizarre, it's stopped working. |
| |
[ Log in to reply ] |
| |
|
Mark |
Message #110957, posted by Mark76 at 18:04, 15/8/2009, in reply to message #110956 |
Posts: 122
|
Tried it on Midori. Looked completely different to how it looked on Seamonkey.
Still no sound though
Going to try Firefox-3.5 |
| |
[ Log in to reply ] |
| |
|
Mark |
Message #110958, posted by Mark76 at 18:12, 15/8/2009, in reply to message #110957 |
Posts: 122
|
Doesn't want to know Firefox-3.5 |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #110959, posted by monkeyson2 at 18:24, 15/8/2009, in reply to message #110958 |
Please don't let them make me be a monkey butler
Posts: 12380
|
Looks like I've created a web page which is even less compatible than Microsoft can manage. Yay!
I'll try uploading a video shortly of how it's "supposed" to look. |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #110960, posted by monkeyson2 at 18:35, 15/8/2009, in reply to message #110959 |
Please don't let them make me be a monkey butler
Posts: 12380
|
Video! http://www.youtube.com/watch?v=wIxDl7UKiK8
The vortex looks better here: out of focus and with bloom lighting. Who needs screen recording software?  |
| |
[ Log in to reply ] |
| |
|
Mark |
Message #110963, posted by Mark76 at 19:38, 15/8/2009, in reply to message #110960 |
Posts: 122
|
Oh... So that's what it's supposed to look like.
I have many missing frames. |
| |
[ Log in to reply ] |
| |
|
Blind Moose |
Message #110968, posted by Acornut at 19:58, 15/8/2009, in reply to message #110951 |
 No-eye-deer (No Idea)
Posts: 487
|
I've been playing with HTML 5 and CSS animations: Unfortunately it's very slow and jerky on IE 8,
thought for a minute I was using Fresco!!! |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #110969, posted by monkeyson2 at 20:13, 15/8/2009, in reply to message #110968 |
Please don't let them make me be a monkey butler
Posts: 12380
|
I've been playing with HTML 5 and CSS animations: Unfortunately it's very slow and jerky on IE 8,
thought for a minute I was using Fresco!!!
I should probably use Modernizrto handle more browsers. |
| |
[ Log in to reply ] |
| |
|
Mark |
Message #110995, posted by Mark76 at 16:21, 16/8/2009, in reply to message #110969 |
Posts: 122
|
Can you do one for Gecko browsers? |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #110996, posted by monkeyson2 at 17:17, 16/8/2009, in reply to message #110995 |
Please don't let them make me be a monkey butler
Posts: 12380
|
Can you do one for Gecko browsers? It would take considerably more work.
The neat thing about CSS animations is that you can just specify the start and end properties and the browser will handle the rest.
The vortex is a series of overlapping images with scale and rotate transformations applied; there's just a little bit of javascript to pre-load the images and randomise the order in which they are displayed.
Similarly, the spinning titles are just CSS transformations applied at various stages of the animation - initial position is the flip; followed by the correct orientation; the third step is just zoomed in a bit, and the final step is zoomed in a lot with 0 opacity (to fade it out as it zooms towards you).
The BBC and programme titles are simple animations that just change the opacity.
Again, there's a little bit of javascript to ensure the animations start at the right time, but I'm sure there should be a way to schedule them just in CSS (perhaps have a very long first step where the item is invisible?)
To get this working in Gecko I think I'd have to find substitutes for the 2D and 3D translations and the animation mechanism - more than an afternoon's work (which is how long the WebKit version took).
I really hope these functions get adopted as standards, but frankly I'm not optimistic. It'll be years before IE supports such neat ideas, particularly as Microsoft seem happier to be pushing Silverlight.
So whilst I wouldn't build a site which relied on such things, it may be nice to embellish a page for browsers which do support them. Buttons which nudge forward when you hover over them, Wii style, for example. |
| |
[ Log in to reply ] |
| |
|
Jason Togneri |
Message #110999, posted by filecore at 19:40, 16/8/2009, in reply to message #110996 |
Posts: 3867
|
What wonderful enhancements. I'm sure the people who thought up the <blink> tag in 1995 probably thought the same thing. I'd like substantive content, thanks, and not just bandwidth-consuming pretty effects. Just my opinion, I'm a boring sod anyway. |
| |
[ Log in to reply ] |
| |
|
Mark |
Message #111003, posted by Mark76 at 20:47, 16/8/2009, in reply to message #110999 |
Posts: 122
|
The <video></video> tag in html5 is meant to be a straight replacement for all that flash that's currently thrashing peoples' CPUs.
If the big browsers can ever agree on which codecs to use |
| |
[ Log in to reply ] |
| |
|
Peter Howkins |
Message #111005, posted by flibble at 23:31, 16/8/2009, in reply to message #111003 |
Posts: 891
|
The <video></video> tag in html5 is meant to be a straight replacement for all that flash that's currently thrashing peoples' CPUs. No the <video> tag is a for video elements, a subsection of flash is video (youtube etc).
For all the other uses of flash, mini games to while away the hours at the office, then <video> is not replacement.
The 'HTML5' way of that stuff is to use <canvas> and ECMAscript driving the DOM. |
| |
[ Log in to reply ] |
| |
|
Phil Mellor |
Message #111116, posted by monkeyson2 at 12:16, 30/8/2009, in reply to message #111005 |
Please don't let them make me be a monkey butler
Posts: 12380
|
The <video></video> tag in html5 is meant to be a straight replacement for all that flash that's currently thrashing peoples' CPUs. No the <video> tag is a for video elements, a subsection of flash is video (youtube etc).
For all the other uses of flash, mini games to while away the hours at the office, then <video> is not replacement.
The 'HTML5' way of that stuff is to use <canvas> and ECMAscript driving the DOM.
El Reg makes a good point that none of this will replace Flash until there are decent visual editors for designers to use. Writing a load of CSS and JS in Notepad just won't be acceptable. 
Updated video - yay for screen recording and 64 bit Safari in Snow Leopard!
http://www.youtube.com/watch?v=E2kz8NQuLBo |
| |
[ Log in to reply ] |
| |
|
