no i meant, just use :active and nothing else.
no i meant, just use :active and nothing else.
ok here is your animation thing done without the use of :hover
it does not seem to work in safari, but works in FF,Opera,IE8
i don't see much of an advantage in my method, with the exception that you don't need to keep hovering your mouse over the box, it is now a looping image, and that now he does a moonwalk.
after looking at http://www.romancortes.com/blog/pure-css-coke-can/ i decided to recreate the whole thing with my preferred unhealthy bubbling beverage.
so powerful, yet so simple when you understand it.
ha ha very good but it's not diet pepsi
pepsi image from so quickly. Did you make that?
Do you want to give a brief explanation of how it's accomplished for those watching?so powerful, yet so simple when you understand it.
the image was googled.
explaining it is a bit more complicated than understanding it. :S
basically its several 1px wide vertical lines that are floated against each other, they become wider in the middle to give it a more correct rotational feel. (it will still rotate if but with distortion)
the background for these lines is fixed so it does not move when you scroll, so when you do scroll, the lines move showing a small bit of their own background (which is shifted by 1px to actually match the floated positioning)
so essentially he just grabs "some" 1px wide line, and puts it where he wants it to, this way distorting the image as he wants to. (by reducing the amount of pixels visible from the image or compressing them together)
you scroll, the lines move, the background image does not, but it does maintain the background distortion, he also added a transparent png for effects of a CAN.
he also seems to have had a y axis distortion too that he didn't use.
right now im thinking that you could probably make it spin when you scroll without moving the can (maybe by reversing the background and float positioning types)
definitely inspiring stuff
Yes I think the foreshortening at the edges is due to the 1px wide paragraphs but shifting the background by 2px therefore shortening the image by 1px each time to provide the illusion of turning the corner.
It's a great demo and is being discussed in this thread also.
simple but pretty
hahaha, very nice stuff Stu! very polished to say the least.
I was amazed that it auto ran in IE8. You just need to put the mouse over the second image and it works!
I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last so that you can target a single element when hovering over a list of sibling elements.
Webkit in general support ~ though so please provide a test case for tha
http://www.ryanreese.us -Always looking for web design/development work
Great demonstration Stu (as would be expected from you)
Yes we've run into that bug a few times in these quizzes now and there are quite a few bug reports about it but no real solution. It seems to half work.I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last
Yes, it does look like the implementation is only half complete and this has been the case for over a year.
What I have been trying to do in incorporate the rolling can with the animation effect on hover but I guess it will have to be limited to Firefox, Opera and IE8:
I did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.
Coke, Pepsi, and Now Crazy Baked Beans!! haha precious!
That's an interesting effectI did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.
I wonder why it does it though? I assume the hover is somehow interfered with causing it to switch on and off quickly.
I think it is because firefox made the hover static on newer versions, I think it was mainly for performance gains, and it seems they left that original behavior inside the object tag, maybe for consistency?
Firefox did continually monitor mouse 'hovers' but in the last few versions it has removed this feature and only checks the hover state when the mouse moves. But as you say, it looks like they still continually monitor the hover state when over an <object>.
This could prove useful for future developments.
I have been working in collaboration with Javier Román Cortés over the last few days to produce a infinite zoom-in demo using nothing more than 26 images and Safari css3 webkit styling.
This one is for Safari and Chrome only.
how the... just wow, Amazing work STU!! and tell Roman the same from me!!
this is a true demo of CSS3! and Transformations (which i havent nearly explored)