Change Cursor

Плагин для замены курсора на кастомный

Разработка студии OWL Agency.
Для вопросов и предложений: [email protected]

Инициализация плагина

<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 картинками – края бьются и их лучше задавать стилями