Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Кастомный курсор для определенных расширений экрана (https://javascript.ru/forum/misc/85868-kastomnyjj-kursor-dlya-opredelennykh-rasshirenijj-ehkrana.html)

MorenO410 25.04.2024 17:23

Кастомный курсор для определенных расширений экрана
 
Доброго времени. Нашел код на Js для кастомного курсора.
Можно его помочь доработать чтобы он отображался только на определнных расширениях экрана. А именно на PC и планшетов. На мобильных он не нужен.

//TODO Castle cursor
var cursor = document.querySelector('.cursor-big');
var cursorinner = document.querySelector('.cursor-small');
var a = document.querySelectorAll('a');
 
document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursor.style.transform = `translate3d(calc(${e.clientX}px - 50%), calc(${e.clientY}px - 50%), 0)`
});
 
document.addEventListener('mousemove', function(e){
  var x = e.clientX;
  var y = e.clientY;
  cursorinner.style.left = x + 'px';
  cursorinner.style.top = y + 'px';
});
 
document.addEventListener('mousedown', function(){
  cursor.classList.add('click');
  cursorinner.classList.add('cursorinnerhover')
});
 
document.addEventListener('mouseup', function(){
  cursor.classList.remove('click')
  cursorinner.classList.remove('cursorinnerhover')
});
 
a.forEach(item => {
  item.addEventListener('mouseover', () => {
    cursor.classList.add('hover');
  });
  item.addEventListener('mouseleave', () => {
    cursor.classList.remove('hover');
  });

рони 25.04.2024 18:19

MorenO410,
https://developer.mozilla.org/ru/doc...dow/matchMedia


Часовой пояс GMT +3, время: 18:02.