К основному контенту

1 мин

Курсор

Light

5

Этот скрипт позволит тебе сделать эффект распадающегося на точки следа от курсора на всей странице или на отдельных блоках.

Как сделать Particles курсор для всей страницы на Tilda?

(cвернуть)
Инструкция

1. Убери фон у блоков, где должен быть виден Particles курсор

2. Задай количество частиц в хвосте

3. Укажи цвета частиц в хвосте

4. Укажи цвет ответвлений в хвосте

5. Задай размер хвоста

6. Задай силу изгиба хвоста

7. Укажи размер частиц в хвосте

7. Укажи размер частиц в хвосте

- Не ставь чрезмерно большое значение количества частиц в хвосте, т.к. в некоторых случаях это может нагрузить видеокарту и быстродействие модификации может быть снижено

Важно!

undefined
Отчистить поля
Загрузить сохраненные значения
undefined
Скопировать код
<!--Библиотека VORON--><!--Курсор https://voron-dev.ru/particles_cursor--> <script type="module"> import { particlesCursor } from 'https://cdn.jsdelivr.net/npm/threejs-toys@0.0.8/+esm'
const pc = particlesCursor({
  el: document.getElementsByTagName('body')[0],
  gpgpuSize: 512, // Общее количество частиц в хвосте !Внимание! Большое число частиц к отрисовке влияет на производительность!
  colors: ['#00ff00', '#0000ff', '#0000ff'], // цвета в хвосте курсора
  color: '#FF10CA', // Цвет ответвлений хвоста курсора
  coordScale: 1.5, // Масштаб хвоста
  noiseIntensity: 0.0006, // Интенсивность изгибания хвоста
  noiseTimeCoef: 0.0001, // Коэфициент времени на изгибание хвоста
  pointSize: 1.5, // Размер частиц в хвосте
  pointDecay: 0.0025,
  sleepRadiusX: 250,
  sleepRadiusY: 250,
  sleepTimeCoefX: 0.001,
  sleepTimeCoefY: 0.002
})
const resizeObserver = new ResizeObserver(entries => 
  document.querySelector('canvas').style.height = document.body.scrollHeight + 'px'
)
resizeObserver.observe(document.body)
</script> <style> canvas[data-engine="three.js r140"] {
        position: absolute;
        z-index: -1;
        top: 0px;
        left: 0px;
    } </style>
123
Наведи курсор на этот блок, чтобы увидеть эффект неонового следа.
Кликни, чтобы сгенерировать курор по случайным значениям
Примеры работы модификации