-
Notifications
You must be signed in to change notification settings - Fork 25
/
Copy pathreadme-rus.txt
71 lines (51 loc) · 4.22 KB
/
readme-rus.txt
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
Motion CSS это библиотека анимации для ваших веб проектов. Работает это очень просто.
Все, что вам нужно сделать это подключить css файл и применить определенный класс к элементу, который должен быть анимирован.
ИСПОЛЬЗОВАНИЕ
Подключите файл стилей в теге <head> на вашем сайте:
<link rel="stylesheet" href="motion.min.css">
Добавьте класс "animation" к элементу, который должен быть анимирован. Теперь выберите анимацию для вашего элемента и добавьте к нему соответствующий класс.
Название анимации и есть класс, который нужно добавить.
Например, я хочу добавить элементу анимацию появления слева. Она называется "fade-in-left". Вот как будет выглядеть мой элемент:
<div class="animation fade-in-left">
Как вы уже догадались, я добавил class="animation fade-in-left".
ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ
Если вы хотите сделать задержку анимации, то используйте один из классов:
"delay-05s" – задержка 0,5 сек,
"delay-1s" – задержка 1 сек,
"delay-1-5s" – задержка 1,5 сек,
"delay-2s" – задержка 2 сек,
"delay-3s" – задержка 3 сек
или добавьте свой собственный
.delay-Хs
{
-webkit-animation-delay: Хs !important;
animation-delay: Хs !important;
}
Чтобы бесконечно повторять анимацию используйте класс "replay".
Также вы можете объединить эту библиотеку с jQuery, чтобы в полной мере управлять анимацией на сайте.
К примеру, вы можете добавлять элементу класс анимации, когда он появляется в видимой области экрана.
Для этого поместите следующий код перед тегом </body>:
<script>
$(window).scroll(function(){
$('#elementId').each(function(){
var elPosition = $(this).offset().top; //Позиция элемента
var elHeight = $(this).height(); //Высота элемента
var windowTop = $(window).scrollTop(); //Верх окна
var windowHeight = $(window).height(); //Высота окна
if (elPosition < windowTop + windowHeight - elHeight) {
$(this).addClass("animation fade-in");
} //добавляет класс, когда элемент находится полностью в видимой области окна
if (elPosition > windowTop + windowHeight ) {
$(this).removeClass("animation fade-in");
} //убирает класс, когда элемент не виден в окне
if (elPosition + elHeight < windowTop ) {
$(this).removeClass("animation fade-in");
} //убирает класс, когда элемент не виден в окне
});
});
</script>
Вместо #elementId впишите идентификатор или класс вашего элемента. Также замените класс "fade-in" на нужный вам класс анимации.
Запомните, что для всех видов анимации появления нужно добавить вашему элементу id="animation" либо css правило "visibility: hidden;".
В свою очередь класс "animation" сделает потом ваш элемент видимым.
Добавление класса animation обязательно к любой анимации, так как он содержит правило "animation-fill-mode: both",
которое запретит возврат вашего элемента в первоначальное положение после окончания анимации.