Создание боковой панели, которая следует за курсором и взаимодействует с мышью

Question 1

Недавно я видел эту [боковую панель][1], которая следует за мышью и “тянется” к ней, когда она приближается, и я хотел бы узнать, есть ли у кого-то советы по ее реализации? Я видел этот [пост][2] с ответом на создание меню, которое следует за мышью, но не знаю, что делать дальше. Мне очень нравится, как в примере меню как бы “раскачивается” к мыши и появляется из прямоугольной боковой панели.

[1]: https://codemyui.com/gooey-sidebar-stretch-menu-concept/

[2]: Кнопка скрытия/показа боковой панели, которая следует за курсором мыши?

<div class="A"></div>

.A {
    top:0px;
    position:absolute;
    width:50px;
    height:50px;
    border-radius: 50;
    border:1px solid blue;
}

var posY;

$(document).mousemove( function(e) { 
   posY = e.pageY;
    $('.A').css({'top': posY});
});

Question 2

Давайте поработаем с SVG, который я создал, используя этот сайт. В принципе, вам нужно узнать о кривой Кубического Безье, потому что я просто случайно продемонстрировал, как изменять некоторые значения в SVG.

Вот быстрое объяснение атрибута d в <path>:

M = перемещение в x, y
L = линия к x, y
C = кубическая безье к x, y с контрольными точками в x1, y1 и x2, y2
Z = вернуться к началу

const svg = document.getElementById('wavySvg');
const path = document.getElementById('wavyPath');

function updatePath(mouseX, mouseY) {
  const height = 320;
  const width = 1440;

  const d = `
      M 0,592
      C ${240 - mouseY},139,180,${125 - mouseX / width * 100 },720,${80 + mouseY / height * 100}
      C ${600 + mouseX / 2},475,1200,117,${1320 + mouseX / width * 100},138.7
      L 1440, ${mouseY}
      L 1440,720
      L 0,720
      Z
    Z
  `;

  path.setAttribute('d', d);
}

svg.addEventListener('mousemove', (e) => {
  const mouseX = e.offsetX
  const mouseY = e.offsetY
  updatePath(mouseX, mouseY);
});

updatePath(0, 0)

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
}

#wavyPath {
  transition: d 0.25s ease;
}

#wavySvg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<svg id="wavySvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 720">
  <path id="wavyPath" fill="#0099ff" d=""></path>
</svg> Наведите курсор мыши

</div>

Ответ или решение

Чтобы создать боковую панель (sidebar), которая будет следовать за курсором мыши и "тянуться" к нему, можно использовать HTML, CSS и JavaScript. Ниже представлен полный пример, который демонстрирует это:

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Гелевая боковая панель</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="sidebar" id="sidebar"></div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    margin: 0;
    height: 100vh;
    background-color: #f0f0f0;
}

.sidebar {
    position: fixed;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;  /* начальная ширина боковой панели */
    height: 200px; /* высота боковой панели */
    background-color: #007bff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease, height 0.3s ease; /* добавляем плавный переход */
}

JavaScript (script.js)

const sidebar = document.getElementById('sidebar');
let sidebarWidth = 50; // начальная ширина боковой панели

document.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX; // координаты курсора по X
    const sidebarLeft = sidebar.getBoundingClientRect().left; // координаты боковой панели

    // Проверка, находится ли курсор мыши рядом с боковой панелью
    if (mouseX < sidebarLeft + 100 && mouseX > sidebarLeft) {
        // Увеличение ширины боковой панели к курсору мыши
        sidebarWidth = Math.min(200, sidebarWidth + (100 - (sidebarLeft - mouseX)));
        sidebar.style.width = sidebarWidth + 'px';
    } else {
        // Сброс ширины боковой панели до начальной
        sidebarWidth = 50;
        sidebar.style.width = sidebarWidth + 'px';
    }
});

Объяснение кода

HTML – содержит простую разметку с элементом боковой панели.
CSS – определяет стиль боковой панели, включая её начальный размер, цвет и плавный переход для изменений размера.
JavaScript – отслеживает движение мыши. Когда курсор находится рядом с боковой панелью, ее ширина увеличивается до максимума в 200 пикселей. Когда курсор уходит, панель возвращается к первоначальным размерам.

Дополнительные советы

Для улучшения пользовательского опыта можно добавить анимацию при открытии и закрытии боковой панели с использованием CSS transitions или анимации.
Чтобы сделать интерфейс более привлекательным, можно добавить дополнительные стили, такие как иконки или текст внутри боковой панели.
Экспериментируйте с cubic-bezier для изменения скорости анимации по своему вкусу.

Эта реализация позволит вам создать интерактивную боковую панель, которая будет следовать за курсором и красиво "расти" при приближении к ней.