Как сделать анимацию/движение элемента за курсором?
Накидал пример, что у меня получилось на данный момент: https://codepen.io/a22432/pen/vYbEzEE
Как сделать, чтобы элемент (в примере .block) смещался по оси X и не выходил за пределы родительского элемента (в примере .conteiner)?
Или может где-то есть пример, где посмотреть можно.
Исправил: https://codepen.io/a22432/pen/NWoPZMN
Дополнительно:
В икс записывать просто значение ограниченное позицией края контейнера и размером блока
Codepen
let block = document.querySelector('.block'); let conteiner = document.querySelector('.conteiner'); let movecircle = function (e) { let { clientX } = e; let x = Math.round((clientX / window.innerWidth) * 100); let smechenie = block.scrollWidth * (x / 100); block.style.setProperty('--x', `${x}%`); }; ['mousemove','pointermove'].forEach( e => window.addEventListener(e, movecircle, false) ); |
let block = document.querySelector('.block'); let conteiner = document.querySelector('.conteiner'); let movecircle = function (e) { let { clientX } = e; let x = Math.round((clientX / window.innerWidth) * 100); let smechenie = block.scrollWidth * (x / 100); block.style.setProperty('--x', `${x}%`); }; ['mousemove','pointermove'].forEach( e => window.addEventListener(e, movecircle, false) );
- Спасибо Sergey!!!
Изучу Ваш код!
Пока я сделал так, тоже работает)
https://codepen.io/a22432/pen/NWoPZMN
Ответы:
Слушайте mousemove на container, а не на window
- Спасибо за вариант. Немного не то, мне надо отслеживать событие mousemove на всей странице, а не в блоке container
- Антон, тогда по mouseout из контейнера останавливайте движение
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания анимации или движения элемента за курсором на веб-странице, можно использовать JavaScript с событием мыши и CSS для стилизации элемента.
Вот пример кода на JavaScript и CSS, который позволит элементу следовать за курсором пользователя:
1. HTML:
```html
```
2. CSS:
```html
.cursor {
position: fixed;
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%;
pointer-events: none; /* Чтобы курсор не мешал взаимодействию с другими элементами */
z-index: 9999; /* Устанавливаем поверх всех элементов */
}
```
3. JavaScript:
```html
document.addEventListener('mousemove', (e) => {
const cursor = document.querySelector('.cursor');
cursor.style.top = e.pageY + 'px';
cursor.style.left = e.pageX + 'px';
});
```
Этот код создает круглый элемент, который будет следовать за курсором мыши пользователя по всей странице. Вы можете настраивать размер, цвет и форму элемента, а также добавить дополнительные анимации с помощью CSS.
Если вам нужно более сложное движение элемента за курсором, вы можете использовать более сложные алгоритмы и эффекты, такие как плавное перемещение, изменение размера или поворот элемента в зависимости от положения курсора.
Надеюсь, этот ответ поможет вам создать интересные и креативные анимации на вашем сайте!