Анимационный фон canvas для сайта в HTML5
 | |
| Прекрасный фон в анимированной версий, где представлены разные по форме частицы с плавным переливанием, которые подойдет на страницы сайта. Если брать саму анимацию, то основном она привязана в заданному элементу, где может идти передвижение или перемещение с последствием исчезновением, включая разных фигур, как в нашем случай или слов с рисунками. Здесь явно выражен праздничный фон, что если на основную страницу для кого то ярким станет, но на отдельную весьма вероятность ее увидеть. Здесь не будет изображений, а значит ссылок, все создано на css, плюс JS файл. Безусловно можно утверждать, что это необычно анимационный фон, который предназначен для интернета сайта. Если так выглядит по умолчанию:  То добавление в CSS прозрачно синего или другого оттенка "background: rgba(22, 22, 128, 0.6);" то видим изменение фона, но функционал остается аналогичным. Так, что веб разработчик выставит под свой основной стиль дизайна.  Приступаем к установке: Первым делом размещаем стили в 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 страницы, как изначально выглядит, где также можете рисунок выставить как вам угодно, это сделать большим элемент или стандартным. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |