I was asked by artist Zoran Pekoviċ if the effect on the homepage on their site, which is currently done with Flash, could be done with HTML, CSS, and JavaScript.
I thought it seemed like a fun challenge, so I gave it a shot. The browser support probably isn’t as deep as Flash, but hey, it’s easier to tweak and works in Mobile Safari.
I’m not going to drop tons of code here because there isn’t anything new that we haven’t covered before. Essentially, the intro is some div’s animated (extra non-semantic div’s aren’t ideal, but somethings are unavoidable and I don’t think they are abused here). For the images, all nine of them are absolutely positioned with backgrounds positioned to reveal the correct portion of them. When clicked (JavaScript) the transition to being the size of the full area with that background-position set back to 0 0;
You’re out of control
Greate Challenge :-)
That’s Creative
I never thought it can be done without flash
It doesn’t behave the same way on Opera.
Indeed not, I noticed that too. It works, but the relationship of the images is less clear because it only ends up in the right place when the image has fully animated. Still impressive.
nice
Why no jQuery easing effect to help with some of the “jerky” nature of the CSS transitions? (Still awesome though)
Because this is supposed to be CSS only? Yeah, I know that is ruined by the Javascript click helper.
Wow, Its really awesome… :)
Actually, is a good idea!
Also really simple to realize using CSS3…
Obviously it’s not (yet) a job for CSS anims – it’s jerky in all browsers but Firefox 5 and it even completely crashed my MBP when trying in Safari.
However it’s an interesting case where Flash could definitely be replaced by HTML.
Works fine on my Chrome, very cool.
I like avoiding Flash as much as possible, so to see you do this is great.
Funky.
Very nice. Doesn’t work too well in chrome or safari. Works best in Firefox.
Works great for me in Chrome 13 on Linux.
You could perhaps try using
clipCSS property instead. Simple example here: http://jsfiddle.net/Uem9w/embedded/result/I agrre; I think clip() is the way to go. Here’s a fuller example: http://jsfiddle.net/e8zur/embedded/result/
Works on IE8+ (minus animation) and handles keyboard focus. The checkbox solution further down also handles focus/blur nicely, unlike this one where a little bit extra JS is required for handling click on expanded image (although it’s still usable without JS). However, the checkbox solution is webkit-only, as far as I can tell.
Wow, amazing stuff!!
Nice one, Chris. It even works in IE7. As noted above, the animation part is a bit off in Opera, though once the animation stops it’s correct again.
Be terrific if there were a way to get rid of the JavaScript altogether. Barring that, it seems like a more JS-heavy solution might be simpler with broader browser support.
But that takes nothing away from this being a great example of what you can do with CSS nearly on its own.
Chris – this is awesome… I’m all about obliterating Flash from the face of the earth.
On another note – I freaking LOVE your footer. I find myself wasting 3 or 4 minutes every time I’m on your site just rolling on and off your head… thanks bro.
Awe the wicked power of CSS, I love it. It’s amazing what can be accomplished in CSS if you put your creative mind to it.
Great work – a little choppier than the Flash, but still very excellent work nonetheless!
Sweeeeet. Challenges aside, this is one of those few instances where Flash is probably the right tool for the job. Still, quite impressive.
great work chris .
Haha seriously awesome. There should be some sort of Flash to CSS / Jquery contest. I love seeing things like this!
Flash was fun back in the day. Good to see all the Swish and Flash days being a smidge transferable. Thanks as ever for the topics Chris.
Proves that Flash isn’t as dead as Stevie has hoped.
There still is quite some stuff that Flash has an edge on. And it works an all but iOS browsers.
That said, Googles HTML5/JS, etc Music Videos are really cool. They don’t really run any that many browsers though.
A very cool technique indeed!! I can see uses for this… so thanks for doing the hard work to get it working.
This is awesome :) but it has some animation glitches on chrome (windows). I took Lim Chee Aun’s idea (a few comments above) on using the clip property and made this:
http://jsfiddle.net/Keyamoon/Uem9w/31/
(click and hold images. I’m using the active state)
The animation is smooth, and the html is cleaner.
Yes, this one is cleaner.
I tried implement this using jquery animate, but since ‘background-position’ property of an element are not handled as integers in jQuery, it didn’t work properly. Sure CSS3 is amazing :)
Hey Chris ever thought of video tutorials please!!!!!!
The problem with any CSS only bit for the moment (except for Webkit where you setup animation queues, IIRC), is that the z-index will never be quite right.
If all the 9 elements start with the same z-index, then the first one will go over the others when the z-index is changed while animating out, but will revert while animating back in.
A quick fix I found was to change the z-index on hover, since the user will most likely not have moved their mouse off the same element (though I suspect this depends on the speed of the animation too!) … leFiddle
I’m pretty sure you could come up with a nice version using div’s with BG images, and using the background-position, BUT, animate the width/height/top/left, while leaving the background position clamped to top/middle/bottom & left/center/right.
Still wouldn’t be as easy to setup as the clipping IMG tags method though.
You can use div’s with background images *and* clip the div’s instead of IMG’s.
The way I handled it was incrementing the z-index upwards via the JavaScript on every single click. So the latest clicked element always has the highest.
I don’t really like your way of handling z-index.
Why is it different to just add a css “.active { z-index: 1; }” and never position z-index directly ? Each time you click, you’re putting the active class anyway, so it should be “that much different”.
Did you do that for a certain purpose ?
Because the .active class needs to be removed when it’s clicked again, which would remove that higher z-index immediately. When actually, it needs to retain that higher z-index for a little bit of time (until the transition ends). As far as I know there is no way to delay something like that (like a callback could in JavaScript).
I love that idea! so great!! 9 Thumbs of different images makes one :)
i’ve done my take on this one
NO JS USED ;-) pure CSS awesomeness
checked on chrome, just to see if i can make it work for any browser – if u want to, pls feel free to improve it for other browsers
i find the animation running smoother ;-)
http://jsfiddle.net/stryju/f2ESq/
http://jsfiddle.net/stryju/f2ESq/embedded/result/
for best viewing experience :-P
Great concept, only webkit browsers produce any jerky actions.
Its Look Like a puzzle …..But Great :)
Fantastic Work :_)
It works only in Chrome
Not true.
frame (bg) could be black or white.
have you tried to play around with jQuery? excellent case for that :)
Nice work Chris, but how ’bout that artwork? I’m amazed.
d.
this is insane..
Here is a version of the all css solution that works for Chrome, Firefox and IE9(without animation).
http://jsfiddle.net/J66jp/1/
Maybe some can look at my solution and explain why I had to load the background image and set the background position to 0 0 on :checked. Just changing the size and position does not work.
works just fine if u use “background-position”
Thanks. You are correct, that works in the rule #r1c2:checked + label and the rest where id is used! I still do not understand why it does not work in the rule input[type=”checkbox”]:checked + label.
http://jsfiddle.net/J66jp/14/
By setting the background using .row1.col2 I can change the background position using input[type=”checkbox”]:checked + label.
If I use #r1c2 + label to set background then I have to use #r1c2:checked + label to change background position even though the other properties are changed using input[type=”checkbox”]:checked + label.
Great work, makes me think it might be nice to create a section on your site where people put your great tuts to work…you issue a challenge and they must make it work in Chrome, FF and Safari for it to be accepted..maybe even an occasional contest for one of those awesome free shirts, eh? :-)
Great art and good job with the code Chris…you da man!
Now THAT is cool. Nicely done, sir.
Works great on IE 9. Pretty Cool!
A lot of our clients want an alternative to Flash since the general speed of ADSL in developing countries is still problematic. This is just great! Now the browsers must just come to the party.
Extraordinary!
you ARE a coder
Chris, thanks so much,
it looks great!
Pekta
(author of those 9 images)