Snow Stack is Here
July 11th, 2009What is Snow Stack?
A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.
You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or later for a slightly slower experience.
Instructions
Click here to open the Snow Stack live demo. Arrow keys to move, “Space” to toggle magnify mode. Mouse click on an image to view on Flickr. You need to “right arrow” on the right wall to get more photos loaded in.
Many thanks to Simon Fraser for his help with performance profiling Snow Stack.
And yes, OS X Leopard with WebKit nightly will also do accelerated 3D transforms now, just like iPhone Safari.
Implementation Notes
- Larger images load in after 2 seconds for high quality zoomed images.
- State changes are handled via CSS.
- Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
- Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
- This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
- Animating transforms with a transform list must have only 1 function to animate in hardware.
- Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
- Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
- Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
- The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
- To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
- Snow Stack’s source code is now available from the CSS-VFX project.
Other CSS Visual Effects Demos
Updates and iPhone Apps
- Snow Stack’s source code (with examples on how to use your own images) is now available from the CSS-VFX project.
- I also work on iPhone apps in my spare time, if you have a moment, please check out my iPhone app, iRhyme, a song writer’s rhyming dictionary.
- The song in the video (a surprisingly frequent question) is Ratatat – “Beat 1” from their demo album “9 Beats”
Technorati Tags: WebKit, Snow Leopard, Leopard, Mac OS X, graphics, 3D, CSS Effects, HTML, JavaScript
July 12th, 2009 at 1:44 pm
[…] Charles Ying shows us Snow Stack: […]
July 12th, 2009 at 2:20 pm
genius.
July 12th, 2009 at 2:23 pm
I just tried it, it’s way too cool, congrats!
July 12th, 2009 at 2:42 pm
[…] This video show it all, more info. […]
July 12th, 2009 at 3:17 pm
Amazing. Just stunning! Congratulations.
July 12th, 2009 at 4:08 pm
Nifty! What is the song?
July 12th, 2009 at 4:11 pm
[…] satine.org » Snow Stack is Heresatine.org […]
July 12th, 2009 at 6:09 pm
Hahaha…. looks like Silverlight!
July 12th, 2009 at 6:37 pm
Stunning work!
One thing that, from an open web evangelism point of view when we talk about Flash and Silverlight: This demo works (mostly) in regular Safari 4 too, just with less whizzy effects. That core principal that on the web, content remains accessible.
The regular release-version Safari 4 seems to have some image overlap issues on the selected item, which can be corrected with a higher
z-indexon the containing div. Would be a great example of the progressive enhancement that these effects that can be implemented with.July 12th, 2009 at 8:03 pm
[…] Charles Ying shows us Snow Stack: […]
July 12th, 2009 at 8:19 pm
홍덕의 생각…
나: Snow Stack is Here / 미친 WebKit / 경배하라 // 기준: 헐 / Adobe는… // 나: Adobe는 IE6한테 감사해야함…
July 12th, 2009 at 8:26 pm
Awesome.. BTW:
The song is track number 1 from the unofficial Ratatat album “9 Beats”, ~2006 Hero Music Ltd.
July 12th, 2009 at 8:35 pm
[…] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 12th, 2009 at 8:46 pm
[…] Snow Stack: 3D visual effects using web standards Amazing 3D effects with OS X Snow Leopard and Webkit using only HTML, CSS and JavaScript. Flash and Silverlight must be losing sleep at night. […]
July 12th, 2009 at 8:58 pm
What song is playing in the background of the video?
July 12th, 2009 at 9:39 pm
[…] 只要用CSS就可以完成這些效果: 這個連結有作者的詳細開發說明, 據說只花了三天晚上的數小時就做出來了, […]
July 12th, 2009 at 10:02 pm
[…] Last night, WebKit got more interesting: the hardware-accelerated CSS 3D Transforms spec that is supported on the iPhone came to Leopard. CSS Animations are quite nice to work with on Safari, and this new platform for it enables some pretty cool effects. […]
July 13th, 2009 at 1:46 am
Wow. Javascript taking flash head on.
Now come the f*ck on Microsoft. Stop holding back the web.
July 13th, 2009 at 2:31 am
[…] Choose the Moon: Pre-launch JSON: What It Is, How It Works, and How to Use It Blog Custom-B… satine.org Snow Stack is Here How to Photograph a Sunset: 6 steps (with pictures) – wikiHow 36 Color Gradient Sets For […]
July 13th, 2009 at 3:14 am
I’m using Opera browser (which is known to be most standard compilant), and all I can see is a small static picture on black background. Congratulations on all the effort wasted on non-portable code.
@Toine, if this stuff runs only in Safari, then it’s as good as Microsoft single-platform products.
July 13th, 2009 at 3:32 am
@Josip: This is using CSS Transforms, which is a (Apple-submitted) W3C in-development standard. Don’t blame Opera for not having implemented it yet. :)
July 13th, 2009 at 3:32 am
(Er, that should’ve been: ‘Don’t blame the dev/Apple for Opera…’.)
July 13th, 2009 at 3:37 am
Hey, my pic is there! Orange wilted gerbera!
July 13th, 2009 at 3:40 am
Woah! This is badass. I can’t wait for the finished version.
July 13th, 2009 at 6:08 am
I agree with Ben Ward’s comment #9 re: z-index in latest Safari 4 on Win (..may just be installing Snow Leopard over Winblows :)
Seriously hoping the W3C embrace it – simply awsome work!!
July 13th, 2009 at 7:09 am
[…] satine.org » Snow Stack is Here. a demo of 3D CSS in webkit. only works in latest safari but it’s pretty damn cool. […]
July 13th, 2009 at 7:12 am
@millenomi exactly.
CSS transformations are almost a sealed deal. When Gecko (Firefox) and Presto (Opera) support them fully it\’s time for some non-IE javascript driven sites.
Only by temporarily splitting the web\’s user base can Microsoft be forced to adjust their policy for web browser development.
July 13th, 2009 at 8:03 am
“Animating transforms with a transform list must have only 1 function to animate in hardware”
Actually all transform animations will be in hardware unless you have more than one function AND one of those functions is a rotation animation of >= 180 degrees. If you’ve discovered other cases that fallback into software animation, it’s a bug. It would be really helpful if you could report it:
and someone can look into it.
Thanks…
July 13th, 2009 at 8:15 am
Ah, one thing I forgot. The rule I mentioned before (more than one function AND one of those functions is a rotation animation of >= 180 degrees) only applies to SnowLeopard. On Leopard, your rule (list must have only 1 function) is correct. This is actually overkill. We can animate many (most) function lists in hardware. I will look into tightening up the rule so we can avoid software fallback more often.
July 13th, 2009 at 8:31 am
[…] 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript An amazing demo that shows what’s possible with CSS3, HTML 5 and JavaScript. […]
July 13th, 2009 at 9:06 am
Isn’t it just Cooliris (but using CSS) – as released in 2007?
http://www.cooliris.com
July 13th, 2009 at 10:03 am
Can’t believe this is one person’s work. Great!
I know a company is doing the similar thing, using totally different technologies(C++, OpenGL, etc): http://www.cooliris.com/
July 13th, 2009 at 10:08 am
Just saw Dave’s comments. @Dave, a team is doing that in Cooliris. They use C++, OpenGL, ect. Totally different technoligies, but similar results. Cooliris calls this “3D wall”. You download it and install it as a browser plugin or as a desktop application, I think.
I think Charles’ one person work can beat the whole team in Cooliris!
July 13th, 2009 at 12:29 pm
[…] satine.org » Snow Stack is Here A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. (tags: http://www.satine.org 2009 mes6 dia13 3d JavaScript CSS WebKit) […]
July 13th, 2009 at 1:00 pm
Anyone know where I can get that wallpaper with the two stick figures looking at the hourglass?
July 13th, 2009 at 1:46 pm
“Only by temporarily splitting the web\’s user base can Microsoft be forced to adjust their policy for web browser development.”
That sounds an awful lot like the talk we heard in the bad old days of the browser wars. Thinking like that is counter to the whole idea behind the web standards movement.
July 13th, 2009 at 1:57 pm
[…] “parede” tridimensional para visualização de imagens obtidas do Flickr, intitulada Snow Stack. Um vídeo dela pode ser conferido a seguir, caso você não queira testar no […]
July 13th, 2009 at 8:05 pm
[…] Snow Stack is Here So Mr Flash and Silverlight, how do you expect to bat back things like this? Full 3D and reflections support in CSS/Javascript and HTML5 (Requires Snow Leopard) (tags: javascript css 3d webkit) […]
July 13th, 2009 at 8:20 pm
[…] satine.org » Snow Stack is Here A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. […]
July 13th, 2009 at 9:44 pm
Very nice! I’m curious if Apple would transform their website to use some of these effects one day.
July 13th, 2009 at 9:50 pm
I’m sure, this is the end of Internet Explorer. If we all use those things in our Web-Sites…
I can’t find words, this is so cool.
July 13th, 2009 at 10:02 pm
[…] Here’s a demo of what you can do with CSS3 and a webkit browser (that means chrome and safari). If it stays in webkit and doesn’t get adopted as part of the CSS3 standard then Flash is pretty safe. If it becomes part of the standard – and I see no reason why it wouldn’t in some form very similar to what webkit suggest then Flash might be a little bit more redundant. Sadly – with HTML5 now dropping video codec definitions Flash will definitely be the video presentation layer for a lot of developers for the next few years. Full details at satine. […]
July 13th, 2009 at 10:31 pm
[…] via satine.org: Snow Stake is here […]
July 13th, 2009 at 10:56 pm
[…] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions […]
July 13th, 2009 at 10:58 pm
[…] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. […]
July 13th, 2009 at 11:09 pm
[…] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions […]
July 13th, 2009 at 11:37 pm
[…] [via satine] […]
July 13th, 2009 at 11:40 pm
[…] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. […]
July 14th, 2009 at 1:35 am
[…] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 14th, 2009 at 1:56 am
[…] H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and […]
July 14th, 2009 at 2:59 am
[…] sin blogg. Det är sånt här jag vill se mer utav!Det finns ett demo att tillgå på hans blog (satine.org) som går att köras om du har Snow Leopard och Safari. Du kan även köra demot om du har Webkit […]
July 14th, 2009 at 3:06 am
Stunning work mate!
July 14th, 2009 at 3:13 am
[…] See original here: satine.org » Snow Stack is Here […]
July 14th, 2009 at 3:19 am
[…] you like this pay a visit to the developer Charles Ying’s blog and leave him your praise. Tags: Apple, CSS, Web […]
July 14th, 2009 at 3:42 am
[…] video dimostrativo fatto da Charles Ying, utilizzando una Nightly Build di Webkit su Safari di Snow Leopard, mostra tutte lo potenzialità […]
July 14th, 2009 at 6:00 am
[…] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit […]
July 14th, 2009 at 6:23 am
[…] ‘demos’ like Snow Stack, however, this will soon change. If you’re running Snow Leopard and Safari right now, you can […]
July 14th, 2009 at 6:49 am
[…] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit […]
July 14th, 2009 at 7:02 am
Not sure what is so wonderful about this. First time loading in Firefox 3.5 nothing seemed to work. Second time, OK it worked but I don’t see the “wow” effect for the end user.
July 14th, 2009 at 7:16 am
[…] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow […]
July 14th, 2009 at 7:45 am
Well good thing there’s a youtube video of how it’s supposed to work….
wont run right in safari or firefox… sooo call me when it works right!
(I love the idea tho don’t get me wrong. Just a tad much attention for something that isn’t worked out yet.)
July 14th, 2009 at 8:03 am
[…] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit […]
July 14th, 2009 at 9:14 am
[…] Un pequeño video de lo que se puede hacer con efectos CSS 3D y JS: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 14th, 2009 at 10:32 am
[…] ✖ […]
July 14th, 2009 at 10:50 am
[…] демки: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ Кроме того, блог содержит еще некоторое количество […]
July 14th, 2009 at 12:51 pm
[…] Aber es gibt Alternativen zu Flash. Welche Effekte sich allein mit HTML-Code, dem WebKit’s 3D CSS Effects Extensions und JavaScript erzielen lassen, zeigt Charles H. Ying. […]
July 14th, 2009 at 1:09 pm
[…] Nice 3D effects using CSS/JS/HTML on webkit: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 14th, 2009 at 3:00 pm
[…] satine.org via MacRumors. Share: This entry was posted on Tuesday, July 14th, 2009 at 6:00 pm. You can […]
July 14th, 2009 at 7:36 pm
[…] build of WebKit, and then after that you’re ready to go. Then you can follow the link from the website where the Snow Stack demo is hosted, which’ll lead you to the demo itself. Try this out and tell us how it […]
July 14th, 2009 at 8:05 pm
[…] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 15th, 2009 at 12:34 am
[…] que Youtube se met au caroussel en 3D avec flash, Snow Stack est un nouvel effet visuel avec les extensions 3D des CSS dans Webkit sous MacOS X. Plus besoin d’un plugin Cooliris ou […]
July 15th, 2009 at 12:35 am
[…] this videos Snow Stack Webkit 3D CSS Visual Effects form which you will gain some knowledges.Then you can follow the Snow […]
July 15th, 2009 at 12:53 am
[…] prendere già forma: nell’ultima nighty build di Webkit sono già presenti. Sul blog di Charles Ying è presente (oltre al video che ho riproposto) anche una piccola analisi. Related Posts:The Simpson […]
July 15th, 2009 at 2:07 am
[…] Snow Stack new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. In a little while we will not need flash any more, with HTML 5 released an implemented in most decent browsers andCSS extensions like snow stacks rolling out. […]
July 15th, 2009 at 4:51 am
[…] Snow Stack – CSS 3D Visual Effect with WebKit – Nett, beschleunigtes 3D-CSS… irgendwelche Standards die sowas vorsehen gibt es […]
July 15th, 2009 at 5:57 am
[…] is Snow Stack? A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and […]
July 16th, 2009 at 2:29 am
[…] CSS特效提交到W3C，让促使其成为正式的CSS标准。苹果开发者Charles Ying在博客上演示了3D CSS的视觉效果(Youtube)。 权相龙在另一篇文章中称 […]
July 16th, 2009 at 6:58 am
[…] Auf satine.org kann man nun bewundern, wozu WebKit mit HTML, CSS und JavaScript inzwischen in der La…. […]
July 16th, 2009 at 9:07 am
[…] RT @theory Snow Stack is here. WANT. http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 16th, 2009 at 11:50 am
[…] Snow stack […]
July 16th, 2009 at 10:21 pm
This is wicked! Awesome stuff
July 17th, 2009 at 2:25 am
[…] etwas weiter geht allerdings die neue 3D-CSS-Funktionalität. Sie erlaubt fast schon spektakuläre Animationen direkt aus dem Browser heraus. .. Und wenn man […]
July 17th, 2009 at 6:18 am
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo […]
July 17th, 2009 at 6:32 am
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo […]
July 17th, 2009 at 6:39 am
It’s really great!
July 17th, 2009 at 6:45 am
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo […]
July 17th, 2009 at 7:52 am
[…] will, kann sich den aktuellsten “nightly build” von Webkit laden und Snow Stack hier ausprobieren. Es sei denn man ist im Besitz des aktuellen Entwicklerbuilds von Snow Leopard. Denn […]
July 17th, 2009 at 8:16 am
oh man… ooooooooooh man !!! awesome!
July 17th, 2009 at 10:12 am
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo […]
July 17th, 2009 at 10:29 am
[…] Snow Stack es la última muestra de lo que los CSS transformation nos puede llegar a ofrecernos, mediante el uso de javascript conseguimos un efecto de dinamismo que ya le gustaría a más de una aplicación de escritorio. Para probarlo necesitaremos la última versión de WebKit (r45824 o superior) y acceder a esta demo. swfobject.embedSWF("http://www.youtube.com/v/3R6sb4NO25E&color1=0x999999&border=1&rel=1&fs=1&showsearch=0&showinfo=1", "vvq-1735-youtube-1", "550", "445", "9", vvqexpressinstall, vvqflashvars, vvqparams, vvqattributes); (Sin votos) Loading … […]
July 17th, 2009 at 12:33 pm
Pick yourself up a copy of Screenflow, your viewers will thank you for it. Shaky-camming your screen is ugly and aggravating. And Screenflow is easy, clean, and beautiful.
I apologize for coming off as rude and/or arrogant, it’s not my intention. But when I see people taking pictures/videos of their screen where completely unnecessary, well, it’s just a pet peeve of mine.
(When is it necessary? Here’s a personal example; I had a weird Xorg Driver incompatibility some years back, the primary display worked fine, the secondary display was having an acid trip. Screenshotting it didn’t show the problem, so I did take a picture of the two screens physically in order to demonstrate the issue.)
July 17th, 2009 at 1:00 pm
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo […]
July 17th, 2009 at 4:39 pm
@Jason Sure wish it was that simple, I tried a screen capture, but the frames per second just wasn’t showing the full potential coming out of the animation, so I had to resort to a 3GS shaky cam for a recording.
July 18th, 2009 at 12:27 am
[…] ist in der Browserentwicklung mal wieder weit vor allen anderen: Snow Stack zeigt CSS 3D Visual […]
July 18th, 2009 at 5:45 am
[…] Läs mer här […]
July 18th, 2009 at 5:58 am
[…] Safari’s forthcoming CSS 3D transform features via satine.org […]
July 18th, 2009 at 8:59 am
[…] on the WebKit site a new demo that features CSS 3D Transforms : Poster Circles. We could also see Snow Stack demo at satine.org, and Animated CSS3 Cube at fofronline.com. The CSS 3D Transforms have been […]
July 18th, 2009 at 9:02 am
[…] http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ […]
July 18th, 2009 at 2:06 pm
Fantabulous piece of code! I’ve you’re interested I’ve enhanced it a bit: – JS: added Google Picasa support – JS: added a configuration section – JS: renamed function “flickr” to “loadImages” – JS: moved all variables to the top and gave them lowercase names – HTML: moved jQuery file to the bottom – HTML: added encoding tag – ALL: modularized the files (html, css, js) Download at http://alexanderwillner.de/files/snow-stack-with-picasa.zip
July 18th, 2009 at 11:17 pm
I’m not a web developer, so can someone explain to me how this is different from the cooliris plugin.. other than it’s not a plugin?
July 19th, 2009 at 1:11 pm
[…] that mimic desktop applications in graphical responsiveness. Charles Ying wrote a simple image gallery application that demos this new […]
July 19th, 2009 at 4:41 pm
Oh yes the typical ignorance just because you chose an example that may be familiar to people, the cooliris view. And of course the Opera user had to chime in with some flaming. Opera users are always somewhat amusing, both of them. :)
For all of those who think that this is the only thing possible with that technology… REALLY? And electricity can only be used for light bulbs just because that was one of the first use case?
I think this is really exciting for interfaces to come as it finally gives us ways to create immersive user experiences for more than just web applications. Point of sale units for example, right now that’s either a locked Keynote, a locked Director app or if you want something for people to grow eye cancer, PowerPoint in kiosk mode. I hope we can get this soon on a touch display for the POS assistant display we have on during concerts.
July 19th, 2009 at 8:00 pm
Well done! Can’t wait until Snow Leopard arrives.
For the demo, might I suggest adding an option to use a local directory of images?
July 20th, 2009 at 6:58 am
[…] If you’re not excited about the potential of updated CSS and HTML standards support in the newest WebKit browsers, you might be after you check out Snow Stack. […]
July 20th, 2009 at 7:11 am
[…] información: Snow Stack Tags: 3D, CSS, efectos, flickr, imagenes, Safari, WebKit Otras entradas que te pueden […]
July 20th, 2009 at 8:01 am
[…] ejemplo del potencial gráfico de Safari y sobre todo de WebKit lo tenemos en el proyecto Snow Stack, una demo que utilizando HTML, CSS y algo de JavaScript nos muestra galerías de Flickr con […]
July 21st, 2009 at 4:24 pm
[…] Snow Stack: A 3D CSS visual effects demo. […]
July 21st, 2009 at 8:02 pm
[…] satine.org » Snow Stack is Here Absolutely ridiculous demo of 3D CSS Effects. (tags: development webkit software apple css html demo video) […]
July 22nd, 2009 at 5:19 am
[…] [via] […]
July 22nd, 2009 at 9:01 am
[…] Quelle Myspace […]
July 22nd, 2009 at 7:39 pm
[…] name of Charles Ying of Satine.org has developed a new 3D CSS visual effects demonstration called Snow Stack, which runs entirely on JavaScript, native WebKit CSS extensions, and XHTML/HTML. If you’re […]
July 23rd, 2009 at 1:23 pm
[…] out Charles Ying’s Snow Stack, for one […]
July 23rd, 2009 at 2:03 pm
[…] | Applesfera Vídeo | Youtube Enlace | Satine.org Demo | Snow Stack Descarga | Webkit […]
July 23rd, 2009 at 3:29 pm
[…] full hardware support in Safari, fast, smooth, amazing http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ Firefox is already quite behind, now even more. It looks like no budget community development […]
July 24th, 2009 at 3:44 pm
[…] Fireballed at the moment; here’s the main link in Google’s cache. […]
July 26th, 2009 at 6:35 am
satine.org » Snow Stack is Here…
What is Snow Stack?
A new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript.
You can now see Snow Stack’s live demo if you have Snow Leopard and Safari. On Leopard, you can use WebKit nightly build 45754 or…
July 26th, 2009 at 9:59 am
This is just like the cooliris app i’ve used for firefox! Like the way this works using only css, webkit & javascript. Great effect, but currently I still prefer jquery carosel effects for displaying images or any sort of gallery/portfolio!
July 26th, 2009 at 2:50 pm
[…] Flashliknande effekter i Safari med nya CSS 3D-tekniken Om du gillade de nya 3D-effekterna i Safari 4 kommer du gilla vad som väntar bakom hörnet. Med hjälp av den nya tekniken, CSS 3D, så går det få flashliknande effekter med hjälp av bara HTML och CSS i webbläsaren utan något krav av plugins överhuvudtaget. Utvecklaren Charles Ying har skapat en liten demo av vad som går att göra med hjälp av den nya CSS 3D-tekniken. Har du tidigare testat Cooliris så känner du nog igen dig en del. Läs mer här […]
July 28th, 2009 at 6:56 am
[…] Read more about Snow Stack. […]
August 1st, 2009 at 7:50 pm
[…] all that didn’t succeed in killing off the App Store, well, he’d butter up a few tasty carrots to entice developers away from building native iPhone apps by making WebKit a formidable […]
August 5th, 2009 at 6:59 am
[…] [via] Share and Enjoy: […]
August 5th, 2009 at 10:42 am
[…] my co-worker, Charles Ying, posted his 3D CSS Snow Stack demo online a couple of weeks ago, I felt compelled to give 3D CSS in HTML5 a try […]
August 6th, 2009 at 2:07 am
[…] discoveries and tech. Gli ingredienti sono webkit, css 3 e javascript. C’è chi è già al lavoro, con ottimi spunti per creare interfacce grafiche di grande effetto senza appoggiarsi a tecnologie […]
August 13th, 2009 at 3:48 pm
this is retarded and a complete waste of computational resources.
August 15th, 2009 at 12:16 am
[…] Just how quickly, you ask? Here’s what you can already do in the latest version of Safari/WebKit (even on the iPhone version!), with nothing but CSS, and JavaScript to push it along (source: […]
August 20th, 2009 at 11:28 am
[…] This is an exciting time for web standards. HTML 5 is starting to catch on, JavaScript is faster than ever before and CSS allows for accelerated 3D animation. […]
September 5th, 2009 at 10:37 am
Great work, THANKS!! Greetings from Germany
September 5th, 2009 at 7:49 pm
[…] scene is the wall grid scene. This layout is heavy influenced by this wonderful webkit CSS demo: http://www.satine.org/archives/2009/07/11/snow-stack-is-here/ (and by heavily influenced, I mostly mean stolen, altho I must say that the unity implementation […]
September 22nd, 2009 at 3:27 pm
[…] ものは試しで一番手っ取り早いかなぁと思って、「Snow Stack」という名で有名なWebKitの3Dエフェクトとかを実装されたsatine.orgさんとこの実際のテストページにリンクしてみました。 […]
September 28th, 2009 at 8:20 am
This is amazing, can’t imagine what JavaScript will be like in a 2 years from now! Great post!
September 29th, 2009 at 1:04 am
congrats.. stunning work.. :D amazing
October 7th, 2009 at 8:52 pm
))))) хорошо пишешь
October 13th, 2009 at 2:34 pm
Great work, THANKS!! Greetings from Hamburg
December 21st, 2009 at 6:42 am
[…] info can be found here. Posted by grimmwerks Filed in technology No Comments […]
December 25th, 2009 at 7:01 am
By far the most amazing thing on the Web in 2009. Congratulations my friend.
January 31st, 2010 at 3:58 pm
Very cool! Anything that might help kill flash/silverlight and IE is very welcome to me!
Runs alot smoother for me in Chrome(4.0.302.3) then Safari(4.0.4) on Win7 x64(Core2 3.16ghz). Safari gets choppy eating up a full core, but Chrome is smooth as butter.
April 10th, 2010 at 1:12 am
Hello!
What must I do, to take only my own Pictures into this application?
April 30th, 2010 at 9:03 am
[…] info can be found here. No Responses to “Snow […]
May 10th, 2010 at 10:59 pm
Awesome CSS feature, but I guess we have to wait a long long time until we can implement somethin’ like that into webprojects, because of the missing IE-Support. Thx for sharing the video!
May 25th, 2010 at 5:53 am
Yea its great but if there is missing IE support how we can use for webproject? will have soon IE supporting also??
May 29th, 2010 at 11:31 am
[…] 1) Snow Stack […]
May 31st, 2010 at 3:07 am
[…] 见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only，类似于http://www.cooliris.com/的效果)，没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。 […]
May 31st, 2010 at 11:06 am
[…] what books he’s found helpful over the years. After a little consideration, and watching the CSS 3D transform demo (snow stack), I thought that this is a perfect candidate for some CSS […]
June 17th, 2010 at 3:26 am
[…] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next […]
June 18th, 2010 at 10:24 pm
[…] 坦白的说不是特别重要，绝大多数的网页还是不适用于这个酷炫的功能，如果所有的网页都用上这个功能估计什么都看不了了。但不得不说 CSS 3D 转换在某些应用上还是非常关键的，比如以 3D 方式呈现的图片墙应用，有了这个功能就方便多了，不需要安装任何的插件或扩展就可以实现。 […]
August 24th, 2010 at 2:47 pm
[…] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform… < HMV selling Modern Warfare 2 […]
September 1st, 2010 at 2:27 pm
[…] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next […]
September 6th, 2010 at 11:53 am
Any way to make the images click-through to another webpage (if i’m using my own personal images)?
September 7th, 2010 at 9:16 am
By click-through I mean for the zflow on the iphone.. Anyone have any ideas?
September 23rd, 2010 at 7:51 pm
A Seattle Transmission Repair and Service Betray dedicated to sending adjust and rebuilding, Clutch Repair, Locomotive Revamping, Upraise Extinguish Into working order, 4X4 Repair, Effort crease Repair, Fashionable Moving, Worn Transmission, Transmission parts and more.. transmission seattle
October 7th, 2010 at 3:51 am
http://build.chromium.org/buildbot/snapshots/chromium-rel-xp/
Snow Stack works great in the latest Chrome 7.0.549.0 and later versions.
October 12th, 2010 at 11:03 pm
Amazing. Just stunning! Congratulations :)
December 14th, 2010 at 12:02 am
Hammer! Hätte gar nicht gedacht, dass es so etwas gibt.
December 17th, 2010 at 7:05 am
olarmı?
December 26th, 2010 at 6:56 pm
[…] 见live demo (http://www.satine.org/research/webkit/snowleopard/snowstack.html) (Mac Safari Only，类似于http://www.cooliris.com/的效果)，没Mac的可以到(http://www.satine.org/archives/2009/07/11/snow-stack-is-here/)看视频演示。 […]