Плагин для эффекта цикличного скролла бекграунд картинки элемента

Тут попался мне один дизайн при котором была так сказать прокрутка картинок. Проблема состояла в том что картинки, которые надо было менять верстальщик разместил как background: url() blablabla. И тут начались проблемы :)
  • Мы не можем в jQuery(и не только в нем) делать эффекты на эту картинку, например тот же fadeOut.
  • Замена картинки получается слишком долгой за счет того что картинки не подгружены еще, а дополнительно это делать не хотолось бы, тем более что эффектов нету :)

И что же делать? Долго думали с дизайнером, как выбраться из этой ситуации.
И придумали!
  • Можно подгрузить ОДНУ картинку, которая будет содержать в себе все остальные — это решает проблему с подгрузкой картинок.
  • Эффект все таки можно делать, если менять позицию БОЛЬШОЙ картинки, что бы показывать как бы маленькую нужную.

Но не все так легко как кажеться. Вот следующие проблемы с которыми пришлось столкнуться:
  • В Opere и Firefox не поддерживается свойство background-position-x(y)
  • Вторая проблема состоит в том что если во время плавной прокрутки мы снова кликнем на показ следующей картинки, то у нас получиться смещение

В итоге что получилось, всё на гитхабе.
Я думаю по его коду можно легко разобраться как он работает и какие у него опции. Просто уставший и уже нету сил писать к нему ридми.

ЗЫ Добавил пример на гитхаб и на сайт себе его закинул.
ЗЫЫ Для работы нужен плагин timers.
–9
28 сентября 2009, 22:12
4
simonoff –5,0

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

+5
switchON #
Было-бы не плохо увидеть пример.
+1
simonoff #
Добавил пример.
–1
max7 #
«Хлеба и зрелищ»
–1
AStek #
Хабра и зрелищ!!!
0
Ueasley #
Норм.

А стрелки вправо-влево, учитывая прокрутку, просто вынесли мозг
+2
theaspin #
Хм, FF 3.5, Opera 10 — анимации нет, просто меняются кадры. Под Safari 4 — все ок.
0
homm #
а под ие8 вообще фигня полная.
–1
simonoff #
ну я с сайта вырезал и не проверял под IE.На самом сайте все нормально.
+2
homm #
Автор, если вы хотели нам рассказать, как картинку на фоне двигать, спасибо, не надо, в яслях расскажите, может быть хоть там надуться те, кто не знает.
+3
fuksito #
Делал год назад, насмотревшись на карамельку на входе в парикмахерскую в каком-то американском фильме.
www.vitalik.com.ua/scr/movebg/demo.html
0
dshster #
marienergosbyt.ru/company/
делал в 2007 году насмотревшись на облака, хотя сейчас сделал бы подругому — более компактно. Про JQ тогда даже и не знал, да и сейчас недолюбливаю.

Не в обиду никому, но не раз возникала идея собирать вот такие «фишки» на jQuery и реализовывать их на чистом Javascript — ради практики и интереса. Просто смотрю и удивляюсь — насколько «многа букав» получается реализовать простые вещи, да еще подгружая целые фреймворки!
0
fuksito #
Было бы интересно почитать
0
Olegbl4 #
> В Opere и Firefox не поддерживается свойство background-position-x(y)
А просто background-position использовать это уже слишком сложно?
–1
simonoff #
нет не сложно. но тогда эффекта анимации не будет.
0
Olegbl4 #
Отчего же?
–1
simonoff #
$(«element»).animate({backgroundPosition: '0px 20px'},500); — не будет работать плавно.
0
Olegbl4 #
Сразу видно, что код писали вы. Сначала пишете (function($){})(jQuery) и первая же строчка jQuery.extend() нахрена тогда было заворачивать весь код, если внутри всё равно пишете jQuery?
–2
simonoff #
хм… я просто его делал по примерам других модулей :) надо же было на чем-то базироваться, тем более когда пишешь плагин первый раз.
0
Olegbl4 #
А вопрос: «Зачем люди так пишут» — не задавали?
–3
simonoff #
Вы когда берете шаблон или каркас, вы часто задумываетесь зачем это делают, если вам надо срочно сделать на этом костяке что-то более сложное?
0
homm #
Вы когда берете шаблон или каркас, вы часто задумываетесь зачем это делают
Вообще-то всегда. А вы просто быдлокодер.
+1
homm #
О себе:
Языки программирования:
Pascal, C/C++, Delphi, PHP, Perl, Python, Shell, Ruby.
Базы данных:
MySQL, PostgreSQL.
Администрирование:
Apache 1.xx/2.xx, Squid, Bind, ftp (vsftpd,proftpd), Postfix, Exim, MySQL, Samba (PDC), cvs/svn, nginx.
Интересы: Кластеры, распределенные вычисления, high-load сервера, nginx
Это называется «я знаю карате, айкидо, кунг-фу и еще 44 страшных слова».
0
betaboy #
А не кому не встречался скролл как здесь: emfire.ru/

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.