Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
Gerd199
5 / 5 / 3
Регистрация: 06.03.2014
Сообщений: 793
#1

Анимация на чистом js

16.07.2016, 12:59. Просмотров 431. Ответов 7
Метки нет (Все метки)

Мужики, быть может кто видал или знает готовый js код. Который бы создал подобную анимацию.
Суть анимации в том, что каждый из кругов вращается с разной скорость...

Быть может что та похожее есть...
0
Изображения
 
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
16.07.2016, 12:59
Ответы с готовыми решениями:

Анимация по скроллингу с циклом просмотра массива на чистом JS
Народ, всем салют! Столкнулся с такой проблемой при создании анимации...

Слайдер на чистом JS
Здравствуйте, изучаю JS, пробую написать простой слайдер, помогите разобраться,...

Highcharts на чистом js
Подскажите, есть такая возможность у highcharts мол можно использовать без...

Диаграмма на чистом js
Кто нибудь знает или подкинуть простенький пример кода реализации...

Выпадающее меню на чистом JS
Добрый вечер! Уважаемые форумчане, очень прошу вас помочь мне с одной легкой...

7
Sergey Yermak
123 / 62 / 37
Регистрация: 22.05.2016
Сообщений: 174
16.07.2016, 14:28 #2
Вот похожее, отображается во время загрузки страницы:
https://ihatetomatoes.net/create-css3-spinning-preloader/
1
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
16.07.2016, 18:15 #3
Sergey Yermak, как я понимаю, это именно то и есть...
прошу перенести конечный код в студию и можно будет теоретически считать ответом на вопрос
1
Sergey Yermak
123 / 62 / 37
Регистрация: 22.05.2016
Сообщений: 174
16.07.2016, 18:28 #4
Необходимый HTML для анимации:

HTML5
1
2
3
<div id="loader-wrapper">
    <div id="loader"></div>
</div>
CSS:
CSS
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
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
1
Gerd199
5 / 5 / 3
Регистрация: 06.03.2014
Сообщений: 793
17.07.2016, 10:10  [ТС] #5
Возможно присвоить css параметры из javascript??
HTML5
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
<div id="loader"></div>
<style>
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 400px;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #3498db;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
 
</style>
0
Sergey Yermak
123 / 62 / 37
Регистрация: 22.05.2016
Сообщений: 174
17.07.2016, 11:00 #6
Вообще можно, но может лучше в css файл добавить?
0
Gerd199
5 / 5 / 3
Регистрация: 06.03.2014
Сообщений: 793
17.07.2016, 11:04  [ТС] #7
У меня плагин на js, хотелось бы все в js хранить...
Я вот простенькие свойства знаю как добавлять, а вот "after", "@keyframes spin" да еще еархия не понятная для меня. Хз...
0
Sergey Yermak
123 / 62 / 37
Регистрация: 22.05.2016
Сообщений: 174
17.07.2016, 11:18 #8
Можно сохранить в отдельный css файл, и подключить его кодом например.
0
17.07.2016, 11:18
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
17.07.2016, 11:18

Аналог .on(jquery) на чистом js
Нужно обрабатывать клики по динамическому контенту с атрибутами...

THIS на чистом JS как писать?
Дорогие друзья, подскажите как реализовать THIS на JS. Ситуация такая, есть...

Реализовать список с мультивыбором на чистом JS
Уф, НГ уже совсем близко. Клёво. Возрадуйся же! Просто так. Чё такой унылый?...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru