ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимационный фон canvas для сайта в HTML5

Анимационный фон 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 страницы, как изначально выглядит, где также можете рисунок выставить как вам угодно, это сделать большим элемент или стандартным.

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

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

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

Оставь свой отзыв

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