ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Объявление

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже почти три года.

Посетить

💰 Теперь у нас можно приобрести "Мгновенные уведомления от Алекса"

Скрипт оповещает пользователей о событиях на форуме в реальном времени, придавая динамики общению.
Автор: Alex_63 | Платформа: MyBB.ru.

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

Купить скрипт

🔥 Новинка в портфолио: ДИЗАЙН ФОРУМА В СТИЛЕ ФЭНТЭЗИ С ПРОЗРАЧНОСТЬЮ

Платформа: MyBB.ru (RusFF)
Стоимость: 8000 рублей;
Авторы: Moju & Gerda

Посмотреть

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

❤️ Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайте • Предложения
Стать модератором • Отзывы

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
Suggestions • Reviews

Details
СкрытьПоказать
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Практические заметки. Анимация: вес vs качество

Практические заметки. Анимация: вес vs качество

Страница: 1

Сообщений 1 страница 8 из 8

1

  • Автор: Decadence
  • Бестелесный дух прошлого
  • Decadence
  • Уважение: +845

Решила поделиться со всеми страждущими парочкой своих практических хитростей  http://uploads.ru/i/7/H/w/7Hwsf.gif

Отбеливатель - залог легкости
Чем меньше яркость изображения, тем легче получится ваша гифка и тем плавнее окажутся переходы между градациями цвета, читай - меньше будет раздражающая "зернистость".

Голяк? Зато 5 грамм!
Чем больше слоев и кадров в гифке, тем грузнее она будет сама по себе. Запомните: каждый новый слой с эффектом и каждый лишний кадр кандалами ложатся на Вашу гифку!  http://uploads.ru/i/j/o/z/jozsm.gif

Оно большое и шевелится! о.о"
Пихать на форум целую шапку с анимацией - глупо. Весит много, грузит долго, качество уплывает в далекие дали. Что делать? Если гифка довольно мелкая, то этот способ может помочь:

хитропопый мануал

В HTML-верх пихаем вот такой кусок кода:

<div style=​"width:​210px;​ height:​200px;​ position:​absolute;​ margin-top:​-435px;​ margin-left:​ -156px; background-image:url();​">​</div>​

А теперь по полочкам:
width:​210px;​ height:​200px - ширина и высота соответственно, изменяем под размер гифки
margin-top:​-435px;​ margin-left:​ -156px; - отступы сверху и слева соответственно, двигаем по шапке на глаз
background-image:url(); - пихаем в скобки ссылку на гифку и вуаля!

Прозрачность и анимация живут по соседству, но постоянно цапаются
Крайне не рекомендую делать анимацию на прозрачном фоне. Почему? Да просто вокруг красиво мигающей картинки начинает появляться некошерный белый контур. Что с ним делать-то? Если как-то убирать, то края получатся обгрызанными. Тут остается только заливать фон за гифкой цветом, наиболее близким к цвету фона, на котором он будет стоять. А если фон - не однородный цвет, а текстура, к примеру? Хитрим: при сохранении для вэб-устройств в строчке Matte выбираем примерный цвет фона. Это избавит нас от пресловутых белых краев  http://uploads.ru/i/J/F/6/JF6NL.gif

+1

2

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

http://uploads.ru/i/R/j/9/Rj9lU.gif
Decadence,
В Опере какие то квадратики лишние в кодах
http://uploads.ru/t/8/Z/N/8ZN9A.png

Decadence написал(а):

Прозрачность и анимация живут по соседству, но постоянно цапаются
Крайне не рекомендую делать анимацию на прозрачном фоне. Почему? Да просто вокруг красиво мигающей картинки начинает появляться некошерный белый контур

В принципе, если слоев немного,
и время переключения слоя более 0.01 секунды(10миллисекунд)
можно выполнить анимацию png картинками + скрипт

Ротатор Произвольного Контента по кругу

<style>#КонтентРотатор p{display:none}</style>
<div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента -->
<p><img src="Ccылка1" /></p>
<p><img src="Ccылка2" /></p>
<p><img src="Ccылка3" /></p>
<p><img src="Ccылка4" /></p>
<p><img src="Ccылка5" /></p>
</div>

<script language="javascript">
var ms = 20;  // Время отображения

var Nrout=$("#КонтентРотатор p").length;
var i=0;RotatorMycontent(i);

function RotatorMycontent(i) {
$("#КонтентРотатор p").css({"display":"none"});
$("#КонтентРотатор p").eq(i).css({"display":"block"});

j=i+1;if(j>=Nrout){j=0};
timerID = setTimeout("RotatorMycontent(j)",ms);return;}
</script>

Ставим туда куда нужно
- синим жирным-число миллисекунд(1/1000cекунды) для отражения cлоя

В данном Случае в Скрипт вставляем ссылки на Картинки слоёв Анимации сохраненнык в формате png,
Ccылки вставляем вместо Красного

<img src="CcылкаN" />

Количество слоёв
<p><img src="CcылкаN" /></p> - Уменьшаем/Увеличиваем сколько надо

Для Перемещения в нужное место на поле форума(если картинка не в таблицу или во всю шапку)-Обуваем весь код в Обрамление, указанное в Первом Сообщении

Отредактировано Deff (07.02.12 16:30)

+1

3

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

http://uploads.ru/i/7/H/w/7Hwsf.gif

Пример Анимации смайлика данным скриптом

Код:
<style>#КонтентРотатор p{display:none}</style>
<div id="КонтентРотатор" style="width:400px;"><!-- Ротатор произвольного контента -->
<p><img src="http://uploads.ru/i/e/U/k/eUkcI.png" /></p>
<p><img src="http://uploads.ru/i/Y/W/6/YW6Sj.png" /></p>
<p><img src="http://uploads.ru/i/L/k/a/LkayG.png" /></p>
<p><img src="http://uploads.ru/i/G/u/v/Guvef.png" /></p>
<p><img src="http://uploads.ru/i/b/6/W/b6Wq2.png" /></p>
<p><img src="http://uploads.ru/i/g/O/0/gO0G4.png" /></p>
<p><img src="http://uploads.ru/i/i/x/I/ixIus.png" /></p>
<p><img src="http://uploads.ru/i/h/X/I/hXIva.png" /></p>
<p><img src="http://uploads.ru/i/l/c/g/lcguO.png" /></p>
<p><img src="http://uploads.ru/i/0/m/F/0mFji.png" /></p>
<p><img src="http://uploads.ru/i/O/S/d/OSdIp.png" /></p>
<p><img src="http://uploads.ru/i/K/9/i/K9iF2.png" /></p>
<p><img src="http://uploads.ru/i/g/0/V/g0VWu.png" /></p>
<p><img src="http://uploads.ru/i/q/u/d/qudxH.png" /></p>
<p><img src="http://uploads.ru/i/N/E/Q/NEQ8e.png" /></p>
<p><img src="http://uploads.ru/i/2/x/R/2xRpj.png" /></p>
<p><img src="http://uploads.ru/i/9/s/F/9sFBf.png" /></p>
<p><img src="http://uploads.ru/i/c/S/g/cSgxb.png" /></p>
<p><img src="http://uploads.ru/i/f/c/Q/fcQrL.png" /></p>
<p><img src="http://uploads.ru/i/f/U/T/fUTMR.png" /></p>
<p><img src="http://uploads.ru/i/U/a/k/UakmC.png" /></p>
<p><img src="http://uploads.ru/i/z/q/R/zqR5P.png" /></p>
<p><img src="http://uploads.ru/i/C/F/J/CFJyH.png" /></p>
<p><img src="http://uploads.ru/i/Q/F/S/QFSgN.png" /></p>
<p><img src="http://uploads.ru/i/p/M/h/pMhQW.png" /></p>
<p><img src="http://uploads.ru/i/S/N/k/SNkxL.png" /></p>
<p><img src="http://uploads.ru/i/A/R/d/ARdm7.png" /></p>
<p><img src="http://uploads.ru/i/T/G/f/TGfyg.png" /></p>
<p><img src="http://uploads.ru/i/g/x/6/gx6ip.png" /></p>
<p><img src="http://uploads.ru/i/S/s/D/SsDpk.png" /></p>
<p><img src="http://uploads.ru/i/m/Z/R/mZRjc.png" /></p>
<p><img src="http://uploads.ru/i/C/v/c/Cvcq2.png" /></p>
<p><img src="http://uploads.ru/i/x/m/J/xmJl1.png" /></p>
<p><img src="http://uploads.ru/i/R/7/s/R7s1P.png" /></p>
<p><img src="http://uploads.ru/i/F/0/p/F0pUz.png" /></p>
<p><img src="http://uploads.ru/i/f/B/P/fBP6Q.png" /></p>
<p><img src="http://uploads.ru/i/o/R/K/oRKei.png" /></p>
<p><img src="http://uploads.ru/i/x/o/e/xoeDX.png" /></p>
<p><img src="http://uploads.ru/i/u/S/1/uS1Cg.png" /></p>
<p><img src="http://uploads.ru/i/4/h/j/4hjtg.png" /></p>
<p><img src="http://uploads.ru/i/w/T/z/wTziW.png" /></p>
<p><img src="http://uploads.ru/i/F/A/B/FAB0C.png" /></p>
<p><img src="http://uploads.ru/i/F/7/G/F7Gqh.png" /></p>
<p><img src="http://uploads.ru/i/T/L/f/TLf05.png" /></p>
<p><img src="http://uploads.ru/i/I/W/Q/IWQhG.png" /></p>
<p><img src="http://uploads.ru/i/G/V/5/GV5p2.png" /></p>
<p><img src="http://uploads.ru/i/3/n/T/3nTVa.png" /></p>
<p><img src="http://uploads.ru/i/H/L/o/HLoRg.png" /></p>
<p><img src="http://uploads.ru/i/W/8/3/W83mS.png" /></p>
<p><img src="http://uploads.ru/i/g/E/W/gEW0p.png" /></p>
<p><img src="http://uploads.ru/i/3/2/S/32Sxz.png" /></p>
<p><img src="http://uploads.ru/i/o/9/A/o9Ah4.png" /></p>
<p><img src="http://uploads.ru/i/R/1/C/R1Cr9.png" /></p>
<p><img src="http://uploads.ru/i/b/v/E/bvEjh.png" /></p>
<p><img src="http://uploads.ru/i/P/y/F/PyFex.png" /></p>
<p><img src="http://uploads.ru/i/t/k/v/tkvgR.png" /></p>
</div>

<script language="javascript">
var ms = 140;  // Время отображения

var Nrout=$("#КонтентРотатор p").length;
var i=0;RotatorMycontent(i);

function RotatorMycontent(i) {
$("#КонтентРотатор p").css({"display":"none"});
$("#КонтентРотатор p").eq(i).css({"display":"block"});

j=i+1;if(j>=Nrout){j=0};
timerID = setTimeout("RotatorMycontent(j)",ms);return;}
</script>

Отредактировано Deff (07.02.12 13:12)

+1

4

  • Автор: mintemero
  • Бестелесный дух прошлого
  • mintemero
  • Уважение: +580

Deff
интересное решение:) Но, мне кажется, одна gif картинка будет весить куда меньше целого скрипта.

0

5

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122

mintemero
Гы - ерунда - скрипт весит ровно сток -ско занимает его буквы (исходник весит 580 байт

Второе - Собственно скрипт это как Возможное решение не Gif-Анимации,( у которой нет полупрозрачности и рубленный край), а возможность анимации png картинками, где есть плавная полупрозрачность, сходящая на нет,
Тем самым - мы можем незаметно вклеить произвольную анимированную картинку(с плавно сходящими на нет прозрачностью) на произвольный фон

0

6

  • Автор: mintemero
  • Бестелесный дух прошлого
  • mintemero
  • Уважение: +580

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

0

7

  • Автор: mintemero
  • Бестелесный дух прошлого
  • mintemero
  • Уважение: +580

Кстати, у нас же есть flash! Для сложной анимации- самое то. Тем более, что он умеет куда больше просто анимации, тут тебе и менюшечки и все что угодно можно сделать. Правда, тут уметь надо.

Вот, хороший пример: http://drakenfurt.ru/

0

8

  • Автор: Deff
  • Жерар Депардье
  • Deff
  • Уважение: +3482
  • Достижения/подарки: cake 4 emoji_events 4
  • Наградные баллы: 122
mintemero написал(а):

Кстати, у нас же есть flash! Для сложной анимации- самое то.

Подобный скрипт при небольших объемах изо попроще, поскольку используется та же gif-технология - просто промежуточные слои сохраняются в формате png, новый вариант заливки на форум - позволяет залить всю сохраненную папку картинок - одним нажатием.
Флешь хороша тем, что при насыщенной плотной миниграфике, можно получить оч небольшой вес файла, ко всему прочему, должен поддерживаться флешь плеер, что ксать не на все браузеры он ставицо сам и сходу и не все Антивирусы к такой графике благодушно относяцо, могут и запретить
Минус флешь - то что поверх нёё уже поставить что то уже сложно... например всплывающее Окно, флешка вылезет все равно на передний план
Хотя Есть задачки, идеально решаемые ток с помощью флешь...(*Надо ксать изучить поглубжа - возможно тогда многие скрипты будут занчительно симпатичней!

mintemero написал(а):

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

http://uploads.ru/i/R/j/9/Rj9lU.gif
Пример - нужен некий код с Анимацией  в форму Ответа, с возможностью установки на Всех форумах - под неизвестные стили
Можно кнешн поставить свой фон, но будут вопросы с фонами резко отличающимися от  авторских предположенний

Или Анимированные Украшательства к новому году

Или -Универсальный переливающийся Логотип на шапку, с возможностью смены-подбора целиковой картинки шапки

Отредактировано Deff (25.02.12 13:26)

0

Страница: 1

Вы здесь » ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов » Архив устаревших тем » Практические заметки. Анимация: вес vs качество