Анимация на пълзяща линия. Анимация за тикер GIF и анимация на LED дисплеи

Здравейте, любители на оформлението и уеб езиците! Днешната тема на публикация с право е: „Анимация за html сайт“. Анимациите са доста популярни в наши дни и предизвикват най-много въпроси сред начинаещите. Ето защо искам да засегна тази тема и да ви кажа за какво са необходими анимирани елементи, къде най-често се използват и какви инструменти се използват.

Реших също така да покажа конкретни примери за код, изпълняващи популярни и търсени задачи. След като прочетете статията до края, ще научите как да прилагате техники като тикер лента и падащ сняг. Сега да преминем към основната част на статията!

Анимацията превзе света като буря

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

Преди това ролята на анимация се играеше от gif файлове. Днес обаче по-голямата част от движещите се елементи се извършва с помощта на каскадни стилови листове. Освен това има много библиотеки, които опростяват работата на уеб разработчиците, като им предоставят готови решения.

Например библиотеката Animate.css. Библиотеката може да бъде изтеглена и след това свързана с програмния код чрез < връзка>.

Тикер

Може би понякога сте забелязвали как текстовото съдържание на уебсайт се движи хоризонтално или вертикално или може би дори изображенията се движат. Изглежда малко сложно, но всъщност само един html езиков таг е отговорен за това .

Бих искал да отбележа, че това не е нов елемент и не е свързан с html5. Първоначално е създаден за Internet Explorer, но след известно време други браузъри започнаха да го поддържат.

И така, как се създава тикер? Всъщност просто трябва да въведете необходимия текст в сдвоения таг - и той ще „бяга“. Как точно ще се движи е друг въпрос.

Атрибут Описание
поведение Указва как се премества съдържанието:

редуват се– съдържанието се движи между две граници, отскачайки от тях;

превъртане– обектът се движи като в кръг (появява се от едната страна, изчезва от другата);

пързалка– съдържанието отива докрай и спира.
цикъл Определя колко пъти ще се повтори съдържанието на описания таг. Например -1 се използва за повтаряне за неопределено време.
посока Задава посоката на движение:

надолу– се движи от горния ръб надолу;

наляво– от десния ръб наляво;

нагоре– от долната граница към горната;

точно- от ляво на дясно.
сума на превъртане Задава разстоянието в пикселите между текущата позиция на обекта и следващата. Влияе на скоростта на движение. Първоначално равно на 6.
закъснение при превъртане Влияе и на скоростта на „работа“, но за сметка на честотата на обновяване. Задава забавянето в милисекунди.

Сега е време да изпробвате придобитите знания на практика. Поставете следната софтуерна реализация на тикери в диалоговия прозорец на кода и я стартирайте в браузър.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Пример Джъмпери

Пример Джъмпери

На страницата бяха показани две анимации: бягаща (или по-скоро скачаща) линия и галопиращ кон.

С наближаването на зимните месеци много собственици на онлайн ресурси украсяват уебсайтовете си със смърчови клони, празнични играчки или падащ сняг. Ще разгледаме последната точка.

Възможно е да създадете снежинки по различни начини. Някои рисуват шаблоните си на прозрачен фон, други използват готови материали от интернет, а трети прибягват до CSS инструменти. Реших да се присъединя към последната група и направих магията си върху стиловете.

Както може би се досещате, този път анимацията ще бъде създадена изключително от вградените механизми на каскадни стилови таблици, въпреки че има и други скриптове за решение. Също така, ние няма да използваме html, а ще използваме само стандартен код.

За да създадете падащ сняг, трябва да използвате следните инструменти:

Имот анимация(което се появи в спецификацията на css3) и блокира @ключови рамки.

@ключови рамкипомага да се определи състоянието на елементите на уеб страницата в определен момент от време и по този начин ги кара да се движат. Ключова дума отзадава първоначалното местоположение на обектите и думата да се- финал.

Общ изглед на обявата: име на @keyframes (от (…)да се (…) )

Анимациясе разделя на няколко параметъра, 4 от които ще използваме.

А сега един пример:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40



Тикер анимацията обикновено се използва на доста големи екрани. Това се дължи на факта, че е трудно да се избере графична анимация за малък екран, така че да изглежда хармонично и да не отвлича цялото внимание. Но движението на текст се използва за голямо разнообразие от размери на екрана.

LED тикерможе да бъде пълноцветен или монохромен и това също е от голямо значение за използването на анимация. В пълноцветни модели може да се използва без ограничения, но за едноцветни екрани е необходимо:

  • Прилагане на анимация, състояща се от един цвят;
  • Вземете предвид съотношението на размера, в противен случай анимацията просто ще се размаже.

Анимираният тикер текст за едноцветни екрани не трябва да бъде твърде сложен и зареден с ефекти. Не забравяйте, че всичко ще бъде направено в един и същи цвят и може да се слее в едно светло петно.

Удобен формат за обмен на изображения: gif, най-често използван при работа с екрани. Gif анимацията за пълзяща линия може да бъде едноцветна или многоцветна и да съдържа до 256 цвята.

В редакторите на LED екрани GIF файловете могат да се създават както в статично положение, така и в паралелно движение:

  • Собствено движение за изображението;
  • Ефект на движение по екрана.

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

Анимация за LED тикер

Дизайнът на всяко изображение върху LED екран може да стане по-интересен, ако добавите движение към него. Но трябва да правите разлика между това какво е анимацията за LED тикер и неговите собствени софтуерни ефекти. Така че можете да заредите анимиран текст или изображение в програмата за настройки в завършен вид. Файлът ще съдържа последователни кадри и информация за времето на показване на всеки от тях.

Има два начина за анимиране на тикер.

Първи начин

Отворете изображението, което ще бъде фон (пример). Създайте нов слой. С помощта на инструмента „Правоъгълна област“ изберете малък правоъгълник, който ще действа като поле, по което ще минава линията, и го запълнете с някакъв цвят, което няма значение, тъй като видимостта ще бъде премахната от него.

Създайте текстов слой.

Добавете маска на слоя към текстовия слой и го запълнете с черно. Стъпете върху слоя с правоъгълника и заредете избраната област: раздел „Tab“. Поставете го върху маската на слоя и запълнете избраната област с бяло.

Премахнете видимостта от слоя с правоъгълника. В раздела „Прозорец“ изберете „Времева линия“ и създайте сценарий. На първия кадър задаваме „Избор на време за показване на цикъл“ и „Избор на параметри на цикъл“. Премахнете връзката между текстовия слой и маската на слоя. Преместете линията надясно, така че да изчезне от погледа. Това ще осигури правоъгълна област, която е подчертана в бяло в маската на слоя. За да може линията да бъде на същото ниво при движение, трябва да активирате „Помощни елементи“: раздел „Изглед“.

На втория кадър преместваме линията наляво, така че да изчезне от погледа.

В разкадровката задръжте натиснат клавиша Shift и щракнете върху първия и втория кадър. Кликнете върху иконата „Създаване на междинни рамки“. В диалоговия прозорец задайте броя на междинните кадри.

Получаваме първия метод на пълзяща линия.

Втори начин

Създайте текстов слой, който ще бъде статичен, но с имитация на движение.

Изключете видимостта от всички слоеве с изключение на текстовия слой. Направете четка от текстовия слой.

Заставаме върху слоя с изображението, използваме инструмента „Правоъгълна зона“, за да изберете част от изображението, върху която ще бъде симулирана пълзящата линия. Копирайте избраната област и поставете.

Добавете маска на слоя към слоя с фрагмента от изображението и го запълнете с черно. В маската на слоя използвайте четка от белия текстов слой, за да разкриете слоя. Създайте нов слой над слоя с фрагмента от изображението и го нарисувайте с мека четка с подходящ тъмен цвят. Направете слоя изрязваща маска по отношение на лоса с фрагмент от изображението: докато държите натиснат клавиша Alt, щракнете по границата на слоевете в прозореца на слоевете.

Създаваме сценарий. На първия кадър преместете слоя с ивицата надясно.

На втория кадър преместете слоя с ивицата наляво.

Създаваме междинни рамки.

Запазваме анимацията и получаваме втория метод, симулиращ тикер.



 

Може да е полезно да прочетете: