Friday, April 9th, 2010
The Man from Hollywood says yes!
Category: CSS
View source to see the scenes:
HTML:
and then the acts:
CSS:
-
-
#scene-2 .act-1 {
-
display: block;
-
top: 200px;
-
left: 1080px;
-
font-size: 380%;
-
overflow: hidden;
-
width: 260px;
-
-webkit-transition: left 0.1s linear;
-
}
-
-
#scene-2 .act-1.position-1 {
-
left: 800px;
-
-webkit-transition: left 0.1s linear;
-
}
-
-
#scene-2 .act-1.position-1.position-2 {
-
left: 540px;
-
width: 800px;
-
-webkit-transition: left 0.2s ease-in;
-
}
-
-
#scene-2 .act-1.position-1.position-2.exit {
-
left: -800px;
-
}
-
And then the direction:
JAVASCRIPT:
-
-
direct('#scene-2 .act-1', 'position-1', 1800);
-
As Steve would say. "Oh, this was all done with HTML5."
Related Content:
4.9 rating from 18 votes
Can we stop now with this ridiculous HTML 5 gimmick ?
Since when the acronym “HTML 5″ includes css transitions and every emergent web technologies / proof of concept ?
@ywg – Perhaps I’m missing something, but I don’t see any reference to HTML5 on this post. It just looks like CSS3 to me.
FYI, HTML5 is not an acronym and neither is CSS. Ajax is though.
The Flashblock add-on will have to be updated and renamed to “CSS-Transitionblock”.
@ywg:
The polite response:
I think the “HTML 5″ reference was actually more a dig at steve jobs than anything else. And in any case the sound track is done using the HTML5.
The angry response:
Look at the source code you n00b! [section], [footer] and [audio] tags are all HTML5.
As for the post topic – it’s a pretty sweet demo, and Quentin Tarantino dialogue is perfect for this. Now, when the heck is FF gonna catch up with webkit.
At this rate we’ll be bored with “HTML5″ before we can even properly leverage it in our projects. How long did it take before people tired of hearing “Web 2.0″?
Is the meme now that HTML5 also automatically includes CSS3 and other experimental CSS3 stuff?
@okonomiyaki3000 : HTML5 and CSS are acronyms
@iliad : you make a point, you’ve made a valid point. But let’s be honest this demo is not about new tags, it’s about CSS transitions.
As usual, Ajaxian commenters are of topic.
That’s a pretty nice demo. Congrats ;)
* I certainly meant “off topic” (:/ I’m being off topic also)
@ywg: “HTML5 and CSS are acronyms”
Actually technically they’re initialisms (a type of abbreviation, acronym is also a type of abbreviation, but a different one). Now personally, I don’t care about the distinction but I think okonomiyaki3000 was being a bit of a grammar nazi =D
Back on topic: The source code for this is a bit crazy, no wonder the guy doesn’t sleep :)
amazing amount of code to write by hand. methinks there’s a need for HTML5/CSS3 authoring tools that will ease production of complicated scenes, complete with effect libraries, etc. I mean who’s writing fancy Flash scenes in AS?
Just for the record, I’m not a grammar nazi. I’m a vocabulary nazi. Do I really have to explain the difference in meaning between those two words?
really inspiring stuff, well done Tyler!
..suppose I should go create that IronMan animation i’ve been wanting to do now ;-)
well done again.
@okonomiyaki3000
: a word (as NATO, radar, or laser) formed from the initial letter or letters of each of the successive parts or major parts of a compound term; also : an abbreviation (as FBI) formed from initial letters : initialism
or go to http://en.wikipedia.org/wiki/Acronym_and_initialism and read up. For all intents and purposes HTML and CSS can be considered an acronym.
To argue a topic which is not universally agreed upon at a tech site proves your mettle. You don’t have to always correct others or be right you know.