Вариант 1:
|
1 |
<canvas id="bubbles"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#bubbles { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #bubbles:hover { background:#3D689C; } |
|
1 |
<script src="http://atuin.ru/js/art/bubbles.js" type="text/javascript"></script> |
Должен быть подключен скрипт фона
Вариант 2:
|
1 |
<canvas id="lines"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#lines { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #lines:hover { background:#3D689C; } |
|
1 2 |
<script src="http://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> <script src="http://atuin.ru/js/art/lines.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Вариант 3:
|
1 |
<canvas id="floodlight"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#floodlight { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #floodlight:hover { background:#3D689C; } |
|
1 |
<script src="http://atuin.ru/js/art/floodlight.js" type="text/javascript"></script> |
Должен быть подключен скрипт фона
Вариант 4:
|
1 |
<canvas id="stars"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#stars { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #stars:hover { background:#3D689C; } |
|
1 |
<script src="http://atuin.ru/js/art/stars.js" type="text/javascript"></script> |
Должен быть подключен скрипт фона
Вариант 5:
|
1 |
<canvas id="painting"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#painting { background:#477ab9; width:100%; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } #painting:hover { background:#3D689C; } |
|
1 |
<script src="http://atuin.ru/js/art/painting.js" type="text/javascript"></script> |
Должен быть подключен скрипт фона
Смотрите также: Анимированные фоны - часть 1
Обычно я в блок Html вставляла. Не знаю, про счётчики. Надо все 3 кода вставлять?
Здравствуйте понравился 1 анимация, не могу понять как ее установить. Вставляю в блок HTML но ничего не работает . Для тильды можно его применить?
На тильде, если мне память не изменяет, скрипты нужно в счетчики вставлять. Другого там места не нашел как их подключать еще.
Куда в счётчики именно, обычно в блок вставляю.
Кончено три
HTML это непосредственно сам блок где у вас.
CSS можно добавить в стили сайта, должны быть какие то пользовательские.
А JS я точно не знаю как тильда разрешает ставить. Но в счетчики помоему можно вставлять JS код
Здравствуйте
Очень понравился 4-й вариант, но почему-то у меня не работает!?
Ошибка в скрипте
Все остальные варианты работают.
А какая ошибка?
https://codepen.io/atuin/pen/xvLjBL
так то нормально вроде работает.
красиво, но вот добавил 1 анимация и страница начала грузить процессор (i7) на 70%
Хочу первый вариант использовать в шапке, но когда уменьшаю высоту пузырьки становятся плоскими, а не круглыми. Мне надо 150px высота шапки
Вставляйте canvas в блок с высотой 150px и нужной шириной
Или можно так: в самом скрипте (в функции initHeader) поменяйте:
height = window.innerHeight;
на
height = 150;
Как спрятать этот фон под основные блоки сайта(если они по центру экрана). Canvas все перекрывает.
Выше канваса ставим:
<div class="text">БЛОК</div>
А класс примерно такой:
.text {
text-align:center;
width:100%;
position:absolute;
}
Еще 1 вариант, это к стилю канаваса добавить:
position:absolute;
z-index:-1;
А ниже него писать все тексты и размещать блоки
Все работает но ни как не становится бекграундом - все сдвигается... выложи пример, где дивы поверх этого чуда.
Как то так:
https://atuin.ru/js/art/lines-primer.html
Пятый вариант классный!