След за курсором из частиц на HTML5 Canvas
Очень крутой след за курсором! Клик по любому месту на экране меняет стиль следа в случайном порядке
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#app { margin: 0; width: 100%; height: 100%; } #app { overflow: hidden; touch-action: pan-up; color: #ffffff; font-family: 'Montserrat', sans-serif; text-align: center; text-shadow: 0 0 5px #ffffff, 0 0 20px #000, 0 0 30px #000; } #app canvas { display: block; position: fixed; z-index: -1; top: 0; } |
2#: Следующий код поместите после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="app"></div> <script type="module"> import { particlesCursor } from '/js/threejs-toys.module.cdn.min.js' const pc = particlesCursor({ el: document.getElementById('app'), gpgpuSize: 512, colors: [0x00ff00, 0x0000ff], color: 0xff0000, coordScale: 0.5, noiseIntensity: 0.001, noiseTimeCoef: 0.0001, pointSize: 5, pointDecay: 0.0025, sleepRadiusX: 250, sleepRadiusY: 250, sleepTimeCoefX: 0.001, sleepTimeCoefY: 0.002 }) document.body.addEventListener('click', () => { pc.uniforms.uColor.value.set(Math.random() * 0xffffff) pc.uniforms.uCoordScale.value = 0.001 + Math.random() * 2 pc.uniforms.uNoiseIntensity.value = 0.0001 + Math.random() * 0.001 pc.uniforms.uPointSize.value = 1 + Math.random() * 10 }) </script> |
Осталось лишь залить JS файл из прикреплённого архива в папку js
