Главная страница » Веб-дизайн » Стилизация курсора мыши на сайте с помощью JS

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

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

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

</section>

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

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

Шаг 2. CSS

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

@keyframes floatOne

{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-20px,0) scale(.2) rotate(45deg);}}

@keyframes floatTwo

{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-35px,0) scale(.1) rotate(45deg);}}

@keyframes floatThree

{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-50px,0) scale(.3) rotate(45deg);}}

@keyframes floatFour

{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-65px,0) scale(.1) rotate(45deg);}}

@keyframes floatFive

{0% {opacity:1;}50% {opacity:1;}100% {opacity:0;transform:translate3D(0,-80px,0) scale(.2) rotate(45deg);}}

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

Шаг 3. JS

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

var H = 0;

$('.button').bind('mousedown touchstart',function(e) {

$('.clicked').removeClass('clicked');

$(this).addClass('clicked');

});

$(document).bind('mousemove touchmove',function(e) {

e.preventDefault();

var drawSize = 55;

var drawType = $('.clicked').html();

var floatTypes = Array('floatOne','floatTwo','floatThree','floatFour','floatFive');

var floatType = floatTypes[Math.floor(Math.random()*floatTypes.length)];

var xPos = e.originalEvent.pageX;

var yPos = e.originalEvent.pageY;

$('body').append('<div class="draw" style="font-size:'+drawSize+'px;left:'+xPos+'px;top:'+yPos+'px;-webkit-animation:'+floatType+' .9s 1;-moz-animation:'+floatType+' .9s 1;color:hsla('+H+',100%,70%,1)">'+drawType+'</div>');

$('.draw').each(function() {

var div = $(this);