» »

Анимационный фон canvas для сайта в HTML5

Анимационный фон canvas для сайта в HTML5

Прекрасный фон в анимированной версий, где представлены разные по форме частицы с плавным переливанием, которые подойдет на страницы сайта. Если брать саму анимацию, то основном она привязана в заданному элементу, где может идти передвижение или перемещение с последствием исчезновением, включая разных фигур, как в нашем случай или слов с рисунками.

Здесь явно выражен праздничный фон, что если на основную страницу для кого то ярким станет, но на отдельную весьма вероятность ее увидеть. Здесь не будет изображений, а значит ссылок, все создано на css, плюс JS файл. Безусловно можно утверждать, что это необычно анимационный фон, который предназначен для интернета сайта.

Если так выглядит по умолчанию:

Необычный анимационный фон для сайта на canvas

То добавление в CSS прозрачно синего или другого оттенка "background: rgba(22, 22, 128, 0.6);" то видим изменение фона, но функционал остается аналогичным. Так, что веб разработчик выставит под свой основной стиль дизайна.

Фон с анимацией для сайта jquery

Приступаем к установке:

Первым делом размещаем стили в CSS:

Код
canvas {
width: 100%;
height: 100%;
object-fit: cover;
position: fixed;
z-index: -1;
}

Здесь ставим размер по ширине и высоте, где автоматически подстраивается под разные мобильные носители и безусловно больших мониторов.

Остается разместить на нужных страницах, после открывающего тега body выставляем:

Код
<script type="text/javascript" src="/js/c_lights.js"></script>

В завершение идем в файловый менеджер и нужно залить файл JS из закрепленного в материалу архива в папку js.

Если нужно редактировать рисунок, то ниже ставим canvas, где задается формирование картинки. Это не сам размер, а то, что находится уже внутри виде эффекта.

Код
<canvas width="1254" height="734"></canvas>

После последующей установки, у вас появится анимационный фон, который смотрится оригинально. Где в наличие поставлены интересные фигуры, в плане цветовой гаммы.

Все можно посмотреть на Demo страницы, как изначально выглядит, где также можете рисунок выставить как вам угодно, это сделать большим элемент или стандартным.

Демонстрация
2018-12-15 Загрузок: 2 Просмотров: 285 Комментарий: (0)

Поделиться в социальных сетях

Материал разместил

Комментарий: 0
avatar