Описание:
jAni это простой плагин для jQuery, который позволяет создавать анимацию фонового изображения. Плагин в основном является альтернативой GIF анимации, но он так же имеет и несколько преимуществ над GIF анимацией. Сразу бы хотел сказать, что лучше использовать GIF анимацию там, где это возможно, так как этот формат поддерживается всеми браузерами, не требует ни какой дополнительной разметки страницы и JavaScript. В использовании GIF анимации есть и «темная сторона», GIF анимация поддерживает только 256 цветов в изображении, а так же не позволяет управлять процессом анимации. jAni загружает длинное вертикальное изображение и изменяет его фоновую позицию с скоростью которую можно задать в настройках, тем самым создавая анимацию, что дает нам полный контроль над процессом анимации изображения.
Основные возможности:
— Маленький размер скрипта ~ 2k
— Простота установки
— Полностью настраиваемый с помощью CSS
— Работает со всеми современными браузерами (протестирован в IE 6+, FireFox 3+, Opera 10+, Crome 7+, Safari 3+)
Установка:
1. Скачайте jAni. Архив уже содержит jQuery.
2. Добавьте следующий код между тегами <head> … </head>, для подключения JQuery и плагина jAni. (Удостоверьтесь, что пути к файлам, являются правильными)
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jani.js"></script>
3. Добавьте стиль, содержащий URL для фонавого изображения с анимацией (это код может быть добавлен в отдельный CSS файл или внутри тега <head> … </head>)
.animation-1 {
background: url(./images/sample-animation.gif) no-repeat left top;
}
4. Добавьте пустой div элемент в ваш HTML документ, который будет отображать анимацию
<div id="animation-1"></div>
5. Добавьте следующий код между тегами <head> … </head>, для инициализации jAni и начала анимации.
<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({
frameWidth: 100,
frameHeight: 100,
speed: 100,
totalFrames: 19
});
$('#animation-1').jani.play();
});
</script>
Методы плагина jAni:
| jani.play() | Начинает воспроизведение анимации. |
| jani.pause() | Приостанавливает воспроизведение анимации. При следующем вызове метода jani.play() анимация начнется с последнего кодра. |
| jani.stop() | Останавливает воспроизведение анимации. При следующем вызове метода |
Параметры функции jani:
| frameWidth | целое число | Ширина кадра. |
| frameHeight | целое число | Высота кадра. |
| speed | целое число | Скорость анимации. |
| totalFrames | целое число | Всего кадров в анимации. |
| loop | логическое (true/false) | Автоматическое повторение анимации, true — да, false — нет. По умолчанию true. |