/ Дизайн / Курсор в виде картинки

Курсор в виде картинки

04.04.2024

637

Сделаем курсор в виде картинки. В первую очередь нужно понимать что изображение для курсора не может быть более 128х128px, желательно 32х32 т.к. если больше то работать оно не будет.

Свойство для body или для тега где должен быть использован курсор:

cursor: url('/wp-content/uploads/2024/04/paw.svg') 16 16, auto;

Второй параметр указывает где будет центр курсора, для изображения 32х32, вышеуказанный параметр будет посередине.

Если в качестве изображения используется файл svg, то в его свойствах должны быть указаны width=»32″ height=»32″.

Интересный курсор с эффектом нажатия и наведения

К стандартному курсору добавляется круг, который перемещается вместе с ним. При наведении на ссылку круг исчезает. При наведении на специфические области (слайдер) круг превращается в стрелки.

Скрипт

// Курсор

jQuery(document).ready(function($){

	var t = document.createElement("div");
	t.className = "custom-cursor-main",
	document.body.appendChild(t);
	var e = document.createElement("div");
	e.className = "custom-cursor-secondary",
	document.body.appendChild(e);
	var n = document.createElement("div");
	n.className = "custom-cursor-slider",
	n.innerHTML = '\n        <svg width="14" height="14" aria-hidden="true" class="icon-cursor-arrow-left">\n            <use xlink:href="#cursor-arrow-left"></use>\n        </svg>\n        <span class="custom-cursor-slider__content">\n           \n        </span>\n        <svg width="14" height="14" aria-hidden="true" class="icon-cursor-plus">\n            <use xlink:href="#cursor-plus"></use>\n        </svg>\n        <svg width="14" height="14" aria-hidden="true" class="icon-cursor-arrow-right">\n            <use xlink:href="#cursor-arrow-right"></use>\n        </svg>\n    ',
	document.body.appendChild(n);

	var i = !1
	  , r = 0
	  , s = 0
	  , o = 0
	  , a = 0
	  , l = 0
	  , u = 0;
	document.addEventListener("mousemove", (function(e) {
		r = e.clientX || e.pageX,
		s = e.clientY || e.pageY - pageYOffset,
		t.style.left = r + "px",
		t.style.top = s + "px",
		i && (n.style.left = r + "px",
		n.style.top = s + "px")
	}
	)),
	function t() {
		requestAnimationFrame(t),
		o && a ? (l = .18 * (r - o),
		u = .18 * (s - a),
		Math.abs(l) + Math.abs(u) < .1 ? (o = r,
		a = s) : (o += l,
		a += u)) : (o = r,
		a = s),
		e.style.left = o + "px",
		e.style.top = a + "px"
	}(),
	document.addEventListener("mousedown", (function() {
		e.classList.add("expand"),
		t.classList.add("expand"),
		n.classList.add("expand")
	}
	)),
	document.addEventListener("mouseup", (function() {
		e.classList.remove("expand"),
		t.classList.remove("expand"),
		n.classList.remove("expand")
	}
	)),
	Array.from(document.querySelectorAll(".carousel .owl-item, .reviews-tabs .swiper-slide")).forEach((function(r) {
		r.addEventListener("mouseenter", (function() {
			n.classList.add("visible"),
			t.classList.add("hidden"),
			e.classList.add("hidden"),
			r.closest(".carousel .owl-item") && n.classList.add("plus"),
			i = !0
		}
		)),
		r.addEventListener("mouseleave", (function() {
			n.classList.remove("visible"),
			t.classList.remove("hidden"),
			e.classList.remove("hidden"),
			r.closest(".carousel .owl-item") && n.classList.remove("plus"),
			i = !1
		}
		))
	}
	));
	var c = document.querySelector(".js-black-cursor");
	c && document.addEventListener("mousemove", (function(t) {
		t.pageY <= c.offsetHeight ? e.classList.add("black-cursor") : e.classList.remove("black-cursor")
	}
	)),
	document.addEventListener("mouseover", (function(n) {
		(n.target.matches("a, button") || n.target.closest("button") || n.target.closest("a")) && (t.classList.add("interactive"),
		e.classList.add("interactive"))
	}
	)),
	document.addEventListener("mouseout", (function(n) {
		t.classList.remove("interactive"),
		e.classList.remove("interactive")
	}
	));


});
В коде есть ссылки на svg изображения (cursor-arrow-left, cursor-arrow-right, cursor-plus), они должны быть добавлены на сайт

Добавление иконок, в этом списке есть те которые нужны для курсора.

<div class="sprite" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="210" height="38">
		<symbol viewBox="0 0 10.56 10.33" id="arrow-down" xmlns="http://www.w3.org/2000/svg"><path d="M6 0v7.19a.24.24 0 00.15.22.23.23 0 00.27 0l3.11-3.14 1 1-4.83 4.89a.6.6 0 01-.84 0L0 5.3l1-1 3.1 3.09a.22.22 0 00.26 0 .25.25 0 00.16-.22V0z"></path></symbol>
		<symbol viewBox="0 0 5.56 9" id="arrow-left" xmlns="http://www.w3.org/2000/svg"><path d="M5.56 7.94L2.12 4.5l3.44-3.44L4.5 0 0 4.5 4.5 9z"></path></symbol>
		<symbol viewBox="0 0 19.03 19.45" id="arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M0 8.32l13.23.07a.41.41 0 00.4-.29.4.4 0 00-.09-.49L7.82 1.89 9.71 0l9 9a1.1 1.1 0 010 1.56l-8.9 8.9-1.91-1.92 5.67-5.67a.4.4 0 00.08-.49.44.44 0 00-.4-.29L0 11z"></path></symbol>
		<symbol viewBox="0 0 8.21 8.21" id="arrow-rounded" xmlns="http://www.w3.org/2000/svg"><path d="M1 0a.63.63 0 00-.62.41.64.64 0 00.1.7.66.66 0 00.45.18h5.14L.2 7.14A.63.63 0 00.17 8a.58.58 0 00.43.18.64.64 0 00.47-.18l5.87-5.86v5.13a.59.59 0 00.31.55.64.64 0 00.63 0 .66.66 0 00.31-.55V0z"></path></symbol>
		<symbol viewBox="0 0 14.64 14.26" id="arrow-up" xmlns="http://www.w3.org/2000/svg"><path d="M6.28 14.26V4.34A.34.34 0 006.09 4a.31.31 0 00-.37.07L1.43 8.41 0 7 6.75.25a.82.82 0 011.17 0l6.72 6.65-1.44 1.42-4.27-4.23A.3.3 0 008.56 4a.32.32 0 00-.22.3v9.91z"></path></symbol>
		<symbol viewBox="0 0 14.08 14.08" id="bold-plus" xmlns="http://www.w3.org/2000/svg"><path d="M6.16 0v6.16H0v1.76h6.16v6.16h1.76V7.92h6.16V6.16H7.92V0z"></path></symbol>
		<symbol viewBox="0 0 5.56 9" id="cursor-arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M0 7.94L3.44 4.5 0 1.06 1.06 0l4.5 4.5L1.06 9z"></path></symbol>
		<symbol viewBox="0 0 11.67 11.67" id="cursor-plus" xmlns="http://www.w3.org/2000/svg"><path d="M11.67 6.67h-5v5H5v-5H0V5h5V0h1.67v5h5z"></path></symbol>
		<symbol viewBox="0 0 10.22 9.95" id="download" xmlns="http://www.w3.org/2000/svg"><path d="M5.84 0v6.92a.25.25 0 00.15.21.24.24 0 00.26 0l3-3 1 1-4.74 4.65a.62.62 0 01-.85 0L0 5.12l1-1 3 3a.22.22 0 00.25 0 .22.22 0 00.14-.23v-6.9z"></path></symbol>
		<symbol viewBox="0 0 9 9" id="link" xmlns="http://www.w3.org/2000/svg"><path d="M0 7.83l5.72-5.72a.27.27 0 000-.3.27.27 0 00-.25-.17H.6V0h7.73A.67.67 0 019 .67V8.4H7.36V3.48a.27.27 0 00-.17-.25.27.27 0 00-.3 0L1.17 9z"></path></symbol>
		<symbol viewBox="0 0 42 18.64" id="long-arrow-left" xmlns="http://www.w3.org/2000/svg"><path d="M42 9.31a.86.86 0 00-.89-.83H3.26l7-7a.83.83 0 00.24-.65.86.86 0 00-.57-.77.89.89 0 00-.93.21L0 9.32l9 9.06a.9.9 0 00.84.24.87.87 0 00.64-.59.83.83 0 00-.22-.82l-7-7h37.85a.89.89 0 00.63-.25.83.83 0 00.26-.65z"></path></symbol>
		<symbol viewBox="0 0 114.9 51" id="long-arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M0 25.53a2.36 2.36 0 002.43 2.28H106L86.88 47.06a2.27 2.27 0 00-.7 1.67 2.36 2.36 0 001.54 2.12 2.43 2.43 0 002.6-.59l24.58-24.77L90.32.73A2.41 2.41 0 0088 .07a2.37 2.37 0 00-1.73 1.61 2.25 2.25 0 00.59 2.25L106 23.18H2.43a2.42 2.42 0 00-1.73.68 2.27 2.27 0 00-.7 1.67z"></path></symbol>
		<symbol viewBox="0 0 27.5 27.5" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M12.5 0v12.5H0V15h12.5v12.5H15V15h12.5v-2.5H15V0z"></path></symbol>
		<symbol viewBox="0 0 45 37" id="quotes" xmlns="http://www.w3.org/2000/svg"><path d="M45 37H26.23V23.11c0-6.64 1.61-11.91 4.8-15.67A23.11 23.11 0 0143.44.27L44.67 0v6.83l-.67.24c-4 1.39-6.83 3.79-8.28 7.14a10.41 10.41 0 00-1.06 5.47H45zm-16.77-2H43V21.69H32.85l-.18-1.81a12.44 12.44 0 011.22-6.49 14.81 14.81 0 018.78-8V2.55a20.52 20.52 0 00-10.12 6.19c-2.87 3.38-4.32 8.22-4.32 14.37zm-9.46 2H0V23.11c0-6.55 1.57-11.8 4.68-15.6C7.61 4 11.83 1.53 17.22.26L18.45 0v6.84l-.68.23c-4.09 1.42-6.9 3.78-8.35 7a11.85 11.85 0 00-1 5.59h10.35zM2 35h14.77V21.69H6.56l-.12-1.87a13.67 13.67 0 011.15-6.54c1.6-3.57 4.57-6.21 8.85-7.84V2.53A19.83 19.83 0 006.22 8.78C3.42 12.21 2 17 2 23.11z"></path></symbol>
		<symbol viewBox="0 0 29.76 13.21" id="slider-arrow-left" xmlns="http://www.w3.org/2000/svg"><path d="M29.76 6.61a.61.61 0 01-.63.59H2.31l4.95 5a.59.59 0 01-.22 1 .64.64 0 01-.68-.2L0 6.6 6.36.19A.63.63 0 017 0a.61.61 0 01.45.41.61.61 0 01-.19.59L2.31 6h26.82a.63.63 0 01.45.18.58.58 0 01.18.43z"></path></symbol>
		<symbol viewBox="0 0 29.76 13.21" id="slider-arrow-right" xmlns="http://www.w3.org/2000/svg"><path d="M0 6.61a.61.61 0 00.63.59h26.82l-4.95 5a.59.59 0 00.22 1 .64.64 0 00.68-.2l6.36-6.4L23.4.19a.63.63 0 00-.6-.19.61.61 0 00-.45.41.61.61 0 00.15.59l4.95 5H.63a.63.63 0 00-.45.18.58.58 0 00-.18.43z"></path></symbol>
	</svg>
</div>

Стили

/* Курсор */

.custom-cursor-main {
    position: fixed;
    z-index: 6000;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: var(--color-1);
    -webkit-transition: background-color 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    pointer-events: none;
    display: none;
}

.custom-cursor-main.expand {
    -webkit-transform: translate(-50%, -50%) scale(1.4);
    transform: translate(-50%, -50%) scale(1.4);
}

.custom-cursor-main.hidden {
    opacity: 0;
}

.touch .custom-cursor-main {
    display: none;
}

.custom-cursor-secondary {
    width: 38px;
    height: 38px;
    position: fixed;
    z-index: 6000;
    border-radius: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid var(--color-1);
    -webkit-transition: background-color 0.3s, border-color 0.3s, opacity 0.3s, height 0.3s, width 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, border-color 0.3s, opacity 0.3s, height 0.3s, width 0.3s, -webkit-transform 0.3s;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s, height 0.3s, width 0.3s;
    transition: background-color 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s, height 0.3s, width 0.3s, -webkit-transform 0.3s;
    pointer-events: none;
}

.custom-cursor-secondary.black-cursor {
    border-color: var(--color-line);
}

.custom-cursor-secondary.expand {
    width: 32px;
    height: 32px;
}

.custom-cursor-secondary.interactive {
    width: 60px;
    height: 60px;
    opacity: 0;
}

.custom-cursor-secondary.hidden {
    opacity: 0;
}

.touch .custom-cursor-secondary {
    display: none;
}

.custom-cursor-slider, .carousel .item {
    position: fixed;
    z-index: 6000;
    pointer-events: none;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    transition: opacity 0.2s;
    width: 34px;
    height: 34px;
}

.custom-cursor-slider.visible {
    opacity: 1;
}

.custom-cursor-slider .icon-cursor-arrow-left,
.custom-cursor-slider .icon-cursor-arrow-right {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 6px;
    height: 12px;
    fill: var(--color-1);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.custom-cursor-slider .icon-cursor-arrow-left {
    right: 100%;
    margin-right: 10px;
}

.custom-cursor-slider .icon-cursor-arrow-right {
    left: 100%;
    margin-left: 10px;
}

.custom-cursor-slider .icon-cursor-plus, .carousel .item {
    width: 12px;
    height: 12px;
    fill: var(--color-1);
    -webkit-transition: -webkit-transform 0.2s;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 0;
}

.custom-cursor-slider.expand .custom-cursor-slider__content {
    -webkit-transform: translate(-50%, -50%) scale(0.7) !important;
    transform: translate(-50%, -50%) scale(0.7) !important;
}

.custom-cursor-slider.expand .icon-cursor-arrow-left {
    -webkit-transform: translateY(-50%) translateX(-0.5rem);
    transform: translateY(-50%) translateX(-0.5rem);
}

.custom-cursor-slider.expand .icon-cursor-arrow-right {
    -webkit-transform: translateY(-50%) translateX(0.5rem);
    transform: translateY(-50%) translateX(0.5rem);
}

.touch .custom-cursor-slider {
    display: none;
}

.custom-cursor-slider.plus .icon-cursor-plus {
    opacity: 1;
}

.custom-cursor-slider__content, .carousel .item {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    border: 2px solid var(--color-1);
    border-radius: 50%;
}
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Курсор в виде картинки Курсор в виде картинки
Progresscircle
Рекомендации для васProgresscircleOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.