Friday, April 9th, 2010

The Man from Hollywood says yes!

Category: CSS

<p>Tyler Gaw has built a fun kinetic video demo that uses a bunch of advanced CSS (gradients, transforms, transitions).

kinetic-css

View source to see the scenes:

  1. <dt>Chester <!-- Quentin Tarantino --></dt>
  2.     <dd id="scene-2">
  3.         <p class="act-1">Ok, Ted</p>
  4.         <p class="act-2">pay attention here. I'm gonna make two piles here on the bar.</p>
  5.         <p class="act-3"><strong>one pile,</strong> <span>which is</span> <em>yours</em></p>
  6.         <p class="act-4"><i>and</i> <strong>another pile,</strong> <span>which could<b></b></span> <em>be yours</em></p>
  7.         <p class="act-5"><span>What you have to realize is we're gonna do this thing</span> <strong>one way</strong> <em>or the other</em></p>
  8.         <p class="act-6"><i>Whether it's</i> <em>you</em> <strong>who holds the axe</strong> <span>or</span></p>
  9.         <p class="act-7"><i>a</i> <strong>mexican maid</strong> <span>or</span></p>
  10.         <p class="act-8"><strong>some bum</strong> <span><b>we</b> <b>yank</b> <b>off</b> <b>the</b> <b>street</b></span></p>
  11.     </dd>

and then the acts:

  1. #scene-2 .act-1 {
  2.     display: block;
  3.     top: 200px;
  4.     left: 1080px;
  5.     font-size: 380%;
  6.     overflow: hidden;
  7.     width: 260px;
  8.     -webkit-transition: left 0.1s linear;
  9. }
  10.  
  11. #scene-2 .act-1.position-1 {
  12.     left: 800px;
  13.     -webkit-transition: left 0.1s linear;
  14. }
  15.  
  16. #scene-2 .act-1.position-1.position-2 {
  17.     left: 540px;
  18.     width: 800px;
  19.     -webkit-transition: left 0.2s ease-in;
  20. }
  21.  
  22. #scene-2 .act-1.position-1.position-2.exit {
  23.     left: -800px;
  24. }

And then the direction:

javascript
< view plain text >
  1. direct('#scene-2 .act-1', 'position-1', 1800);

As Steve would say. “Oh, this was all done with HTML5.”

Related Content:

Posted by Dion Almaer at 6:55 am
14 Comments

++++-
4.8 rating from 20 votes

14 Comments »

Comments feed TrackBack URI

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 ?

Comment by ywg — April 9, 2010

@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.

Comment by cballou — April 9, 2010

FYI, HTML5 is not an acronym and neither is CSS. Ajax is though.

Comment by okonomiyaki3000 — April 9, 2010

The Flashblock add-on will have to be updated and renamed to “CSS-Transitionblock”.

Comment by WillPeavy — April 9, 2010

@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.

Comment by iliad — April 9, 2010

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?

Comment by travisalmand — April 9, 2010

@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.

Comment by ywg — April 9, 2010

As usual, Ajaxian commenters are of topic.

That’s a pretty nice demo. Congrats ;)

Comment by fredck2 — April 9, 2010

* I certainly meant “off topic” (:/ I’m being off topic also)

Comment by fredck2 — April 9, 2010

@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 :)

Comment by iliad — April 9, 2010

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?

Comment by Moos — April 10, 2010

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?

Comment by okonomiyaki3000 — April 10, 2010

really inspiring stuff, well done Tyler!

..suppose I should go create that IronMan animation i’ve been wanting to do now ;-)

well done again.

Comment by johnantoni — April 12, 2010

@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.

Comment by f7 — April 12, 2010

Leave a comment

You must be logged in to post a comment.