Визуализация нейронной сети
Анимированная SVG-картинка в виде мозга, визуализирующая нейронную сеть
Для анимации SVG используется небольшой JS-код
Простые решения по работе с сайтом и его элементами
Заголовок на прозрачном фоне, перекрывающий блок с рамкой на CSS
Текст на однородном фоне, выделенный контуром и тенью
Анимированная кнопка с мессенджером, зафиксированная внизу страницы
Решение на JavaScript для сохранения любой текстовой информации на сайте в .txt файл для скачивания
Круговая диаграмма на JS
Пример создания круговой диаграммы с помощью Google Chart
В данной теме нет описания всех возможностей Google Pie Chart, а приведен пример быстрого создания круговой диаграммы с основными настройками.
Анимация SVG-графики при прокрутке страницы
Анимационные эффекты появления элементов SVG-графики при прокрутке страницы
В данной теме представлено несколько вариантов анимации логотипов и иконок в SVG с помощью jQuery плагина ScrollMe
3D волна на фотографии
3D эффект волны на изображении при движении по нему курсора мыши
Данный эффект реализован на чистом CSS и рассчитан на 13 частей, в каждой из которой показывается определенная часть одного изображения.
Мыльные пузыри для секции
Появляющиеся от движения курсора мыльные пузыри
Реализующий пузыри скрипт компактен и не требует дополнительных библиотек.
Пончиковая диаграмма на CSS
Построение пончиковой диаграммы на чистом CSS и с использованием всего одного элемента
Данная диаграмма строится всего на одном элементе с указанием значений через CSS переменные, а именно:
- процентное значение
- диаметр
- толщина границы
- основной цвет и цвет фона
Блокировка вредоносных ботов
Список для блокировки IP-адресов вредоносных ботов через .htaccess
В данной заметке представлен список IP-адресов ботов, накручивающих поведенческие факторы, таких как Biterika Grupp, Moshonkin Ilia Sergeevich, Martynova Irina Nikolaevna, Alliance LLC, а также хостингов, с которых боты могут идти: Hetzner, Amazon и прочее.
Падающий снег на CSS
Падающий снег для шапки, секций или фотографий
Простой способ наложения падающих снежинок на секции или фотографии всего одним элементом <div class="snowblock"></div>
Таймер бездействия посетителя на странице
Запуск через определенное время событий при бездействии пользователя
Иногда бывает необходимо определить отсутствие каких-либо действий со стороны посетителя в течении заданного времени и выполнить свои, например:
- показ информационных сообщений или баннеров
- остановка работающих скриптов или анимаций
- сброс авторизации или другой редирект
- смена рекламных или других блоков
О блоге:
Данный блог посвящен разнообразной работе с сайтом и по большей своей части является моей записной книжкой, в которой я пишу о том, что использую, использовал или хотел бы использовать. В основном это про украшение контента и страниц, чем собственно, и люблю заниматься. Именно поэтому в эту книжку попадают только проверенные решения, которые я разобрал, проверил и решил применять в той или иной степени.
Все стили и скрипты, что я выкладываю тут, я стараюсь внедрить на страницу статьи, убедившись, что это решение работает, не только отдельно, но и уже на сделанном сайте. Очень часто бывает так, что на отдельной странице все хорошо и красиво, а на сайте происходят сплошные конфликты, например из-за bootstrap, стилей сайта или используемой информации. И вот тут становятся заметны все ошибки, решив которые заметка попадает на этот блог.