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

1 мин.

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

Курсор

Обновление от 31.12.23 - В слайдер были добавлены новые поля, а также recid теперь нужно писать без приставки "#rec", поэтому если вдруг что-то не работает, то см. видео, а также текстовую инструкцию ниже↓

three.js

!

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

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

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

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

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

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

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

7. Скопируй код и вставь в блок т123

Инструкция

Важно!

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

(Развернуть)

Скопировать код

<!--Библиотека 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>

Пример работы модификации

Наведи курсор на этот блок, чтобы увидеть эффект неонового следа.
Кликни, чтобы сгенерировать курор по случайным значениям