Простий і елегантний врающающійся текст

Відео: Tutorial 1 Обертання тексту. Урок 1 анімований текст в Camtasia studio

Технологія CSS3 відкрила новий світ для дизайнерів і розробників, щоб не просто виділяти статичний текст на сторінці, а також робити його динамічним. У цьому уроці ми розглянемо невеликий, але дуже простий плагін, який допоможе створити гарний обертається текст на вашому сайті. Плагін встановлюється і налаштовується протягом декількох хвилин. Переходьте в повну новину і для початку подивіться реальний приклад роботи цього плагіна.

Відео: Ефект простого появи тексту в Cinema 4D

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

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

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

HTML частина

Викачуємо бібліотеку jQuery (тут або підключаємо безпосередньо) і плагін Adjector.js (тут) і стилі (тут), а потім підключаємо:

lt;link rel="Stylesheet" type="Text / css" href="Css / adjector.css" /gt;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 / adjector.js"gt; lt;/scriptgt;

Я буду розглядати все на прикладі Демо 4.

І в структурі сайту пишемо які слова необхідно міняти через вертикальну риску:

lt;div id="Heading" class="Contain"gt;lt;span class="Adject"gt; КОЛІРlt;/spangt;lt;span class="Adject"gt; Червоний | Синій | Зелений | Жовтий | Чорнийlt;/spangt;lt;/divgt;

Відео: обертаються текст в Vegas Pro!

А так як в цьому випадку у нас є ще й опис кожного кольору, то необхідно також через вертикальну риску, але в іншому блоці, вставити опис:

Відео: Проста 3D Анімація в Sony Vegas (3D Track Motion) # снімайімонтіруй #sonyvegas

12345678910111213

lt;div id="Sub" class="Contain"gt;lt;span class="Adject"gt; Червоний (родинно ст.-слав. красьн` - гарний, прекрасний), також червлений, рдяний (арх.) - область квітів в довгохвильовій частині видимого спектру, відповідає мінімальній частоті електромагнітного поля, яка сприймається людським оком. | Синій - найменування групи кольорів . Спектральний синій колір відчувається людиною під дією випромінювання з довжиною хвилі близько 440-485 нм (іноді діапазон вказують ширше - 420-490). Один з «основних кольорів» в системі КЗС (RGB). | Зелений колір - один з трьох основних кольорів, зеленим вважають діапазон кольорів спектра з довжиною хвилі приблизно 500-565 нанометров.Шіроко поширений в живій природі. Більшість рослин мають зелений колір, оскільки містять пігмент фотосинтезу - хлорофіл. | Жовтий - цветa з довжиною хвилі від 565 нм до 590 нм. Є додатковим кольором до синього в RGB або додатковим до фіолетового в художній практиці і системи RYB. Проте в давнину, через недосконалість наявних пігментів, його розглядали як додатковий до пурпурного. | Чорний - ахроматичний цвіт, відсутність світового потоку від об`єкта. В системі RGB позначається як # 000000. Відтінки чорного кольору іменуються сірим кольором.lt;/spangt;lt;/divgt;

javascript частина

У нашому випадку настройки плагіна будуть виглядати наступний чином:

12345678910

lt;script type="Text / javascript"gt; $ (document) .ready (function () {$ ( ". contain .adject"). adjector (sep: ") -}) -lt;/scriptgt;

Розглянемо що це за властивості:

sep - це роздільник, який ми ставимо між текстом, який змінюється.
stay - цей параметр задає на скільки секунд зупиняється з`явився текст. Здається в мілісекундах.
trans - визначає швидкість обертання. Тобто ми задаємо час від початку і до кінця обертання. Також задається в мілісекундах.
arm - задає вісь обертання. Якщо даний параметр дорівнює нулю, то буде відбуватися обертання на місці. Подивіться приклад Демо 3, там даний параметр дорівнює "-150".

висновок

Для чого ж можна використовувати даний плагін? Що перше приходить в голову - це виводити в такому вигляді анонси новин десь в сайдбарі, також можна рекламувати свої курси (для інфобізнесменов). А може у вас з`явилася своя ідея.

Якщо з`являться проблеми з установкою - пишіть в коментарях! # 128578;