Все для веб-дизайнера
Стилизация курсора мыши на сайте с помощью JS
Вы замечали, что некоторые дизайнеры подходят к созданию своего проекта крайне скрупулезно, каждая деталь проработана до мелочей,задумки воплощены в совершенстве. К чему я все это, а к тому, что дизайнеры умудряются изменить даже стандартные элементы на сайте, такие как прокрутка, режим просмотра, цвет выделения и конечно же курсор мыши. Именно о нем мы сегодня поговорим и покажем, как можно его изменить, добавив красивую анимацию при движении курсора и наведем несколько различных примеров данной реализации.
У нас будет пять примеров, каждый из которых имеет различную форму и узор, при движении курсора, будет происходить анимация полета и плавного затухания. И так, давайте приступим.
Шаг 1. HTML
Для начала мы укажем графические иконки которые мы хотим видеть при движении курсора.
|
1 2 3 4 5 6 7 |
<section class="container"> <div class="button">✹</div> <div class="button clicked">◎</div> <div class="button">✧</div> <div class="button">◈</div> <div class="button">✮</div> </section> |
Вы можете легко добавить свой дизайн иконки.
Шаг 2. CSS
Теперь мы перейдем непосредственно к стилям, мы установим варианты трансформации и деформации наших объектов, с помощью которой мы получаем мягкую анимацию при движении:
|
1 2 3 4 5 6 7 8 9 10 |
@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, нам необходимо определить значения мыши, чтобы курсор был авто заменен на нужную нам функцию, также мы определяем, цветовую трансформацию, которая будет словно радуга переливать оттенки при движении.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
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); setTimeout(function() {$(div).remove();},800); }); }); setInterval(function() { if(H<=360) {H++;} else {H=0;} },10); |
После проделанных манипуляций мы получаем достаточно привлекательные курсоры мыши, которые отлично дополнят Вашу персональную страницу.
Вот и все. Готово!
Интересно:
| Опубликовал admin 18.06.2014 в 15:57, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...