Анімація html5

Раніше вся анімація на сайтах була в основному створена на Flash. З появою технології HTML5 стало можливим створювати анімацію без використання Flash. А адже анімація завжди привертала і привертає увагу відвідувачів. Але писати з нуля на HTML5 зможуть не всі, тому що це не дуже легко для людини, яка не розбирається в цьому. Тому в даному уроці я хочу розглянути спеціальний сервіс, який дозволяє створювати анімацію на HTML5. У цьому сервісі зможе розібратися абсолютно кожен!

Я хочу розповісти про такий сервіс, як HTML5Maker.

HTML5Maker - це онлайн-сервіс, який дозволяє створювати інтерактивний анімований контент (слайд-шоу, банери і т.д.) на HTML5.

Давайте приступимо до вивчення цього сервісу.

Перейти на сервіс
HTML5Maker

Введення і реєстрація

Даний сервіс можна використовувати без реєстрації. Для цього потрібно натиснути на кнопку «Create animation» відразу, як зайдете на сайт:

Що стосується реєстрації та авторизації то тут також все дуже легко. Вам потрібно натиснути на кнопку «Sign in» в правому верхньому кутку екрану:

Тут є два шляхи: увійти через Facebook або Google PLus, або зареєструватися. Посилання (там ще буде текст «Do not have an Account? Register Now!») Реєстрації знаходиться під великою кнопкою "Sign in»

Після натискання за цим посиланням ви потрапляєте на сторінку з вибором тарифу. Вибираєте перший тариф «Free» і тиснете кнопку «Start now!»

Відео: Запис вебінару "Крута анімація на HTML5 без програмування"

Потім з`явиться сторінка з введенням email і пароля. Заповнюєте ці два поля і клікаєте на кнопку з текстом «Create free account», яка знаходиться нижче.

Після чого на пошту прийде повідомлення, в якому буде посилання. З цієї посилання необхідно буде пройти для активації облікового запису.

Знайомство з інтерфейсом

Думаю з реєстрацією та входом у вас проблем не виникне. І зараз переходимо безпосередньо до середовища в якій ми розроблятимемо нашу анімацію.

Перше, що ви побачите, це робоча область. Виглядає вона наступним чином:

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

Додавання слайдів

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

Відео: Анімація зображення на javascript. Анімаційний HTML5 Canvas. Основи створення ігор на javascript

Для додавання нового слайда необхідно натиснути на кнопку «Add a New Slide»:

Додавання зображень

Для того щоб додати зображення на слайд, необхідно натиснути на кнопку «Add image»:

Після чого з`явиться спливаюче вікно з вибором готових зображень:

Також в цьому вікні можна натиснути на кнопку «Upload image» і завантажити своє власне зображення. Крім свого зображення, як я вже говорив, вам пропонується вже набір підібраних і згрупованих зображень. Після того, як ви визначилися з зображенням необхідно натиснути на кнопку «Add» і зображення буде додано на слайд:

Після додавання зображення на слайд, воно виділяється і стають доступні функції для роботи з зображенням. На зображенні нижче я зазначив кожну функцію цифрою:

Давайте по порядку розглянемо ці кнопки:

1. При натисканні на цю кнопку зображення скопіюється і скопійоване вставиться зі зміщенням трохи нижче і вправо.
2. Дану кнопку необхідно затиснути і можна обертати зображення.
3. Текст буде вилучатися зображення.
4. Кнопка відповідає за зміну розміру зображення по ширині.
5. Ця кнопка відповідає за зміну розміру зображення пропорційно по висоті і ширині.
6. Кнопка відповідає за зміну розміру зображення по висоті.

Отже, це основні функції, які можна застосувати до зображення. Але є і ще. Вони стають доступними за виділення зображення і знаходяться у правій колонці:

Почнемо розглядати зверху вниз.

Першим йде блок «Adjust image», де є 4 кнопки: «Replace», «Modify», «Original» і «Fit to Canvas». Що саме робить кожне з цих властивостей?

• Кнопка «Replace» - при натисканні на цю кнопку з`являється спливаюче вікно в якому вас просять вибрати нове зображення, яким ви хочете замінити справжнє.
• Кнопка «Modify» - при натисканні на цю кнопку відкривається вікно, в якому доступні різні ефекти для зображення, можна додати текст на зображення, додати рамку, а також обрізати, повернути, зробити розмитим, відобразити по вертикалі або горизонталі і змінити контрастність.
• Кнопка «Original» - повертає початкові налаштування зображення.
• Кнопка «Fit to Canvas» - при натисканні зображення приймає максимальну висоту і ширину з урахуванням що воно повинно поміститися в розмір слайда.

Наступним йде блок «Arrange Selected Text», і в ньому дві кнопки: «Bring to Front», «Send to Back». Кнопка «Bring to Front» відповідає за те, щоб висунути зображення на передній план, а друга кнопка «Send to Back» відповідає за позиціонування зображення на задній план.

Далі йдуть три блоки «Change position» (зміна позиції зображення), «Change size» (зміна розміру) і «Change rotation» (поворот в градусах), їх можна змінити за допомогою кнопки і перетягуючи зображення утримуючи ліву кнопку миші.

І останній блок під назвою «Opacity» - змінюючи його значення, перетягуючи повзунок, ви змінюєте прозорість зображення.

Останній момент, який хочу розповісти - це ефект при появі і зникнення зображення. Ця панель знаходиться внизу в центральній частині робочої області:

У лівому верхньому випадаючому списку, де їсти напис «Appear:», ви вибираєте ефект як буде зображення з`являтися. А в лівий нижній випадає, у якого є напис «Disappear:», список відповідає за ефект з яким зображенням зникає.

Додавання тексту

Текст додається натисненням на кнопку «Add text" в лівому верхньому кутку центральної області.

Після чого справа з`являються функції (зміна шрифту, розміру, кольору, фону, стиля, відступів) для роботи з текстом. Їх я описувати не буду, тому що у всіх текстових редакторах вони дуже схожі. Думаю ви розберетеся в них, а як ні - пишіть в коментарі, будемо розбиратися разом # 128578; .

Основні настройки анімації, перегляд і публікація проекту

Для того щоб активувати ці настройки вам необхідно натиснути або на кнопку «Settings» в лівому верхньому кутку центральної області, або клікнути по порожньому місці, де немає слайда.

В результаті ви побачите наступні настройки вашого проекту в правій колонці:

Тут можна змінити розмір слайдів, встановити фоновий колір, а також додати кнопки, для управління слайд-шоу. Щоб додати кнопки управління слайд-шоу необхідно натиснути на кнопку «Animation controls» і тут ви побачите спливаюче вікно з вибором всіляких кнопок, Таймлайн і так далі:

Попередній перегляд і публікація

Даний сервіс надає два способи предпросмотра: попередній перегляд одного слайда (для цього потрібно використати кнопку «Prewiew Current Slide») або попередній всіх слайдів разом (кнопка «Prewiew All Slides»).

Після завершення створення вашого проекту необхідно натиснути на велику помаранчеву кнопку, яка знаходиться в правому верхньому куті вікна браузера. З`явиться спливаюче віконце, в якому є можливість зберегти ваш проект у форматі HTML5 / CSS / JS або в форматі FLash.

Після чого ви можете вбудовувати вашу анімацію на ваш сайт! # 128578;

Також дивіться цикл статей 3D перетворення і анімація CSS.

висновок

Стаття, звичайно, вийшла об`ємна. Я детально розглянув основні можливості сервісу HTML5Maker, за допомогою якого можна створювати анімації на HTML5 без професійних знань цієї технології. Вивчайте цей сервіс і створюйте свої слайд-шоу і анімації, а також вбудовуйте їх на себе до вашого сайту. А також пишіть про свої анімаціях HTML5, які ви створили за допомогою цього сервісу в коментарях нижче, мені дуже цікаво дізнатися що у вас вийшло! # 128578;

Успіхів!

З повагою, Юрій Німець