Кодировка HTML | Демо-сайт CMS uCoz | Почта

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

Все что связано с HTML и CSS.
Правила форума
1. Темы с названиями Помогите, Как сделать, Хелп, Не могу найти и так далее будут перенесении в мусорку без предупреждения!
2. Любой транс-лит будет удален, так что подумайте стоит ли писать транс-литом.
3. Темы не по тематике этого раздела будут также перенесены в мусорку. (Например по DLE, phpBB, php скриптам и так далее...)
4. Не забываем про Общие правила форума!

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

Сообщение Youzer » 20 дек 2008, 07:25

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

есть графический объект, картинка, представляющая из себя последовательность кадров в виде колонки (один под другим). реализация такова, что, подставляя этот файл бэкграундом в ссылку, мы выводим первый (верхний) кадр. а при наведении на ссылку происходит прокрутка всех кадров от 2-го до последнего. надеюсь, понятно изъяснил? посмотреть в действии можно на этом сайте (в верхнем левом углу - логотип с названием сайта). может кто подскажет принцип действия такого метода анимирования? буду очень признателен.
Youzer
Полковник
Полковник
 
Автор темы
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21
Карма: + 4 -
Откуда: СССР

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

Сообщение botanic » 20 дек 2008, 12:02

Выпил пол-литра - дошло. Как сделать - не представляю ))
Учусь Яваскрипту! Тупить теперь буду меньше)
Аватара пользователя
botanic
Лейтенант
Лейтенант
 
Сообщения: 85
Возраст: 31
Зарегистрирован: 01 июн 2008, 18:49
Карма: + 2 -
Откуда: из Москвы

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

Сообщение GuRick » 30 апр 2009, 11:46

На сколько я тебя понял, вот тут есть нужный тебе скрипт:
http://snook.ca/archives/javascript/jquery-bg-image-animations/
А вот тут пример этого скрипта: http://snook.ca/technical/jquery-bg/
На указанном Вами сайте я этого скрипта вообще-то не нашёл, но указанный мной скрипт, думаю поможет.
Ничего не получится лишь у того, кто быстро сдаётся.
Аватара пользователя
GuRick
Салага
Салага
 
Сообщения: 1
Возраст: 31
Зарегистрирован: 27 апр 2009, 08:59
Карма: + 0 -
Откуда: Россия, Ярославль

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

Сообщение Youzer » 30 апр 2009, 14:30

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

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

кстати говоря, не обладая знаниями в JS, мне почти удалось добиться указанного эффекта на чистом javascriptе. так что, думаю, при желании любой понимающий в скриптинге сможет такое сотворить за пару минут. смысл прост: картинка с кадрами в виде кинопленки прокручивается при определенном действии.
Youzer
Полковник
Полковник
 
Автор темы
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21
Карма: + 4 -
Откуда: СССР

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

Сообщение Task » 13 май 2009, 12:11

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

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

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

в HTML
<div class="element"></div>
Аватара пользователя
Task
Полковник
Полковник
 
Сообщения: 349
Зарегистрирован: 14 янв 2009, 12:46
Карма: + 9 -

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

Сообщение Youzer » 14 май 2009, 01:59

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

плюс картинка прокрутки должна грузиться во время загрузки страницы, чтобы при начале работы с кнопками она уже находилась в кеше (это если появится мысль использовать нецикличную анимацию, которая в данном случае закончит выполняться раньше, чем до нее дойдет очередь)
Youzer
Полковник
Полковник
 
Автор темы
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21
Карма: + 4 -
Откуда: СССР

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

Сообщение BL_AF » 15 май 2009, 21:37

Youzer, смотря какая картинка. в фотошопе можно настроить кол-во воспроизведений картинки
Аватара пользователя
BL_AF
Подполковник
Подполковник
 
Сообщения: 206
Возраст: 30
Зарегистрирован: 21 апр 2008, 12:08
Карма: + 0 -
Откуда: Зимбабве

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

Сообщение Youzer » 17 май 2009, 00:41

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

поэтому - только спрайтом. тем более для понимающего в js написать такой скрипт ничего не стоит. я, почти совсем не разбираясь, пытался сделать нечто похожее, только с таймером запутался при обратной прокрутке. а все остальное удалось реализовать как в оригинале
Youzer
Полковник
Полковник
 
Автор темы
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21
Карма: + 4 -
Откуда: СССР

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

Сообщение Drinko » 17 май 2009, 14:31

Youzer, не поделишься своей наработкой? :)
Drinko
Сержант
Сержант
 
Сообщения: 61
Зарегистрирован: 26 мар 2009, 00:20
Карма: + 6 -

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

Сообщение Youzer » 17 май 2009, 23:17

посмотрю. если сохранил, то поделюсь
Youzer
Полковник
Полковник
 
Автор темы
Сообщения: 354
Зарегистрирован: 20 авг 2008, 13:21
Карма: + 4 -
Откуда: СССР

След.

Вернуться в HTML и CSS

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 4

cron