Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript

Войти
Регистрация
Восстановить пароль
 
Gerd199
1 / 1 / 0
Регистрация: 06.03.2014
Сообщений: 734
#1

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

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

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

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

Диаграмма на чистом js - JavaScript
Кто нибудь знает или подкинуть простенький пример кода реализации диаграма(график). На чистом js... Хочу написать свою, понятную для...

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

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

Аналог .on(jquery) на чистом js - JavaScript
Нужно обрабатывать клики по динамическому контенту с атрибутами data-uimage-command. <span class="tool" data-uimage-command="clear"><i...

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

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

7
Sergey Yermak
123 / 62 / 27
Регистрация: 22.05.2016
Сообщений: 174
16.07.2016, 14:28 #2
Вот похожее, отображается во время загрузки страницы:
https://ihatetomatoes.net/create-css3-spinning-preloader/
1
BANO
Ренегат
Эксперт HTML/CSS
1627 / 1056 / 292
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
16.07.2016, 18:15 #3
Sergey Yermak, как я понимаю, это именно то и есть...
прошу перенести конечный код в студию и можно будет теоретически считать ответом на вопрос
1
Sergey Yermak
123 / 62 / 27
Регистрация: 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
1 / 1 / 0
Регистрация: 06.03.2014
Сообщений: 734
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 / 27
Регистрация: 22.05.2016
Сообщений: 174
17.07.2016, 11:00 #6
Вообще можно, но может лучше в css файл добавить?
0
Gerd199
1 / 1 / 0
Регистрация: 06.03.2014
Сообщений: 734
17.07.2016, 11:04  [ТС] #7
У меня плагин на js, хотелось бы все в js хранить...
Я вот простенькие свойства знаю как добавлять, а вот "after", "@keyframes spin" да еще еархия не понятная для меня. Хз...
0
Sergey Yermak
123 / 62 / 27
Регистрация: 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
Привет! Вот еще темы с ответами:

Ищу мини календарь на чистом js - JavaScript
Подскажите миникалндарь, тот что при нажатии на какую либо кнопку, раскрывается рядом с ней... Главное, чтобы был на чистом javascripte

Слайдер изображений на чистом JavaScript - JavaScript
Ребят, очень прошу помощи. Объясните мне пожалуйста на пальцах, логику слайдера на чистом JS. В интернете полно слайдеров, но все они на...

Возможно ли подобная реализация на чистом js? - JavaScript
Всё происходит server-side запускаем скрипт он переходит на страницу делает клик по onload ждём загрузки страницы далее...

Сортировка прикрепленных файлов на чистом JS - JavaScript
Есть блок &quot;attach-block&quot; в котором много блоков с классом attached. Разумеется в этом блоке находятся загруженные пользователем файлы. ...


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

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

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