Создание интерактивного курсора

Код для сайта

Как добавить динамический курсор с кружком и интерактивным текстом при наведении на элементы

В современном веб-дизайне важно не только создавать функциональные, но и визуально привлекательные интерфейсы.
Один из способов сделать сайт более интерактивным и запоминающимся — добавить кастомный курсор с анимацией.

В этой статье мы разберем, как создать динамический курсор с кружком, который следует за указателем мыши, и как добавить эффект наведения на элементы с текстом «Смотреть». Вы узнаете, как использовать HTML, CSS и JavaScript для реализации этой идеи, а также как настроить анимацию и скрытие стандартного курсора.

Этот прием отлично подойдет для портфолио, лендингов и других проектов, где важно удивить пользователя и добавить уникальности интерфейсу.

Для создания эффекта курсора мыши со шлейфом цветных шариков на сайте можно использовать HTML, CSS и JavaScript.

Вот пример кода:

Окно с кодом и попап-просмотром 

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Курсор с кружком</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      overflow: hidden;
      background-color: #ffffff; /* Белый фон */
    }

    /* Кружок под курсором */
    .cursor-circle {
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: rgba(255, 111, 97, 0.7); /* Полупрозрачный цвет, как у кружка "Смотреть" */
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 1000;
    }

    /* Кастомный курсор */
    .custom-cursor {
      position: absolute;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: rgba(255, 111, 97, 0.7); /* Полупрозрачный цвет */
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-family: Arial, sans-serif;
      text-align: center;
      pointer-events: none;
      transform: translate(-50%, -50%);
      z-index: 1000;
      opacity: 0; /* Начальная прозрачность */
      transition: opacity 0.3s ease; /* Плавное появление */
    }

    /* Картинка для примера */
    .shleiyf {
      width: 200px;
      height: 200px;
      margin: 50px;
      border: 2px solid #ccc;
      object-fit: cover;
    }
  </style>
</head>
<body>
  <!-- Пример картинки с классом shleiyf -->
  <img src="https://via.placeholder.com/200" alt="Пример картинки" class="shleiyf">

  <script>
    let mouseX = 0, mouseY = 0;

    // Создаем кружок под курсором
    const cursorCircle = document.createElement('div');
    cursorCircle.className = 'cursor-circle';
    document.body.appendChild(cursorCircle);

    // Создаем кастомный курсор
    const customCursor = document.createElement('div');
    customCursor.className = 'custom-cursor';
    customCursor.textContent = 'Смотреть';
    document.body.appendChild(customCursor);

    // Обновляем позицию курсора
    document.addEventListener('mousemove', (e) => {
      mouseX = e.pageX;
      mouseY = e.pageY;
      cursorCircle.style.left = `${mouseX}px`;
      cursorCircle.style.top = `${mouseY}px`;
      customCursor.style.left = `${mouseX}px`;
      customCursor.style.top = `${mouseY}px`;
    });

    // Показываем кастомный курсор при наведении на картинку с классом shleiyf
    const shleiyfImage = document.querySelector('.shleiyf');
    shleiyfImage.addEventListener('mouseenter', () => {
      customCursor.style.opacity = '1'; /* Кружок "Смотреть" полностью видим */
      cursorCircle.style.opacity = '0'; /* Скрываем кружок под курсором */
      document.body.style.cursor = 'none'; /* Скрываем стандартный курсор */
    });
    shleiyfImage.addEventListener('mouseleave', () => {
      customCursor.style.opacity = '0'; /* Плавное исчезновение кружка "Смотреть" */
      cursorCircle.style.opacity = '1'; /* Показываем кружок под курсором */
      document.body.style.cursor = 'default'; /* Возвращаем стандартный курсор */
    });
  </script>
</body>
</html>

Давайте рассмотрим некоторые детали кода

  1. Полупрозрачный кружок «Смотреть»:

    • Добавлен полупрозрачный цвет для кружка с помощью rgba(255, 111, 97, 0.7).

  2. Плавное появление кружка:

    • Добавлено свойство transition: opacity 0.3s ease; для плавного появления и исчезновения кружка.

    • При наведении на картинку кружок плавно появляется (opacity: 1), а при уходе курсора — плавно исчезает (opacity: 0).

  3. Возврат стандартного курсора:

    • Убрано cursor: none; из body, чтобы стандартный курсор (стрелочка) отображался вместе с кастомным курсором.

  4. Пример картинки:

    • Добавлена картинка с классом shleiyf (используется placeholder-изображение).

Как это работает:

  • Кружок под курсором всегда следует за курсором.

  • При наведении на картинку:

    • Кружок «Смотреть» появляется, а кружок под курсором и стандартный курсор скрываются.

  • При уходе курсора с картинки:

    • Кружок «Смотреть» исчезает, а кружок под курсором и стандартный курсор возвращаются.

Как использовать:

  1. Скопируйте код в файл с расширением .html.

  2. Откройте файл в браузере.

  3. Двигайте курсором, и вы увидите кружок под курсором.

  4. Наведите курсор на картинку, и вы увидите, как кружок «Смотреть» появляется, а кружок под курсором и стандартный курсор пропадают.

Дополнительные настройки:

  • Чтобы изменить размер кружка под курсором, измените значения width и height в CSS для .cursor-circle.

  • Чтобы изменить цвет кружка, отредактируйте background-color в CSS для .cursor-circle и .custom-cursor.

Теперь у вас есть кружок под курсором, который скрывается при наведении на картинку, а вместо него появляется кружок «Смотреть»! 🎉

Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *