Страница 1 из 2

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

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

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

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

Добавлено: 20 дек 2008, 11:02
botanic
Выпил пол-литра - дошло. Как сделать - не представляю ))

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

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

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

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

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

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

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

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

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

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

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

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

Добавлено: 14 май 2009, 01:59
Youzer
ну да, и при наведении она будет крутиться бесконечно. требуется разовая прокрутка от первого кадра к последнему для ховера, и наоборот - для возвращения в исходное состояние.

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

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

Добавлено: 15 май 2009, 21:37
BL_AF
Youzer, смотря какая картинка. в фотошопе можно настроить кол-во воспроизведений картинки

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

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

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

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

Добавлено: 17 май 2009, 14:31
Drinko
Youzer, не поделишься своей наработкой? :)

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

Добавлено: 17 май 2009, 23:17
Youzer
посмотрю. если сохранил, то поделюсь