Вариант 1:
|
1 |
<canvas id="circles"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#circles { 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; } #circles: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/circles.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Вариант 2:
|
1 |
<canvas id="circles2"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#circles2 { 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; } #circles2: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/circles2.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Вариант 3:
|
1 |
<canvas id="square"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#square { 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; } #square: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/square.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Вариант 4:
|
1 |
<canvas id="triangle"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#triangle { 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; } #triangle: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/triangle.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Вариант 5:
|
1 |
<canvas id="word"></canvas> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#word { 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; } #word: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/word.js" type="text/javascript"></script> |
Должна быть подключена библиотека jQuery и скрипт фона
Смотрите также: Анимированные фоны - часть 2
Почему то "Ответ" на Ваш комментарий вызывает ошибку 404. А может скрипт нарисовать звезду?
Тут нужно на канвасе рисовать, например если брать 5тый вариант, то вместо текста картинку ставить.
Или искать что то похожее без канваса.
На днях скину что-нибудь похожее.
Спасибо за замечание, исправил ошибку (это я от дублей так избавлялся, когда в адресной строке вопросики стоят)
Отлично, очень интересно, буду ждать!
Исправлю и добавлю: я имел в виду внешнее SVG изображение - это вместо формы круга, чтобы можно было подключить не только круги квадраты и треугольники...
Добрый вечер, Александр!
Подскажите, пожалуйста, как можно в первом примере с кругами применить внешне SVG изображение и увеличить количество объектов фона?
Круги скрипт рисует, это не графика
Здравствуйте! Подскажите, как установить такой фон на сайт на вордпресс?
Ну это понятие растяжимое...
1 - Открыть шаблон нужный и вставить HTML
2 - Подключить или вставить в существующие CSS и JS
3 - Настроить по вкусу
Вот пример приблизительный:
https://atuin.ru/js/art/lines-primer.html
Спасибо, буду пробовать