Плагин для эффекта цикличного скролла бекграунд картинки элемента
Тут попался мне один дизайн при котором была так сказать прокрутка картинок. Проблема состояла в том что картинки, которые надо было менять верстальщик разместил как background: url() blablabla. И тут начались проблемы :)
И что же делать? Долго думали с дизайнером, как выбраться из этой ситуации.
И придумали!
Но не все так легко как кажеться. Вот следующие проблемы с которыми пришлось столкнуться:
В итоге что получилось, всё на гитхабе.
Я думаю по его коду можно легко разобраться как он работает и какие у него опции. Просто уставший и уже нету сил писать к нему ридми.
ЗЫ Добавил пример на гитхаб и на сайт себе его закинул.
ЗЫЫ Для работы нужен плагин timers.
- Мы не можем в jQuery(и не только в нем) делать эффекты на эту картинку, например тот же fadeOut.
- Замена картинки получается слишком долгой за счет того что картинки не подгружены еще, а дополнительно это делать не хотолось бы, тем более что эффектов нету :)
И что же делать? Долго думали с дизайнером, как выбраться из этой ситуации.
И придумали!
- Можно подгрузить ОДНУ картинку, которая будет содержать в себе все остальные — это решает проблему с подгрузкой картинок.
- Эффект все таки можно делать, если менять позицию БОЛЬШОЙ картинки, что бы показывать как бы маленькую нужную.
Но не все так легко как кажеться. Вот следующие проблемы с которыми пришлось столкнуться:
- В Opere и Firefox не поддерживается свойство background-position-x(y)
- Вторая проблема состоит в том что если во время плавной прокрутки мы снова кликнем на показ следующей картинки, то у нас получиться смещение
В итоге что получилось, всё на гитхабе.
Я думаю по его коду можно легко разобраться как он работает и какие у него опции. Просто уставший и уже нету сил писать к нему ридми.
ЗЫ Добавил пример на гитхаб и на сайт себе его закинул.
ЗЫЫ Для работы нужен плагин timers.

комментарии (23)