Анімований з`являється текст

Відео: Анімація і дизайн тексту і титрів Sony Vegas # снімайімонтіруй #sonyvegas

У цьому уроці ми розглянемо як створити анімований з`являється текст. Іноді потрібно зробити щоб текст не просто з`явився на сторінці, а поступово, плавно або навпаки швидко але тільки після повного завантаження сторінки. Можливо потрібно просто виділити будь-яку частину тексту, щоб користувач звернув увагу (я маю на увазі продає сторінку або сторінку захоплення). В уроці присутні кілька видів появи, тому ви можете вибрати найбільш вподобаний.

З приводу виділення тексту також був урок - Як створити обертається текст.

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

Необхідно завантажити jQuery (тут) І плагін jquery.flipping_text.js (тут), А потім підключити:

12

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.flipping_text.js"gt; lt;/scriptgt;

Відео: ЯК ЗРОБИТИ красивою анімацією ТЕКСТУ АБО КАРТИНКИ В AFTER EFFECTS ?! | туторіал

HTML код дуже простий. Вам лише потрібно задати певний клас, наприклад, для заголовка:

12345

lt;bodygt; ..lt;h1 class="Intro"gt; ...lt;/h1gt; ..lt;/bodygt;

jQuery частина

Щоб використовувати плагін на сторінку необхідно додати наступний код:

1234567

$(".intro").flipping_text({tickerTime: 10,customRandomChar: false,tickerCount: 10,opacityEffect: true,resetonchange: false})-

Плагін самостійно вважає кількість символів. Розглянь що представляє кожну з цих властивостей:

Відео: Як зробити анімований текст в Sony Vegas?

• tickerTime - задається в мілісекундах. Визначає наскільки швидко буде з`являтися буква.
• customRandomChar - ця властивість дозволяє задати довільний набір символів, які будуть показуватися перед появою кожного символу тексту. Переконатися в цьому можете на Демо 4.
• tickerCount - визначає скільки символів потрібно «перебрати» перед тим як показати потрібний символ з послідовності тексту.
• opacityEffect - можливість зробити символ який тільки з`явився нечітким (сірим). Приймає значення «false» і «true».
• resetonchange - дозволяє зберегти скільки символів з`явилося коли користувач клікнув на іншу вкладку. Може приймати значення «false» і «true».

висновок

Цікавий ефект для тексту, який можна використовувати як на що продає сторінці, так і на сторінці захоплення, щоб привернути увагу користувача # 128578; .

Успіхів!

джерело: https://onextrapixel.com/2014/01/28/flippingtext-js-create-a-ticking-intro-animation-for-your-typography/