0

Уважаемые знатоки, нужно сделать на js горизонтальное движение фона (css не предлагать), думаю про такую реализацию

var count=0;
setInterval(function() {
    document.getElementById("clouds").style.backgroundPosition='-'+ ++count+'px';
},100);

Вопрос: не принесет ли проблем бесконечный setInterval, например при достижении огромных значений в count, или лучше рекурсивно зациклить вращение фона (что бы после того, как картинка сделала полный круг, сбрасывался count и все начиналось сначала)

Благодарю за ответы, версии, полезные мысли.

9
  • на сколько большую картинку вы собираетесь так прокручивать?
    – Grundy
    18 мая 2016 в 18:41
  • with : 3000px; height: 250px; пардон, а размер имеет значение?) 18 мая 2016 в 18:43
  • ну вообще диапазон значений чисел в яваскрипте немного больше 3000
    – Grundy
    18 мая 2016 в 18:46
  • Движение будет рывками / неравномерно, т.к. JS неаккуратен в выполнении setTimeout. Почему таки не CSS3? Уточните, какие ещё ограничения вам нужно учитывать? Неплохая альтернатива, напр. CSS transform.
    – Sergiks
    18 мая 2016 в 18:50
  • хм.. ну вы же понимаете что в текущей функции значение count не зависит от размера изображения, оно просто постоянно увеличивается. Интересно реально ли вообще создать изображение шириной порядка квадрилиона пикселей... 18 мая 2016 в 18:53

3 ответа 3

2

Абсолютно спозиционировать <div> с огромной картинкой. Двигать его, изменяя CSS-свойство не background-position, а transform: translate(x, y) – это «дешевая» операция без лишней перерисовки.

Для плавной анимации сделать её функцией от времени, через requestAnimationFrame().

Чтобы после перезагрузки страницы вернуться к оставленному положению, назначить функцию, которая выполнится по событию onbeforeunload и запомнит текущее положение <div>'а в Cookie или local storage. При запуске, соотв., искать ранее сохранённое положение.

2

Можно, как вариант, через css3 animation, решить вопрос

body {
  height: 100%;
  width: 100%;
  background-image: url("http://cg-evolution.ru/wp-content/uploads/2014/05/red-brick-wall1.jpg");
  animation: scroll linear 10s infinite;
}

@keyframes scroll {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  }
}

2
  • да, можно было бы, если бы при перезагрузке страницы анимация не сбрасывалась на background-position: 0 0; 21 мая 2016 в 9:52
  • Не вижу в основном вопросе такого требования к бэкграунду, и как следствие не понимаю зачем что-то вообще сохранять в локальное хранилище или куки. В конечном счете вопрос с помощью javscript можно было бы решить сотней разных способов.
    – tnorman
    23 мая 2016 в 9:02
2

Тема до сих пор есть в поиске, поэтому добавлю сюда, может кому пригодится. Этот код работает без jQuery и не грузит комп пользователя. Если нужно для тега body - замените .getElementById("ваш_id_элемента"). на .body. и разместите код перед /head.

JavaScript

`<script language="JavaScript" type="text/javascript">
window.setInterval(function () {
if (!this.a || this.a < 0) this.a = 300; //ширина img
else this.a--;
document.getElementById("ваш_id_элемента").style.backgroundPosition = this.a + "px 100px" //высота, можно в %%, если родительский элемент тоже в %
}, 110); //скорость
</script>`

CSS

`#ваш_id_элемента {
width: ...;
height: ...;
background: #000 url(http://.../sky.png) fixed;
}`

А есть и варианты на CSS. Если поэкспериментировать - можно добиться неплохих результатов:

Анимация фона

Несколько фоновых картинок

пример с воздушными шарами

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.