неGIFовая анимация на сайте

[Youzer]

если где-то обсуждалось - прошу прощения. просто не знаю, как сформировать вопрос по такому поводу:

есть графический объект, картинка, представляющая из себя последовательность кадров в виде колонки (один под другим). реализация такова, что, подставляя этот файл бэкграундом в ссылку, мы выводим первый (верхний) кадр. а при наведении на ссылку происходит прокрутка всех кадров от 2-го до последнего. надеюсь, понятно изъяснил? посмотреть в действии можно на этом сайте (в верхнем левом углу - логотип с названием сайта). может кто подскажет принцип действия такого метода анимирования? буду очень признателен.

[botanic]

Выпил пол-литра - дошло. Как сделать - не представляю ))

[GuRick]

На сколько я тебя понял, вот тут есть нужный тебе скрипт:
http://snook.ca/archives/javascript/jquery-bg-image-animations/
А вот тут пример этого скрипта: http://snook.ca/technical/jquery-bg/
На указанном Вами сайте я этого скрипта вообще-то не нашёл, но указанный мной скрипт, думаю поможет.

[Youzer]

на указанном сайте этот скрипт хорошо запрятан, там ного подобных фишек с секретностью кода применяется. раньше, не найдя в исходнике скрипта, я предполагал, что реализация основана на новшествах со стилями (что-то из области CSS3), но теперь уверен, что все таки это скрипты.

варианты с jquery я тоже рассматривал, но все, что попадалось, основано не на графике (в смысле спрайтовой анимации), а на эффектах с цветностью.

кстати говоря, не обладая знаниями в JS, мне почти удалось добиться указанного эффекта на чистом javascriptе. так что, думаю, при желании любой понимающий в скриптинге сможет такое сотворить за пару минут. смысл прост: картинка с кадрами в виде кинопленки прокручивается при определенном действии.

[Task]

зачем jQ?
1. Делаешь исходную картинку.
2. Делаешь .gif анимацию картинки в действии.
3. В css создаешь новый элемент, делаешь таким образом:

.element{
background:url('КАРТИНКА1');
}

.element:hover{
background:url('GIF_АНИМАЦИЯ');
}

в HTML
<div class="element"></div>

[Youzer]

ну да, и при наведении она будет крутиться бесконечно. требуется разовая прокрутка от первого кадра к последнему для ховера, и наоборот - для возвращения в исходное состояние.

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

[BL_AF]

Youzer, смотря какая картинка. в фотошопе можно настроить кол-во воспроизведений картинки

[Youzer]

это не выход. велика вероятность, что при наведении попадешь не на первый кадр анимации, да и повторов прокрутки не избежать.

поэтому - только спрайтом. тем более для понимающего в js написать такой скрипт ничего не стоит. я, почти совсем не разбираясь, пытался сделать нечто похожее, только с таймером запутался при обратной прокрутке. а все остальное удалось реализовать как в оригинале

[Drinko]

Youzer, не поделишься своей наработкой?

[Youzer]

посмотрю. если сохранил, то поделюсь