CSS - Test Your CSS Skills Number 32 - animation

[YuriKolovsky]

no i meant, just use :active and nothing else.

[drjochum]

no i meant, just use :active and nothing else.

I see!
But I am not sure whether that would work.
Maybe a combination of :active and the adjacent sibling selector (+) could work.

[YuriKolovsky]

http://timo.geekcavecreations.com/affe.html

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.

[Paul O'B]

and that now he does a moonwalk

ha ha

[drjochum]

timo.geekcavecreations.com/affe.html

ok here is your animation thing done without the use of :hover

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.

Nice!
I like that it moves forwards with "tab" and backwards with "click".

My original idea was that you would have to click on the monkey. I made that work with the hover-variation in FF. But it did not work well in other browsers...

[YuriKolovsky]

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.
http://timo.geekcavecreations.com/pepsi/ xD

so powerful, yet so simple when you understand it.

[Paul O'B]

ha ha very good but it's not diet pepsi

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.
http://timo.geekcavecreations.com/pepsi/ xD

Where did you get the flattened pepsi image from so quickly. Did you make that?

so powerful, yet so simple when you understand it.

Do you want to give a brief explanation of how it's accomplished for those watching?

[YuriKolovsky]

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

[Paul O'B]

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.

[Paul O'B]

The fixed background image reminded me of another trick I knew so I knocked this up in about 2 minutes

http://www.pmob.co.uk/maze/light.htm

Very simple.

[YuriKolovsky]

simple but pretty

[stunic]

I have a variation on the 'rabbit' method at http://www.cssplay.co.uk/menu/css3-animation.html which auto-runs in IE8.

[YuriKolovsky]

hahaha, very nice stuff Stu! very polished to say the least.

[stunic]

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.
<b></b>
<b></b>
<b></b>
<b></b>
<b class="last"></b>

[ralph.m]

Nice work, Stu. I must say, it's quite exciting to find you posting in this forum.

[RyanReese]

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.
<b></b>
<b></b>
<b></b>
<b></b>
<b class="last"></b>

Just like that it should work, however there is a webkit bug where in combination (I think from memory) in combination with the + selector it won't use the rule. I forget the exsact details but it's something like that . I remember the bug happening to me while coding once.

Webkit in general support ~ though so please provide a test case for tha

[Paul O'B]

Great demonstration Stu (as would be expected from you)

I am still trying to find out why Safari and Chrome do not support b:hover ~ b.last

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.

[stunic]

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:
http://www.cssplay.co.uk/menu/css3-can-roll.html
I did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.

[YuriKolovsky]

Coke, Pepsi, and Now Crazy Baked Beans!! haha precious!

[Paul O'B]

I did discover that when placing this demo into the <object> that Firefox now give the animation without moving the mouse.

That's an interesting effect

I wonder why it does it though? I assume the hover is somehow interfered with causing it to switch on and off quickly.

[YuriKolovsky]

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?

[stunic]

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.

[stunic]

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.
http://www.cssplay.co.uk/menu/css3-zoom.html

This one is for Safari and Chrome only.

[Paul O'B]

That's a stunning demo Stu

Thanks for giving us a peek at it. I'll have to look under the hood when I have a few days spare and if my brain can handle it!

[YuriKolovsky]

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)