Custom Cursor with CSS and jQuery [Detailed]
Hey everyone! 2 days ago i posted I Built My Personal Website and one of the questions was What library did you use for the mouse pointer effect?. The answer is i used no library. I did it all by myself and today i am going to show you how i did it. First things first, we have to create our custom cursor style.
Cursor Style
.cursor position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: #f5f5f5; pointer-events: none; mix-blend-mode: difference; z-index: 999; transition: transform 0.2s; >
It is because when we start to scroll we don’t want our custom cursor to stay where we start to scroll. If you use position: absolute instead of fixed, cursor won’t be moving as you scroll down or up the page. To prevent that you have to give the fixed value to position . Why do we use?
Your cursor is right on top of the custom cursor you created. And whenever you want to click a link or see a hover statement this custom cursor will prevent that to be happen. If you give the none value to pointer-events you will be able to click anything you want. What is.
The mix-blend-mode property defines how an element’s content should blend with its background. difference : this subtracts the darker of the two colors from the lightest color. And so this allows you to see the content behind your cursor easily.
jQuery DOM Manipulation
$(document).ready(function() var cursor = $('.cursor'); >);
Instead of writing $(‘.cursor’) everytime and to make our job easier we stored it in a variable named cursor. Now let’s make it follow as we move the mouse.
$(document).ready(function() var cursor = $('.cursor'); $(window).mousemove(function(e) cursor.css( top: e.clientY - cursor.height() / 2, left: e.clientX - cursor.width() / 2 >); >); >);
We selected our window object and when we move our mouse in it we want our cursor’s top and left positions to change. To make it happen we manipulate its css from here. What is.
top: e.clientY left: e.clientX
clientY and clientX are relative to the upper left edge of the content area (the viewport) of the browser window. This point does not move even if the user moves a scrollbar from within the browser. pageY and pageX are relative to the top left of the fully rendered content area in the browser. This reference point is below the URL bar and back button in the upper left. And by using clientY instead of pageY we maintain our custom cursor to stay at the same position. As you can see, to keep our custom cursor in the right position we have to give both
top: e.clientY left: e.clientX
top: e.clientY - cursor.height() / 2 left: e.clientX - cursor.width() / 2
Because we want the cursor we created to be perfectly centered to our default one. As you can see above we gave height: 20px and width: 20px to our cursor.
To get the right point and center it we give
- cursor.height() / 2 - cursor.width() / 2
top: 50%; left: 50%; transform: translate(-50%, -50%);
This transform: translate(-50%, -50%) perfectly centers the element by taking off half of its height and width. This example is similar to what we did on jQuery. -cursor.height()/2 and -cursor.width()/2 are doing the same thing. What is going to happen when we leave our mouse from browser screen?
$(window) .mouseleave(function() cursor.css( opacity: "0" >); >) .mouseenter(function() cursor.css( opacity: "1" >); >);
We don’t want our custom cursor to be visible at the position where we left the screen. With this code
$(window).mouseleave(function() cursor.css(opacity: "0">); >);
whenever we leave the screen our custom cursor’s opacity will be 0 and can’t be seen. And with this one
$(window).mouseenter(function() cursor.css(opacity: "1">); >);
whenever our mouse is on the screen the custom cursor’s opacity will be 1 and can be seen. How do you understand if you click or not?
$(window) .mousedown(function() cursor.css( transform: "scale(.2)" >); >) .mouseup(function() cursor.css( transform: "scale(1)" >); >);
With these lines of code when we click (which is mousedown ) our cursor scales down to 0.2 and when we don’t (which is mouseup ) it comes to its normal statement and scales back to 1 . Managing the hover statements
$(".link") .mouseenter(function() cursor.css( transform: "scale(3.2)" >); >) .mouseleave(function() cursor.css( transform: "scale(1)" >); >);
As you can see we have a class named link . If you have elements which have some effects on hover or you want your clickable items to be seen by user and want your custom cursor to change whenever you hover these elements, you can give every element that have this effect a class named link and so you can manipulate it from jQuery. If your mouse is on the element(which is mouseenter ) which has a link class, your cursor scales up to 3.2 and if you leave the hover state (which is mouseleave ) it scales back to its normal state which is 1 . You can give any class name you want and manipulate your custom cursor as you wish. This is just an example, you don’t have to do the same.
Final
to make the default cursor unseen. At last we have our custom cursor created and functioning as we desire. Don’t forget to place your cursor element right on top of the closing body tag.
$(document).ready(function() var cursor = $(".cursor"); $(window).mousemove(function(e) cursor.css( top: e.clientY - cursor.height() / 2, left: e.clientX - cursor.width() / 2 >); >); $(window) .mouseleave(function() cursor.css( opacity: "0" >); >) .mouseenter(function() cursor.css( opacity: "1" >); >); $(".link") .mouseenter(function() cursor.css( transform: "scale(3.2)" >); >) .mouseleave(function() cursor.css( transform: "scale(1)" >); >); $(window) .mousedown(function() cursor.css( transform: "scale(.2)" >); >) .mouseup(function() cursor.css( transform: "scale(1)" >); >); >);
An example for you to see how it works (To get the true experience please go to codepen) Also you can use TweenMax for custom cursor animations. I didn’t use it before but you can give it a shot if you want. Thanks for your time. Have a good day
Курсор
The cursor CSS property specifies the mouse cursor displayed when the mouse pointer is over an element.
Начальное значение | auto |
---|---|
Применяется к | все элементы |
Наследуется | да |
Обработка значения | как указано, но с абсолютными значениями url |
Animation type | discrete |
Синтаксис
/* Применение ключевых значений */ cursor: pointer; cursor: auto; /* Использование URL и координат */ cursor: url(cursor1.png) 4 12, auto; cursor: url(cursor2.png) 2 2, pointer; /* Глобальные значения */ cursor: inherit; cursor: initial; cursor: unset;
Значения
Ссылка или разделённый запятыми список ссылок: url(…), url(…), … , указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) должно находиться в конце списка значений. See Using URL values for the cursor property for more details.
Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.
Наведите курсор на картинку, чтобы увидеть пример в действии:
Указывает на возможность перемещения объекта.
Приближение или уменьшение.
Указывает на возможность схватить и переместить объект.
Формальный синтаксис
cursor =
[ (en-US) [ (en-US) | (en-US) ] (en-US) [ (en-US) ] (en-US) ? (en-US) ] (en-US) # (en-US) ? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)
=
url( (en-US) * (en-US) ) | (en-US)
src( (en-US) * (en-US) )
Примеры
.foo cursor: crosshair; > /* use prefixed-value if "zoom-in" isn't supported */ .bar cursor: -webkit-zoom-in; cursor: zoom-in; > /* standard cursor value as fallback for url() must be provided (doesn't work without) */ .baz cursor: url(hyper.cur), auto; >
Спецификации
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
Found a content problem with this page?
This page was last modified on 7 нояб. 2022 г. by MDN contributors.
Your blueprint for a better internet.
CSS cursor Property
The cursor property specifies the mouse cursor to be displayed when pointing over an element.
Default value: | auto |
---|---|
Inherited: | yes |
Animatable: | no. Read about animatable |
Version: | CSS2 |
JavaScript syntax: | object.style.cursor=»crosshair» Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value | Description | Demo |
---|---|---|
alias | The cursor indicates an alias of something is to be created | Play it » |
all-scroll | The cursor indicates that something can be scrolled in any direction | Play it » |
auto | Default. The browser sets a cursor | Play it » |
cell | The cursor indicates that a cell (or set of cells) may be selected | Play it » |
col-resize | The cursor indicates that the column can be resized horizontally | Play it » |
context-menu | The cursor indicates that a context-menu is available | Play it » |
copy | The cursor indicates something is to be copied | Play it » |
crosshair | The cursor render as a crosshair | Play it » |
default | The default cursor | Play it » |
e-resize | The cursor indicates that an edge of a box is to be moved right (east) | Play it » |
ew-resize | Indicates a bidirectional resize cursor | Play it » |
grab | The cursor indicates that something can be grabbed | Play it » |
grabbing | The cursor indicates that something can be grabbed | Play it » |
help | The cursor indicates that help is available | Play it » |
move | The cursor indicates something is to be moved | Play it » |
n-resize | The cursor indicates that an edge of a box is to be moved up (north) | Play it » |
ne-resize | The cursor indicates that an edge of a box is to be moved up and right (north/east) | Play it » |
nesw-resize | Indicates a bidirectional resize cursor | Play it » |
ns-resize | Indicates a bidirectional resize cursor | Play it » |
nw-resize | The cursor indicates that an edge of a box is to be moved up and left (north/west) | Play it » |
nwse-resize | Indicates a bidirectional resize cursor | Play it » |
no-drop | The cursor indicates that the dragged item cannot be dropped here | Play it » |
none | No cursor is rendered for the element | Play it » |
not-allowed | The cursor indicates that the requested action will not be executed | Play it » |
pointer | The cursor is a pointer and indicates a link | Play it » |
progress | The cursor indicates that the program is busy (in progress) | Play it » |
row-resize | The cursor indicates that the row can be resized vertically | Play it » |
s-resize | The cursor indicates that an edge of a box is to be moved down (south) | Play it » |
se-resize | The cursor indicates that an edge of a box is to be moved down and right (south/east) | Play it » |
sw-resize | The cursor indicates that an edge of a box is to be moved down and left (south/west) | Play it » |
text | The cursor indicates text that may be selected | Play it » |
URL | A comma separated list of URLs to custom cursors. Note: Always specify a generic cursor at the end of the list, in case none of the URL-defined cursors can be used | Play it » |
vertical-text | The cursor indicates vertical-text that may be selected | Play it » |
w-resize | The cursor indicates that an edge of a box is to be moved left (west) | Play it » |
wait | The cursor indicates that the program is busy | Play it » |
zoom-in | The cursor indicates that something can be zoomed in | Play it » |
zoom-out | The cursor indicates that something can be zoomed out | Play it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |