Фоновое изображение сайта Горизонтальная анимация Infinate Loop?

Question

Я хочу поместить изображение (я) облачных изображений, таких как вектор облаков, которые будут медленно, но бесконечно анимировать форму слева направо или справа налево на фоне моего сайта.Я не очень хорош в кодировании, но я подумал, что плагин jQuery должен справиться с задачей.У меня уже есть градиентный фон с CSS, поэтому я просто хотел бы поместить несколько белых облаков для анимации между bg и содержимым сайта.Извините, если это очень "Дух" вопрос!Или, может быть, HTML5?

Answer 1

Вы можете сделать с чистой анимацией CSS:

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

Вы можете изменить положение фона, используя jquery и интервалы:

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

* Демонстрация дает 404 страницы, но загрузите ZIP-файл, и вы готовы пойти и запомнитьизменить настройку повторения фона с repeat-y на repeat-x.Зависит от того, что вы хотите.

PS.Они используют облака в загружаемом примере!;)

Answer 3

возможно, вам следует рассмотреть этот вопрос и разметку ответа, чтобы помочь вам:

• непрерывный цикл с div и jquery