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

Съвременното уеб съдържание трябва да бъде интерактивно и да включва различни медии заедно с добър ол "обикновен текст. Някои инструменти могат да ни помогнат да разтърсим разказите ни няколко пъти. И ако сте потребител на WordPress, можете да използвате функцията Animate It! приставка за добавяне на хладни CSS3 анимации към вашето съдържание.

Какви са възможностите?

Заедно с HTML5, CSS3 е съкращението, свързано с модерния уеб дизайн. Накратко, CSS е уеб компонентът, който позволява на потребителите да контролират външния вид на уеб страницата, като например оформлението, позицията, шрифта, цвета и т.н. Най-новата й инкарнация, CSS3, е достатъчно умна, за да позволи на потребителите да създават изображения и анимации кодове.

За щастие, не е нужно да сте кодер, за да използвате CSS3 на вашия сайт WordPress. Анимирайте я! плъгин ви позволява да прилагате CSS3 анимации към публикации, джаджи и страници с натискането на бутон в редактора. Освен това потребителите могат да контролират задействанията. Например, те могат да прилагат анимиране на превъртане, кликване и задържане на курсора на мишката и добавяне на различен отместване на превъртане върху отделни блокове за анимация. Плъгинът идва с тона от функции като:

  • 50+ анимации за вход, изход и внимание на търсещия
  • Осигурява функция за забавяне и контрол на продължителността в анимацията, за да създаде хубава анимация
  • Позволете на потребителите да прилагат анимация безкрайно или всеки определен брой пъти
  • Опция за добавяне на персонализирани класове CSS към отделен анимационен блок
  • Опции за активиране или деактивиране на анимации на смартфони и таблети

Какво можете да направите с Animate It! плъгин? Можете да добавяте прости интерактиви към вашите статии, да създавате привлекателни страници за продажби, да задълбочавате емоциите на твоите фикции или дори да създавате мощна бизнес презентация, ако искате. Само не забравяйте да не прекарате зад борда, тъй като бомбардирането на посетителите ви с неограничена анимация не е най-добрият начин да получите лоялни читатели.

Първи стъпки с Анимирайте го!

След като инсталирате и активирате приставката, можете да намерите бутона за добавяне на анимация в редактора "WordPress". "Този бутон ще се появи само във визуален режим, но ако сте научили командите, е възможно да въведете кодовете от режим на обикновен текст (повече за това по-късно).

След натискане на бутона ще получите прозорец с опции. Има три раздела, които ви позволяват да персонализирате анимацията. Първият раздел е "Вход". Това е мястото, където да добавите анимацията, която ще влезе в екрана при определени условия. Четирите опции за падащо меню ще ви помогнат да настроите ефекта от анимацията.

  • Анимацията е мястото, където да изберете каква анимация искате.
  • Закъснението ще ви помогне да настроите времето, преди анимацията да започне.
  • Продължителността е за това колко дълго ще се играе анимацията от началото до края. Колкото по-голям е броят, толкова по-бавно ще бъде анимацията.
  • Времето е делът на анимацията, която да се играе в даден момент. Например ефектът "easeIn" ще възпроизведе анимацията по-бавно в началото и по-бързо към края.

Можете да проверите ефективните комбинации, като ги възпроизвеждате с помощта на бутона "Анимиране!". Ако резултатът е по ваше желание, можете да натиснете бутона "Вмъкване", за да го използвате в съдържанието си.

Разделът "Изход" е повече или по-малко подобен на елемента, но за да добавите анимация, която ще напусне екрана. Чрез комбинирането на двете можете да добавите обект, който ще се появи на екрана и след това да изчезне.

Разделът "Опции" е мястото, където контролирате общите настройки на анимацията. Тук можете да настроите анимацията да се възпроизвежда на цикъл или само веднъж, да запази крайното състояние на елемента, да добави персонализиран CSS код и да настрои спусъка, който ще стартира анимацията. По-конкретно за пускащото устройство - настройката "Активиране на" - можете да изберете превъртане например и анимацията ще започне само ако областта вече е видима на екрана.

Добавяне на вашето съдържание

След натискане на бутона "Вмъкване" ще видите няколко реда къси кодове, добавени към съдържателната ви зона. Тези кратки кодове са тези, които ще контролират анимацията. И тъй като те са само кодове със стойности, можете да добавите кодовете ръчно, ако сте добри с кодове и искате да. Въпреки това, други хора трябва просто да се придържат към "Анимирайте я!" бутон.

Ще видите и текст, който гласи: " Моля, добавете вашето съдържание в тази област. "Ето къде можете да добавите елементите, които искате да анимирате. То може да бъде текст, изображения, икони, лога, аудио, видеоклипове или дори други кратки кодове. Опитах се да добави кратък код за въвеждане на текст, генериран чрез приставката Typed Js, а резултатът е страхотен.

Ако има едно нещо, което бих могъл да кажа за използването на Animate It! плъгин, ще бъде "Experiment!" Играйте с него и опитайте различни комбинации, за да получите резултата, който искате. Забавно е. И ето резултатът, който дойдох в рамките на по-малко от една минута. Аз комбинирах Animate It! плъгин с приставка Typed Js.

Смятате ли, че е време да добавите интерактивни елементи към уеб съдържанието си? Планирате ли да опитате приставката? Използвате ли различни приставки за анимация? Моля, споделете, като използвате коментарите по-долу.