Символьный след курсора

Модификация позволяет добавить эффект жидкой бумаги для изображений, с возможностью настроить цвет, интенсивность и другие параметры
Инструкция по настройке
Шаблон страницы
Как добавить шаблон
139357016
Для корректной работы модификаций подключите библиотеку jQuery:
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
jQuery
Создаем Zero Block и открываем редактор
  1. Добавляем html-элемент
  2. Задаем ему позиционирование CONTAINER: WINDOW (X: LEFT, Y: TOP)
  3. Задаем размеры ширины и высоты по 100%
  4. Копируем в него код
1 шаг
Скопировать код
2 шаг
Ориентируясь по комментариям в коде, вы можете изменить:

  1. mode: Значение 'symbols' или 'images'.Переключает режим отображения: текст или фотографии. Фотографиям задаем класс .symbol-image
  2. characters: Набор используемых символов. (Строка, из которой выбираются знаки для формирования следа курсора)
  3. size: Размер ячеек сетки в пикселях. (Определяет масштаб шага сетки, по которой перемещается курсор)
  4. color: Цвет символов. (Устанавливает основной цвет текста для эффекта шлейфа)
  5. backgroundColor: Цвет фона активных ячеек. (Цвет подложки, появляющейся под символами при взаимодействии)
  6. enableFade: Режим затухания символов. (Определяет, будут ли символы плавно исчезать или оставаться статичными)
  7. spread: Радиус распространения курсора. (Влияет на размер «кисти» при рисовании следа)
  8. persistence: Длительность сохранения следа. (Определяет время жизни символов до их исчезновения)
  9. opacity: Общая непрозрачность эффекта. (Регулирует видимость всего слоя с курсором от 0 до 1)
  10. enableBloom: Включение эффекта свечения. (Добавляет мягкое сияние вокруг символов)
  11. bloomStrength: Интенсивность свечения. (Насколько ярким будет эффект Bloom)
  12. bloomRadius: Радиус свечения. (Определяет область распространения мягкого света вокруг элементов)
  13. enableChromaticAberration: Включение хроматической аберрации. (Добавляет эффект цветового расслоения по краям)
  14. chromaticAberrationOffset: Смещение эффекта аберрации. (Дистанция цветового сдвига для создания визуального искажения)
  15. imageResolution: Размер (в пикселях) одной плитки изображения. По умолчанию 256.
Настраиваем параметры в коде
3 шаг
Добавляем блок T123 и копируем в него код
Скопировать код
<!--TS52 - Модификация для Тильды. Символьный след курсора https://mod.tistols.com/symbol-cursor -->
<!-- mode: Значение 'symbols' или 'images'.Переключает режим отображения: текст или фотографии. Фотографиям задаем класс .symbol-image
characters: Набор используемых символов. (Строка, из которой выбираются знаки для формирования следа курсора)
size: Размер ячеек сетки в пикселях. (Определяет масштаб шага сетки, по которой перемещается курсор)
color: Цвет символов. (Устанавливает основной цвет текста для эффекта шлейфа)
backgroundColor: Цвет фона активных ячеек. (Цвет подложки, появляющейся под символами при взаимодействии)
enableFade: Режим затухания символов. (Определяет, будут ли символы плавно исчезать или оставаться статичными)
spread: Радиус распространения курсора. (Влияет на размер «кисти» при рисовании следа)
persistence: Длительность сохранения следа. (Определяет время жизни символов до их исчезновения)
opacity: Общая непрозрачность эффекта. (Регулирует видимость всего слоя с курсором от 0 до 1)
enableBloom: Включение эффекта свечения. (Добавляет мягкое сияние вокруг символов)
bloomStrength: Интенсивность свечения. (Насколько ярким будет эффект Bloom)
bloomRadius: Радиус свечения. (Определяет область распространения мягкого света вокруг элементов)
enableChromaticAberration: Включение хроматической аберрации. (Добавляет эффект цветового расслоения по краям)
chromaticAberrationOffset: Смещение эффекта аберрации. (Дистанция цветового сдвига для создания визуального искажения)
imageResolution: Размер (в пикселях) одной плитки изображения. По умолчанию 256. -->
<div
  class="symbol-cursor-wrapper"
  data-mode="images"
  data-characters="✶✤↣⌧✷$☺☉ϟ▵🝏*.;."
  data-size="20"
  data-color="#E9FF70"
  data-background-color="#292929"
  data-enable-fade="false"
  data-spread="10"
  data-persistence="1"
  data-opacity="1"
  data-enable-bloom="false"
  data-bloom-strength="1"
  data-bloom-radius="0.2"
  data-enable-chromatic-aberration="false"
  data-chromatic-aberration-offset="0.005"
></div>
<!--TS52 - Модификация для Тильды. Символьный след курсора https://mod.tistols.com/symbol-cursor -->
<script type="module" crossorigin src="https://tilda.tistols.com/mods/symbol-cursor/symbol-cursor-0iutgnh5kz.js"></script>
<link rel="stylesheet" href="https://tilda.tistols.com/mods/symbol-cursor/symbol-cursor-0iutgnh5kz.css">
Вам также может быть интересно:
дня
час
минут
секунд
-
-
-
-
+ Месяц тарифа Club за 2000₽
Предложение актуально только для пользователей Pro