Change Cursor
Плагин для замены курсора на кастомный
Разработка студии OWL Agency.
Для вопросов и предложений: e.ipatov@owlagency.ru
Инициализация плагина
<script src="https://unpkg.com/@owlagency/cursorchange/dist/index.min.js"></script>
npm i @owlagency/cursorchange
import Cursor from "cursors";
var cursor = new Cursor({
currentClass: '.owl',
allowsBackground: ['left', 'right', 'lb'],
hoveredCursor: true,
kitCursors: {
'owl': ['lb', 'right'],
'svg': ['left']
},
fade: false
});
cursor.init();
<img src="example/img/owl_logo.svg" class="owl" alt="owl" style="position: absolute" />
<div class="svg" style="position: absolute">
<svg
xmlns="http://www.w3.org/2000/svg"
width="28"
height="28"
viewBox="0 0 28 28"
fill="none">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.92943 19.5322C3.47274 16.0755 3.47274 10.4711 6.92943 7.0144C10.3861 3.5577 15.9905 3.5577 19.4472 7.0144C22.6068 10.174 22.8784 15.128 20.2619 18.5961L23.7543 22.0885L22.3877 23.455L18.9371 20.0044C15.4594 22.981 10.2208 22.8236 6.92943 19.5322ZM18.0807 8.38097C15.3787 5.67901 10.998 5.67901 8.29601 8.38097C5.59405 11.0829 5.59405 15.4637 8.29601 18.1656C10.998 20.8676 15.3787 20.8676 18.0807 18.1656C20.7826 15.4637 20.7826 11.0829 18.0807 8.38097Z"
fill="#C4C4C4" />
</svg>
</div>
<div class="lb" style="width: 40%; height: 300px; background-color: royalblue"></div>
<div class="right" style="width: 40%; height: 300px; background-color: brown"></div>
params
currentClass(string) - селектор для установки курсора
allowsBackground(array) - классы, над которыми допустима смена курсора
hoveredCursor(boolean) - false - перманентый курсор; по умолчанию true
fade(boolean) - появляение курсора с fade, тянется из cdn
kitCursors(object) - наборы курсоров 'svg' : ['left', 'right']
methods
init() - инициализация плагина
update(selector) - принудительно обновить текущий курсор (не сработает для набора курсоров)
remove() - удалить все курсоры
info
Для работы курсора, заменяемые элементы должны иметь absolute/fixed позиционирование
Существует проблема с круглыми svg картинками – края бьются и их лучше задавать стилями