-
Notifications
You must be signed in to change notification settings - Fork 0
/
doc.html
191 lines (177 loc) · 7.04 KB
/
doc.html
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<title>FIREFLY - Довідка </title>
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="img/favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<meta name="description" CONTENT="FireFly - візуальний редактор CSS-анімації,
що дозволить вам без особливих зусиль створити свою анімацію. Або ж редагувати
вже існуючу анімацію з будь-якої популярної бібліотеки">
<meta name="keywords" CONTENT="firefly, css, анімація,
редактор, візуальний редактор, CSS-анімація">
</head>
<body class="documentation">
<div class="header">
<div class="logo">
<img src="img/logo.png" alt="" />
<span>Firefly </span>
<span class="version"> v1.0</span>
</div>
</div>
<div class="wrap">
<h2>Довідка</h2>
<div class="deskr">
<p>FireFly - візуальний редактор CSS-анімації, що значно спрощує створення нової анімації або ж редагування вже існуючої.</p>
<p>Нижче описано детальну інструкції як користуватися даним редактором.</p>
</div>
<section class="first">
<div class="right">
<p><strong>Вкладка "Клас"</strong></p>
<ol>
<li>Елемент для пошуку необхідної анімації</li>
<li>Кліком миші анімації буде перенесена до редактора</li>
<li>Значок для задання значення "безкінечного повторення"</li>
<li>Випадаючи списки статичних параметрів анімації</li>
<li>Таби для переходу між вкладками</li>
</ol>
</div>
<div class="left">
<img src="img/docs/props-block-1.png" alt="" />
</div>
</section>
<section class="first curve">
<!-- start .left -->
<!-- start .right -->
<!-- end .right -->
<div class="left">
<img src="img/docs/curve.jpg" alt="" />
</div>
<div class="right">
<p><strong>Крива Безьє</strong></p>
<ol>
<li>Елементи керування</li>
<li>Показники прогресу відносно часу</li>
<li>Кнопки зберження чи відміни дій</li>
</ol>
</div>
<!-- end .left -->
</section>
<section class="first">
<!-- start .left -->
<!-- start .right -->
<div class="right">
<p><strong>Вкладка "Кадри"</strong></p>
<ol>
<li>Додавання нових керуючих елементів для введення</li>
<li>Після наведення на елемент, з'являється значок для його видалення</li>
</ol>
</div>
<!-- end .left -->
<!-- end .right -->
<div class="left">
<img src="img/docs/props-block-2.jpg" alt="" />
</div>
</section>
<section class="first">
<!-- start .left -->
<div class="left">
<img src="img/docs/editor.jpg" alt="" />
</div>
<!-- end .left -->
<!-- start .right -->
<div class="right">
<p><strong>Текстовий редактор</strong></p>
<ol>
<li>Кнопки копіювання, імпорту та експорту текстового файлу</li>
<li>В редакторі можна вносити зміни в анімацію, вони застосуються у всіх частинах редактора</li>
</ol>
</div>
<!-- end .right -->
</section>
<section class="first">
<!-- start .left -->
<!-- start .right -->
<div class="right">
<p><strong>Часова лінія</strong></p>
<ol>
<li>Кнопки керування відтвроенням анімації</li>
<li>Індекатор прогресу</li>
<li>Неактивний кадр</li>
<li>При наведені на активний кадр з'являється значок для його видалення</li>
<li>Вигляд активного кадру</li>
</ol>
</div>
<!-- end .right -->
<div class="left">
<img src="img/docs/timeline.jpg" alt="" />
</div>
<!-- end .left -->
</section>
<section class="first">
<!-- start .left -->
<div class="left">
<img src="img/docs/anim-zone.jpg" alt="" />
</div>
<!-- end .left -->
<!-- start .right -->
<div class="right">
<p><strong>Зона попердньго перегляду</strong></p>
<ol>
<li>Елемент що анімується</li>
<li>Редагування стилів та структури анімованого елемента</li>
<li>Кнопка застосування змін</li>
<li>Повернення до початкового вигляду елемента</li>
</ol>
</div>
<!-- end .right -->
</section>
<section class="first">
<!-- start .right -->
<div class="right">
<p><strong>Меню сайту</strong></p>
<ol>
<li>Авторизація через популярні сервіси</li>
<li>Зміна розташування елементів в редакторі</li>
<li>Виклик вікна з інформацією про автора сайту</li>
<li>Детальна документація</li>
<li>Виклик вікна з підказками в користуванні сайтом</li>
</ol>
</div>
<!-- end .right -->
<!-- start .left -->
<div class="left">
<img src="img/docs/top-menu.jpg" alt="" />
</div>
<!-- end .left -->
</section>
<section class="first">
<!-- start .left -->
<div class="left">
<img src="img/docs/top-menu-2.jpg" alt="" />
</div>
<!-- end .left -->
<!-- start .right -->
<div class="right">
<p><strong>Меню сайту після авторизації</strong></p>
<ol>
<li>Кнопка збреження анімації в базу даних для авторизованого користувача</li>
<li>Відображення збережених раніше анімацій</li>
<li>Дані про активного користувача</li>
<li>Значки для прив'язання інших сервісів авторизації</li>
<li>Вихід з профілю</li>
</ol>
</div>
<!-- end .right -->
</section>
<section class="video-inst">
<h2>Демонстрація роботи в редакторі</h2>
<iframe width="854" height="480" src="https://www.youtube.com/embed/IY9Nri6jpd4" frameborder="0" allowfullscreen></iframe>
</section>
</div>
<!-- end .wrap -->
<div class="copyright">
<p>CopyRight <i class="fa fa-copyright" aria-hidden="true"></i> 2017 - by Kolya Stanislavchuk</p>
</div>
</body>
</html>