Страница 1 из 2
неGIFовая анимация на сайте
Добавлено:
20 дек 2008, 07:25
Youzer
если где-то обсуждалось - прошу прощения. просто не знаю, как сформировать вопрос по такому поводу:
есть графический объект, картинка, представляющая из себя последовательность кадров в виде колонки (один под другим). реализация такова, что, подставляя этот файл бэкграундом в ссылку, мы выводим первый (верхний) кадр. а при наведении на ссылку происходит прокрутка всех кадров от 2-го до последнего. надеюсь, понятно изъяснил? посмотреть в действии можно на
этом сайте (в верхнем левом углу - логотип с названием сайта). может кто подскажет принцип действия такого метода анимирования? буду очень признателен.
Re: неGIFовая анимация на сайте
Добавлено:
20 дек 2008, 12: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
посмотрю. если сохранил, то поделюсь