Website Background Image Horizontal Animation Infi

Question

I want to put a picture/s of cloud images like vector of clouds that will slowly, but infinitely animate form left to right, or right to left, on my website background. I'm not not good with coding but I thought a jQuery plugin should do the trick. I already have a gradient background with CSS so I'd just like to put some white clouds to animate between the bg and content of the site. Sorry if this is a very "Duh" question! Or maybe HTML5?

Answer 1

You can do with pure CSS animation:

HTML:

<div id="cloud"> -picture of a cloud- </div>

CSS:

  @-webkit-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
  @-moz-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
  @-ms-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
  @-o-keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }
  @keyframes move {
    0%   { left: 0px; }
    50%  { left: 1000px; }
    100% { left: 0px; }
  }

  #cloud {
    -webkit-animation: move 100s infinite;
    -moz-animation: move 100s infinite;
    -ms-animation: move 100s infinite;
    -o-animation: move 100s infinite;
    animation: move 100s infinite;
  }

Answer 2

You can alter background position using jquery and intervals:

http://www.catswhocode.com/blog/animated-background-image-with-jquery

*The demo gives a 404 page, but download the ZIP file and you are good to go, and remember to change the repeat background setting from repeat-y to repeat-x. Depends on what you want.

PS. They use clouds in the downloadable example! ;)

Answer 3

maybe you should consider this question and the answer markup to help you:

• continuous loop with divs and jquery