W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit • Hacker News Board

W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#1

Post by eferraiuolo » Thu, Jan 20, 2011, 4:42 PM UTC

This simple example is using YUI 3.3.0 which has support for high-level, device-independant, gesture events which made it easy to make the logo spin when flicked with a mouse or touch gesture. It is also using YUI 3’s CSS transitions module to do the rotateY CSS Transform.

It works in WebKit browsers: Safari, Chrome, MobileSafari (iOS), Android, and should work on BlackBerry Touch 6.0.

View the source on the page, its short and straight forward.

W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit
925html.com

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#2

Post by eferraiuolo » Thu, Jan 20, 2011, 4:49 PM UTC

This simple example is using YUI 3.3.0 which has support for high-level, device-independant, gesture events which made it easy to make the logo spin when flicked with a mouse or touch gesture. It is also using YUI 3’s CSS transitions module to do the rotateY CSS Transform.

It works in WebKit browsers: Safari, Chrome, MobileSafari (iOS), Android, and should work on BlackBerry Touch 6.0.

View the source on the page, its short and straight forward.

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#3

Post by rob_react » Thu, Jan 20, 2011, 5:05 PM UTC

YUI 3.3, now with 100% more spinny logo

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#4

Post by eferraiuolo » Thu, Jan 20, 2011, 5:23 PM UTC

rob_react wrote: post #3

YUI 3.3, now with 100% more spinny logo

:-) I wanted to test out the device-independant quester events after I saw this from Boaz: http://code.bocoup.com/html5logo/

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#5

Post by Uchikoma » Thu, Jan 20, 2011, 5:29 PM UTC

Touched my Dell screen, nothing happened.

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#6

Post by amadeus » Thu, Jan 20, 2011, 5:34 PM UTC

I improved this with a couple lines of CSS to add 3d support.

http://fun.amadeusamade.us/improvedSpinner/

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#7

Post by eferraiuolo » Thu, Jan 20, 2011, 5:49 PM UTC

amadeus wrote: post #6

I improved this with a couple lines of CSS to add 3d support. http://fun.amadeusamade.us/improvedSpinner/

Nice! Now you can tell which way it's spinning. I updated mine to include your CSS additions.

Re: W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit

#8

Post by amadeus » Thu, Jan 20, 2011, 5:55 PM UTC

eferraiuolo wrote: post #7

amadeus wrote: post #6

I improved this with a couple lines of CSS to add 3d support. http://fun.amadeusamade.us/improvedSpinner/

Nice! Now you can tell which way it's spinning. I updated mine to include your CSS additions.

Awesome! Yeah this reminds me of a little experiment I did back in the day that was similar, but not using the logo of course:

http://fun.amadeusamade.us/iphone/

(Warning, my deceleration method is gehetto, so please forgive, I coded it in a rush :) )