Решил слегка поправить шаблоны блога, выровнять отступы, сгладить контраст цветов, заодно расстался с угрюмой фоновой сеткой.
Хотелось добавить какой то динамики, чтобы что то происходило, двигалось, вращалось и т.п. На заре сайтостроительства вебмастера пытались перещеголять друг друга, используя анимированные gif-ки. Одни и те же картинки приходилось встречать на разных сайтах, выглядело это аляповато, демонстрировало отсутствие вкуса, стимулируя закрыть побыстрее сайт.
Particles.js
GITHUB: https://github.com/VincentGarreau/particles.js
Скриптованная анимация с использованием canvas — это довольно свежий взгляд на старую задачу о том как бы добавить движухи в статическую верстку сайта. Я уж думал что то придумать сам, но нашел это готовое решение.
Плюсы:
- легкий скрипт, конкурирует даже с самыми простыми фоновыми картинками по размеру,
- всегда разная, живая картинка,
- возможность проявить творчество и задать свои неповторимые настройки (характер, скорость движения, прорисовку связей и т.п.)
Я подключил скрипт к фоновому слою, а-ля «звездное небо, проплывающее за лентой сайта».
Для этого слоя понадобятся стили вроде:
|
1 2 3 4 5 6 7 8 |
#particles-js { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } |
На демо-сайте вы найдете несколько готовых конфигураций, демонстрирующих применение скрипта.
P.S.
Как оказалось, скрипт может сильно снижать скорость работы браузера на некоторых машинах. По всей видимости, страдают 1-2 ядерный системы. По просьбам трудящихся пришлось отключить красоту. :)