Создание слайдшоу на JavaScript и несколько особенностей анимации

Приветствую всех!

На днях я экспериментировал с плагином jQuery Panel Gallery и хочу поделиться впечатлениями, а заодно рассказать, как с ним работать. Кроме того, использование подобных плагинов имеет некоторые особенности, которые касаются не их самих, а JavaScript анимации вообще.

Итак, начнем с плагина.

Как несложно догадаться из названия, для его работы нужна библиотека jQuery. Сам плагин слайдшоу с плавными переходами между картинками.

Как это выглядит можно посмотреть на демонстрационной страничке.

И, конечно, вы можете скачать архив с примером.

Source

Использовать плагин не сложно. Просто подключаете файлы со скриптами, размещаете на странице несколько картинок и вызываете метод panelGallery плагина. И все, слайдшоу работает.

Выглядит это примерно так

    <div id="myimages" style="position:relative">
        <img src="images/1w.jpg" alt="картинка" width="390px" height="290px" />
        <img src="images/2w.jpg" alt="картинка" width="390px" height="290px" />
......
    </div>

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.panelgallery-1_2.js"></script>
<script type="text/javascript">
$(function() {
    $('#myimages').panelGallery({
        sections:5
        ,sectionTransitionDelay:500
    });
});
</script>

Правда есть несколько нюансов, о которых нужно помнить.

1) Картинки должны находиться внутри блока с позиционированием. Т.е. для этого блока должно быть установлено CSS правило position:relative или position:absolute или position:fixed.

2) Вы можете использовать картинки разного размера, но атрибуты width и height должны быть одинаковыми, т.е. браузер подгонит их под заданный размер. На мой взгляд лучше заранее подготовить картинки одинакового размера.

3) Нормально работать плагин начнет только после того, как все картинки будут загружены, поэтому если вы решите сделать слайдшоу из сотни-другой картинок, то посетителю придется немного подождать 🙂

4) Плагин имеет довольно много настроек, с помощью которых можно контролировать анимацию. Их перечень в конце этой статьи.

Теперь самое главное – анимация, а точнее нагрузка на систему.

К сожалению, на сегодняшний день поддержка JavaScript в браузерах далека от идеала. Т.е. пока вы используете несложные функции, которые выполняются только при определенных действиях посетителя – все отлично.

Но если этот код будет работать постоянно (как в случае этого плагина), то нагрузка резко возрастает.

Этот плагин не исключение. Во время смены картинок нагрузка на процессор достигает 20-30%.

Причем она может быть и больше. Уменьшите задержки между запуском анимации, увеличьте количество сегментов, поднимите скорость и, думаю, вы легко возьмете планку в 40-50% 😉

В общем, глядя на эти цифры, возникает острое желание поискать какое-нибудь решение на Flash или Silverlight 🙂

А вы как думаете?

P.S. Настройки плагина.

sections – количество блоков, на которые разбивается изображение (по-умолчанию 3).

imageTransitionDelay – пауза (в мс) перед началом показа следующего изображения (по-умолчанию 3000).

startDelay – пауза перед запуском первой анимации (по-умолчанию 2000).

sectionTransitionDelay – задержка между показами секций изображения (по-умолчанию 700мс).

overlap – позволяет начать анимацию следующей секции до того как закончится анимация предыдущей. Задается как доля от значения параметра sectionTransitionDelay (изменяется от 0 до 1). Например, если sectionTransitionDelay:1000, а overlap:0.5, то следующая секция начнет появляться через 500мс после предыдущей.

enablePause – если равен 1, то анимация будет остановлена при наведении курсора на картинку.

repeat – если равен true, то картинки будут повторяться по кругу.

direction – направление переходов. “lr” (слева направо), “rl” (справа налево), “tb” (сверху вниз), and “bt” (снизу вверх) (по-умолчанию: “lr”).

Постовой

В каждом случае ведение бухучета ООО требует индивидуального подхода