Стилизация курсора мыши на сайте с помощью JS

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



У нас будет пять примеров, каждый из которых имеет различную форму и узор, при движении курсора, будет происходить анимация полета и плавного затухания. И так, давайте приступим.

Шаг 1. HTML
Для начала мы укажем графические иконки которые мы хотим видеть при движении курсора.

1

2
✹
3
◎
4
✧
5
◈
6
✮
7

Вы можете легко добавить свой дизайн иконки.



Шаг 2. CSS
Теперь мы перейдем непосредственно к стилям, мы установим варианты трансформации и деформации наших объектов, с помощью которой мы получаем мягкую анимацию при движении:

1
@keyframes floatOne
2
{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-20px,0) scale(.2) rotate(45deg);}}
3
@keyframes floatTwo
4
{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-35px,0) scale(.1) rotate(45deg);}}
5
@keyframes floatThree
6
{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-50px,0) scale(.3) rotate(45deg);}}
7
@keyframes floatFour
8
{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-65px,0) scale(.1) rotate(45deg);}}
9
@keyframes floatFive
10
{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-80px,0) scale(.2) rotate(45deg);}}

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

Шаг 3. JS
Вся основная работа будет возложена на javascript, нам необходимо определить значения мыши, чтобы курсор был авто заменен на нужную нам функцию, также мы определяем, цветовую трансформацию, которая будет словно радуга переливать оттенки при движении.

[code]1
var H = 0;
2
$('.button').bind('mousedown touchstart',function(e) {
3
$('.clicked').removeClass('clicked');
4
$(this).addClass('clicked');
5
});
6
$(document).bind('mousemove touchmove',function(e) {
7
e.preventDefault();
8
var drawSize = 55;
9
var drawType = $('.clicked').html();
10
var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive');
11
var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)];
12
var xPos = e.originalEvent.pageX;
13
var yPos = e.originalEvent.pageY;
14
$('body').append(''+drawType+'');
15
$('.draw').each(function() {
16
var div = $(this);
17
setTimeout(function() {$(div).remove();},800);
18
});
19
});
20
setInterval(function() {
21
if(H