Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Анимация фонового изображения в Firefox

На днях удалось наблюдать странное явление — обычно проблемы с кроссбраузерностью всегда сводились к проблемам со всеми любимым и замечательнейшим браузером всех времен и народов — его величеством IE, но оказывается есть такие вещи, которые работают во всех браузерах (даже включая IE), но не работают в последней версии Firefox. Вот так неожиданность, правда?

Анимация фонового изображения в Firefox
Содержание статьи

Несколько слов об анимации фона в Firefox

Может таких примеров можно привести несколько, но сегодня речь пойдет о свойстве background-position. Надо сказать, что "анимироваться" положение фона в Firefox напрочь отказалось, как бы мы ни пытались, но не переживайте, проблема решилась и в этой статье вы найдете несколько вариантов ее решения.

Сначала пробовалась стандартная анимация:

$(".layer").animate({
	"background-position": "100px 100px"
}, 10000, "linear");

В данном примере, который, стоит отметить, работает как раз во всех браузерах, кроме Файерфокса, мы используем стандартное свойство background-position, которое получает два значения - по оси координат x и по y. Все просто и понятно, но Firefox работать с таким кодом отказывается, не выводя никаких ошибок. Появилась идея, что нужно в CSS слою layer задать стартовые значения позиции фона, такое иногда помогало в других задачах (точно сейчас уже не вспомнить в каких, но точно помогало) - проблема заключалась в том, что некоторые баги не позволяли начать анимацию, т.к. скрипт не знал откуда ее собственно надо начинать и проблема легко решалась установкой отправной точки, допустим заданием нулевых координат:

.layer {
	background-position: 0 0;
}

Однако, если бы все было так просто, то и поста этого бы не было. Установка начальной позиции фона не сдвинула с места упрямую "Огненную Лисицу".

После этого мы пошли дальше. Попытались разбить свойство background-position на два отдельных свойства - background-position-x и, соответственно, background-position-y:

$(".layer").animate({
	"background-position-x": "100px",
	"background-position-y": "100px"
}, 10000, "linear");

Код "проглотили" все браузеры на ура, но под барабанную дробь и предвкушение победы, после нажатия клавиши F5 в Firefox ничего не произошло... Это уже становилось интересно. И решить эту задачу стало делом чести.

Решение проблемы с помощью плагина

Несколько секунд поиска в просторах сети привели к выводу, что данная проблема довольно распространена и программисты и верстальщики по всему миру задаются вопросом, как заставить Файерфокс анимировать фоновое изображение и первым же решением этой задачи Keith Wood предлагает нам использовать его плагин Background position animation for jQuery.

Нужно просто подключить этот плагин и приведенные выше коды заработают в Firefox как миленькие. Проблема решена.

Решение проблемы без плагина (рекомендуется)

Мы же решили отказаться от чужого плагина и решить эту задачу собственными силами, т.к. в нашей студии "копипаст" не приветствуется. Поэтому мы предлагаем вам более изящный и менее ресурсоемкий вариант решения проблемы.

Мы решили сделать анимацию собственными силами, используя старый добрый setInterval, который еще никогда не подводил нас, а также автоинкремент, который и позволяет нам изменять координаты.

var x = 0; var y = 0;
window.setInterval(function() {
	$(".layer").css("background-position", x + "px " + y + "px");
	x++; y--;
}, 50);

Вот и все. Работает во всех браузерах и в телефонах. К данному примеру стоит добавить код остановки анимации по требованию (когда x или y достигнет определенного значения), но это вам предлагается сделать самостоятельно, а в данном примере показан лишь способ, благодаря которому нам все-таки удалось заставить Firefox анимировать позицию фонового изображения и при этом не использовать 10 библиотек для такой, казалось бы, простейшей вещи.

А вот, собственно и пример анимированного фона, который работает во всех браузерах и не использует никаких плагинов, кроме библиотеки jQuery (совершенно не важно какой версии):

открыть в новой вкладке


Предыдущая статья:
Раскрутить или не раскрутить? Нужно ли раскручивать сайт?

Читайте также:
Что такое сайтостроение


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»