Particles
Взято с https://voron-dev.ru/particles_cursor
автор Voron-Dev
Этот скрипт позволит тебе сделать эффект распадающегося на точки следа от курсора на всей странице или на отдельных блоках
Инструкция
1. Убери фон у блоков, где должен быть виден Particles курсор
2. Задай количество частиц в хвосте
3. Укажи цвета частиц в хвосте
4. Укажи цвет ответвлений в хвосте
5. Задай размер хвоста
6. Задай силу изгиба хвоста
7. Укажи размер частиц в хвосте7. Укажи размер частиц в хвосте.
Код:
<!--Библиотека 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>Демонстрация на сайте
