css3 animation / jquery - couple questions, how to?

JavaScript
1

How can I animate this car:

driving from left to right of the screen?

I imagine it starting on the outside of the wrapper border so top left 0 and ends top right 960px… When it hits top right corner can it then flip 180 degrees and drive back in the other direction?

Any ideas how to do this in CSS3?

Also how can I do it in jquery for the browsers that don’t support the CSS3?

I was also wondering if you click on the car could some flames shoot out the exhaust which makes it drive faster??

2

Paul, I noticed that you still used inline js ( onclick), does that mean that the animation would not work if js is turned off, or will it allow to call a CSS, as long as you arent running the call off a <script> tag?

3

haha thats awesome Paul O’B! Thanks for the leg up on how to make this animate!

I have moved the onclick onto the img and adjusted the css… Will continue to experiment with this idea has helped me alot!

Soon I will add the fire effect to the exhaust hopefully that wont be too difficult!!

4

Hi,

You don’t really need to know much about hardware acceleration except that webkit uses it for the css3 animations to provide smooth effects without holding the page up. The animation is handled by the hardware and not the software.

There is a jquery plugin that will make use of this I believe but I haven’t tested it.

You should be able to do what you want with jquery but is really a question for the JS forum rather than here. I believe you can chain events like that with jquery and you could start another animation once the car reaches the right and then also swap the image at the same time and send the car down the page and so on.

In truth you would probably be better of with a purpose written script to do what you want rather than bolt together a number of jquery routines.

I can move the thread to the javascript forum if you want more js help.

5

can you explain this a little more please? I read some of this article to help me understand the css hardware accleration but I am still a bit bamboozled? http://labs.qt.nokia.com/2010/01/13/hardware-accelerated-css-animations-in-qtwebkit/

My basic understanding is JS effects are loaded last and CSS animation will load before the JS?

I am now using the jquery to create the same animation effect Paul O’B used for the webkit css3 browsers. See the code below:


$(".car").hover(function() {
            $(this).addClass("hover").stop()
                .animate({
                    right: '920px', 
                }, 6000);
            
            } , function() {
            $(this).removeClass("hover").stop()
                .animate({
                    right: '0', 
                }, 6000);
});

CSS


.car{background:url(i/car.png) no-repeat 0 0;height:12px;width:42px;display:block;position:absolute;right:10px;top:-12px;}

I would however like to extend this effect. Either make the car explode when it reachs 920px or make it rotate CCW 90 degress and drive down the border of the site… If the latter is possible do you think it would be possible to drive the car 360 around the whole wrapper border?

6

Moved to JS forum so some kind JS guru can help :slight_smile:

7

yes please can you move it to the JS forum…

I am not the best at jquery so i think bolting on some routines is my only hope!

Interesting plugin, I will have to play with it.

thinking about it if the car was to drive around the whole wrapper then the height would have to be calculated dynamically :slight_smile:

8

I only added that as an afterthought to show that usually you would usually kick start the animation with some javascript but obviously you would do that unobtrusively.

For animations to work you have to change the property of an element from one thing to another. We can easily do that with :hover so no javascript is needed but sometimes :hover is not what you want and maybe you want to click an element to make it move.

You can do a lot with hover but you have to remain hovered for it to work.

Here’s a demo made from a thread a few weeks ago about scrolling a menu with CSS3 (safari only) which uses no js at all but unfortunately would be totally unusable as it is. :slight_smile: If you need function to the animation then js is usually required but for [URL=“http://www.pmob.co.uk/temp/dock-example3.htm”]visual effects on hover then no js is needed at all.

The plus side to css animations is that they make use of hardware acceleration unllike javascript and do not hold anything up on the page while they execute.

It’ll be a long time before we can do more than play with them though but you can use them to enhance the experience in safari.

9

Hi,

You can move it quite easily for safari using CSS3.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
p.car{
    position:relative;
    left:0;
 -webkit-transition: left 4s;
    height:75px;
    background:#fff;
    width:100&#37;;
}
p.car2:hover{left:100%}

</style>

</head>

<body>
<h1>Click on car to start animation</h1>
<p class="car" onclick="this.style.left ='100%'"><img src="http://img687.imageshack.us/img687/8263/pixelcar.png" alt="car "width="75" height="24"></p>

<h1 class="hover">Hover on car to start animation</h1>
<p class="car car2"><img src="http://img687.imageshack.us/img687/8263/pixelcar.png" alt="car "width="75" height="24"></p>
</body>
</html>

However for complicated animations you would usually tie it into javascript to initiate the movement and then let css3 handle the actual movement (in which it will utilise hardware acceleration unlike javascript).

As mentioned above you would probably be better in doing what you want with javascript as it sounds quite complex and if you want to add css3 into that mix as well then it means browsers sniffing at the same time.

CSS3 animations are best added where you don’t need to support other browsers and you add it as an enhancement for capable browsers so that they can have extra eye candy but you don’t add it when function is disadvantaged by it not being there.

You can find more css3 animations here.

10

just use jquery, don’t think css3