Как да създадете анимирано флагче за уебсайт

Въведение

Искате ли да добавите движещо се съобщение или изображение към вашия сайт? Анимирано флагче, което се вее като истинска знамена, е отличен начин за това. Вместо да ползвате сложен графичен софтуер, можете да го създадете безплатно онлайн и след това да го публикувате на вашия уебсайт.

Стъпка 1 – Избор на онлайн генератор

Отворете браузъра си и посетете един от следните генератори за анимирани флагчета: FlashVortex.com, MakeSweet или Layoutcodez.net. MakeSweet и Layoutcodez.net позволяват качване на собствено изображение, докато FlashVortex предлага готови шаблони, които можете да редактирате.

Стъпка 2 – Качване на изображението

На MakeSweet натиснете бутона с плюс (+) и изберете вашата снимка. На Layoutcodez.net кликнете върху бутона „Choose File“ и също изберете файл. Следвайте инструкциите на сайта, за да добавите графиката към проекта.

Стъпка 3 – Настройка на флагчето

В зависимост от избрания инструмент, използвайте наличните менюта, за да зададете размер, текст и позиция. Примерно, във FlashVortex задайте стойност в полето „Flag scale“, въведете желания текст в полето „Text“ и регулирайте позицията под „Edit Text Label Position“. Layoutcodez.net не предлага допълнителни редакции.

Стъпка 4 – Генериране на анимацията

Натиснете бутона „Generate Animation“ (FlashVortex) или „Upload“ (Layoutcodez.net). Копирайте кода, който се появи в текстовото поле. При MakeSweet кликнете върху иконата с филм, изберете „Draft“ или „HI‑RES“ и запазете полученото GIF‑файл на компютъра.

Стъпка 5 – Качване на GIF‑а

Ако използвате MakeSweet, качете готовия GIF файл на вашия уеб хост в същата папка, където се намират другите файлове на сайта. Запомнете точния URL, например https://www.yourdomain.com/flag.gif.

Стъпка 6 – Вмъкване във вашата страница

Отворете страницата, където искате да се появи флагчето, в текстовия си редактор. Поставете курсора на желаното място и поставете кода, получен от FlashVortex или Layoutcodez.net. Ако използвате MakeSweet, вмъкнете следния HTML код, като замените YOUR_URL с вашия адрес:

<img src="YOUR_URL" alt="Анимирано флагче">

Запазете промените и обновете страницата – анимираното флагче вече ще се вижда.