10 февр. 2024

Как сделать движение частиц за курсором на css

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

Демо тут

Стили в <body>

Можно разместить как на отдельной странице, так и по всему сайту

    <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: 0.7, // Размер частиц в хвосте
  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>

Как сделать движение частиц за курсором на css

Демо тут

Стили в <body>

Оставь свой комментарий первым