Создание анимированного бэкграунда в css

При создании анимационного бэкграунда (заднего фона в меню css) нужно 3 программы.

Хотя можно обойтись двумя или даже одной.

Всё зависит от того, из чего мы его будем делать, из какого материала.



Нам понадобятся:

VTFEdit - для конвертации наших скринов в vtf вормат

FormatFactory - для обрезания видео и конвертации mp4 в avi.

Free Video to JPG Converter - для конвертации avi в jpeg

Берем любое видео. Выбираем понравившийся нам момент в пределах такой зависимости:
4-5 сек 1Гб установленной оперативной памяти
5-10 сек - 1,5-2 Гб установленной оперативной памяти

При необходимости можете увеличить файл подкачки.

Это не конечная зависимость. Выводы основаны на тестах с пятью компьютерами. Так что возможно, что 10сек мувик будет хорошо работать с 1Гб опер. Но вы сможете создать бэкграунд в 10 сек с 1Гб установленной оперативной памяти.
Ограничение: 1Гб = 120-130 фреймов(5-6 сек) и не более. Файл подкачки не поможет.

1. Выбрали понравившийся момент, обрезали и конвертировали программой FormatFactory в avi.
(в ней вы быстро разберетесь)

2. Переходим ко второму этапу.. конвертируем avi в jpeg. Ставим галочку Извлечь > Всего > выбираем
количество фреймов-скринов для видео.
Я придерживаюсь следующего соотношения:
20-25 кадров в секунду. Т.е. для 4 секундного видео я выставляю значение в пределах 80-100 кадров. Далее переходим в папку со скринами у удаляем лишние, мешающие цикличности кадры.

3. Здесь будьте внимательны. Открываем VTFEdit, далее File > Import > Выделяем все наши скрины (Сtrl+A) и жмем открыть. Появится следующее окно:


У вас всё должно быть как на скрине:

General Options:
Normal format DXT5
Alpha format DXT5

Maximum Width 512
Maximum Height 512

Нажимаем Ok и ждем, процесс конвертации может занять от 5 до 15 мин в среднем. Это так же зависит от мощности вашего компьютера.
Все готово.
Сохраните файл в предварительно созданную папку, под любым именем (например res.vtf). 
\Counter-Strike Source\cstrike\materials\res
Откройте блокнотом файл res.vmt и впишите следующее:

Код:

"UnlitGeneric"

{
"$basetexture" "res/res"
"Proxies"
{
"AnimatedTexture"
{
"animatedtexturevar" "$basetexture"
"animatedtextureframenumvar" "$frame"
"animatedtextureframerate" "17"
}
}
}

Сохраните.

4. Перейдите в папку \Counter-Strike Source\cstrike\materials\console и откройте или создайте файлы background01.vmt и background01_widescreen.vmt очистите и впишите следующее:

Код:

"Unlittwotexture"
{
"$basetexture" "res/res"
"$selfillum" 1
"$additive" "1"
"$texture2" "res/texres"

"Proxies"
{
"AnimatedTexture"
{
"animatedtexturevar" "$basetexture"
"animatedtextureframenumvar" "$frame"
"animatedtextureframerate" 22
}

}
}

5. Переходим к созданию файла texres.vtf - это фоновая текстура, без нее ничего у нас не заработает.
Открываем фотошоп и создаем файл разрешением 1024х512 и заливаем всё цветом #f0f9f0.
Сохраняем под именем texres.png

6. Открываем VTFEdit, далее File > Import > выбираем файл texres.png и жмем открыть.
Здесь всё то же самое, что и на скрине выше, за исключением: Maximum Width 1024

Код:

General Options:
Normal format DXT5
Alpha format DXT5

Maximum Width 1024
Maximum Height 512

Сохраняем как texres.vtf в ту же папку где и наш анимированный бэкграунд. Файл texres.vmt нужно удалить.

Теперь можете запустить контру и лицезреть своё творение.
Бэкграунд будет отлично работать и на обычных и на широкоформатных мониторах.
Потерь качества при сжатии в VTF в 512х512 незамечено. 

На этом всё.

Обязательно: для того чтобы было видно анимированный бэкграунд нужно включить в настройках видео>детализация текстур - выбрать Очень высоко