Background image animation using css3 or jquery?

Question

can anyone help me about how to animate a background image like on this website

on the credits section the background image seems moving, i don't know if it is using css3 or jquery.

And is there any tutorial on how to do it or via using plugin.

Many thanks.

:) It's a simple **.gif animation** http://breakpoint-sass.com/images/point-break/sky-circle.gif?1358149772 — Roko C. Buljan, Feb 15 '13 at 02:04
thanks for your answer, yeah i inspect the element and the image is in .gif format, is there a way to do it on css3 or ready made effects? — user2074113, Feb 15 '13 at 02:11

Roko C. Buljan · Accepted Answer · 2013-02-15T04:52:25.550

3

Just a simple demo of animating a BG sprite image

var c = 0 ;
function loop(){
  c = ++c%5;
  $('#bird').css({backgroundPosition: (240*c)+'px 0px'});
}
setInterval(loop, 42);

Info: if you want a 24fps rate that's ~42 (41.666ms)

edited Feb 15 '13 at 04:52

answered Feb 15 '13 at 02:26

Roko C. Buljan

Cool!, so you need to create a series of action of an image then the script will do the flying thing?.. – user2074113 Feb 15 '13 at 02:45
many3x thanks, you're great!, need to learn this shared stuff from you – user2074113 Feb 15 '13 at 02:46
@user2074113 yes, That was an example using 'sprite' image. but you can use the similar logic and `.animate()` and just move a background – Roko C. Buljan Feb 15 '13 at 02:46
ok got it, thanks again for the knowledge and stuff..:) – user2074113 Feb 15 '13 at 02:51
@user2074113 look here: http://jsbin.com/ohulok/4/edit – Roko C. Buljan Feb 15 '13 at 02:51
yeah so this is using the .animate, how about combinig the two, while the bird moves from the left at the same time the feathers move too? – user2074113 Feb 15 '13 at 02:53
Actually im a newbie to pure javascript coding, im used only using jquery plugin which are easy to configure.. – user2074113 Feb 15 '13 at 04:39
1

@user2074113 take a look at this demo, the boat moves too! http://jsbin.com/ohulok/9/edit – Roko C. Buljan Feb 15 '13 at 04:44
Oh man, im getting crazy with all the stuff you do..haha..I need more rice to consume all of this great2x stuff you've shared..:) – user2074113 Feb 15 '13 at 04:46
Yeah, i think so far im not violating some of those – user2074113 Feb 15 '13 at 05:04
there you go..many thanks again – user2074113 Feb 15 '13 at 06:13

1 Answers1