Анімація фонового зображення у Firefox
Днями вдалося спостерігати дивне явище - зазвичай проблеми з кросбраузерністю завжди зводилися до проблем з усіма улюбленим і чудовим браузером усіх часів і народів - його величністю IE, але виявляється є такі речі, які працюють у всіх браузерах (навіть включаючи IE), але не працюють в останній версії Firefox. Ось так несподіванка, правда?
Декілька слів про анімацію фону в Firefox
Може таких прикладів можна навести кілька, але сьогодні йтиметься про властивістьbackground-position. Треба сказати, що "анімуватися" положення фону в Firefox геть-чисто відмовилося, як би ми не намагалися, але не переживайте, проблема вирішилася і в цій статті ви знайдете кілька варіантів її вирішення.
Спочатку пробувалась стандартна анімація:
У даному прикладі, який, варто відзначити, працює якраз у всіх браузерах, крім Файєрфокса, ми використовуємо стандартну властивість background-position, яка отримує два значення – по осі координат x та y. Все просто і зрозуміло, але Firefox працювати з таким кодом відмовляється, не виводячи жодних помилок. З'явилася ідея, що потрібно в CSS шарі layer задати стартові значення позиції фону, таке іноді допомагало в інших завданнях (точно зараз вже не згадати в яких, але допомагало) - проблема полягала в тому, що деякі баги не дозволяли почати анімацію, т.е. до. скрипт не знав, звідки її власне треба починати і проблема легко вирішувалася установкою відправної точки, допустимо завданням нульових координат:
Однак, якби все було так просто, то й посту цього не було б. Встановлення початкової позиції фону не зрушило з місця вперту "Вогняну Лисицю".
Після цього ми пішли далі. Спробували розбити властивість background-position на дві окремі властивості - background-position-x і, відповідно, background-position-y:
Код "проковтнули" всі браузери на ура, але під барабанний дріб і передчуття перемоги, після натискання клавіші F5 у Firefox нічого не сталося. Це вже ставало цікаво. І вирішити це завдання стало справою честі.
Вирішення проблеми за допомогою плагіна
Кілька секунд пошуку в просторах мережі привели до висновку, що ця проблема досить поширена і програмісти і верстальники по всьому світу задаються питанням, як змусити Файєрфокс анімувати фонове зображення і першим рішенням цього завдання Keith Wood пропонує нам використовувати його плагін Background position animation for jQuery.
Потрібно просто підключити цей плагін і наведені вище коди запрацюють у Firefox як милі. Проблема вирішена.
Вирішення проблеми без плагіна (рекомендується)
Ми ж вирішили відмовитися від чужого плагіна і вирішити це власними силами, т.к. у нашій студії "копіпаст" не вітається. Тому ми пропонуємо вам більш витончений та менш ресурсомісткий варіант вирішення проблеми.
Ми вирішили зробити анімацію власними силами, використовуючи старий добрий setInterval, який ще ніколи не підводив нас, а також автоінкремент, який і дозволяє нам змінювати координати.
А ось, власне і приклад анімованого фону, який працює у всіх браузерах і не використовує жодних плагінів, крім бібліотеки jQuery (цілком не важливо якої версії):