Как сделать такой след за движением мыши?
Всем привет)
На этом сайте https://web-creator.ru/services/process_automation крутая анимация движения курсора, вижу, что там используется внутри canvas, который отслеживает и рисует данное поведние.
Но как такое повторить у себя? Дайте плиз примеры куда смотреть
Дополнительно:
Ответы:
snippet
Нужно только конфиг немного подкрутить. CURL: 2 и еще что-то на свой вкус, в идеале поискать конфиг на их сайте
- Красивый эффект. 3080 на 50% грузит.)
Причём неважно, водишь ты мышкой или нет. - WbICHA, не знаю/не понимаю в чём проблема, но у меня на встроенном видео ядре нагрузок нет, ну может 15% - 25% максимум.
- Евгений Залецкий, хм, странно, но да, на ноуте с графикой рязани нагрузка всего 12%.
- Евгений Залецкий, хотя нет, там всё сложнее. Тут, в айфрейме, действительно нагрузка минимальна, однако если открыть в кодепене, то нагрузка уже 50% (на 3080 в обоих случаях 50% была). Но, что ещё интереснее, эффект явно попроще, чем был на 3080. Мне он даже больше нравится, но поведение явно более примитивное.
Надо будет ещё раз сравнить и на одном мониторе. - WbICHA, вот как раз на ряженке и смотрел))
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания следа за движением мыши на веб-странице можно использовать JavaScript и CSS. Ниже приведен пример кода, который позволит вам реализовать данную функциональность:
1. HTML:
```html
```
2. CSS (styles.css):
```css
#trail {
position: absolute;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
pointer-events: none;
}
```
3. JavaScript (script.js):
```javascript
document.addEventListener('mousemove', function(e) {
var trail = document.getElementById('trail');
var posX = e.clientX - 5;
var posY = e.clientY - 5;
trail.style.left = posX + 'px';
trail.style.top = posY + 'px';
});
```
Этот код создает красный круг, который следует за движением мыши на странице. Вы можете настроить размер, цвет и форму следа, изменив соответствующие параметры в CSS. Надеюсь, это поможет вам создать эффект, который вам нужен.