6 ms·
W3C HTML5 Spinning Logo — Flick with finger or mouse in WebKit
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.
- eferraiuolo 16y agoThis 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.
- rob_react 16y agoYUI 3.3, now with 100% more spinny logo
- eferraiuolo 16y ago:-) I wanted to test out the device-independant quester events after I saw this from Boaz: http://code.bocoup.com/html5logo/ http://code.bocoup.com/html5logo/
- Uchikoma 16y agoTouched my Dell screen, nothing happened.
- amadeus 16y agoI improved this with a couple lines of CSS to add 3d support. http://fun.amadeusamade.us/improvedSpinner/ http://fun.amadeusamade.us/improvedSpinner/
- eferraiuolo 16y agoNice! Now you can tell which way it's spinning. I updated mine to include your CSS additions.
- amadeus 16y agoAwesome! 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/ http://fun.amadeusamade.us/iphone/ (Warning, my deceleration method is gehetto, so please forgive, I coded it in a rush :) )