category: prog, direction: js, group: demo

Слайдер и сердечки

Категория: Программирование. Направление: JS. Группа: Demo.
Добавлено: 24-02-2025

Демонстрационный пример интересного функционала.

В помощь обычному слайдеру страницы.
Позволяет не прицеливаться в него
и не жать постоянно мышью при перетаскивании.

Когда тянешь вот это,
розово-сиреневое окошко,
Слайдер страницы, пропорционально, повторяет его позицию.

Основная задача, которую он выполняет,
это прокрутка страницы.
Польза: не нужно прицеливаться в прокрутку страницы
и постоянно её держать, при перетягивании.

Полезен на страницах с длинным содержимым.
Не нужно концентрироваться на прокрутке, усиленно целиться в неё,
постоянно держать нажатой.

Тыкнул в блок
и двигаешь мышкой.
Страница прокручивается,
следом за движением курсора.

Логика отслеживания нажатия по блоку: переключатель.
То есть одно нажатие - курсор отслеживается.
Второе нажатие — курсор не отслеживается.
Вполне удобно.

Однажды выбесило,
постоянно целиться в модные прокрутки,
которые в 2-5 пикселей в ширину.
Вот и сделал, такую штуку.
Оказалось удобно.
Теперь вставляю, её почти на всех сайтах.

Потом добавил вызов, по пункту в контекстном меню.

Потом добавил режим запоминания,
другим пунктом, в контекстном меню:
Если на странице, блок вызывался,
то при новом открытии, он сразу появится.
Повторный выбор этого же пункта, отменяет это поведение.

Потом добавил индикатор, что слайдер активен.

Потом добавил функционал переключения состояния, нажатием на блок.
Раньше, что бы блок был активен но не держать кнопку мыши нажатой,
нужно было нажатый курсор увести из блока.
Сразу так не задумывалось, но оказалось удобным.

Теперь вот докатился до того,
что прицепил эти сердечки,
по аналогии с лайками в стримингах.

Сначала просто добавил, простой функционал добавления иконок.
Потом расширил его:

• вывел за пределы блока,
• добавил анимацию цветовой палитры,
• добавил анимацию взлёта и исчезания,
• добавил разброс стартовой позиции по горизонтали,
• добавил угол наклона иконки, в зависимости от горизонтальной позиции,
• добавил случайное изменение размера, по ширине и высоте.

Теперь вот в планах, сделать из этого игру-кликер.

Ещё есть в планах, обернуть этот слайдер, в отдельное расширение, для хрома, и выложить его в магазине расширений у гугла. Может кому то пригодится.

Возможности контекстного меню,
можно вызывать,
только из расширения.
В обычном скрипте, это не работает.

Чем дальше, тем веселее.