How the hell it works?
It's simple, jus drop this JavaScript in your HTML:
- document.body.addEventListener("mousemove", function(event) {
- moveCursor(event);
- });
- var svgCursor = document.getElementById('svg-cursor');
- function moveCursor(e) {
- var x = e.clientX - 5,
- y = e.clientY - 5;
- svgCursor.setAttribute('style', 'left: ' + x + 'px; top: ' + y + 'px');
- if (e.target.className.indexOf('custom-cursor') > -1) {
- switch (e.target.className) {
- case 'custom-cursor custom-cursor--action':
- svgCursor.setAttribute('class', 'svg-cursor svg-cursor__action')
- break;
- case 'custom-cursor custom-cursor--close':
- svgCursor.setAttribute('class', 'svg-cursor svg-cursor__close')
- break;
- }
- } else {
- svgCursor.setAttribute('class', 'svg-cursor');
- }
- }
Now add these classes to some DOM elements and check it out!
- custom-cursor custom-cursor--hover
- // or
- custom-cursor custom-cursor--close
Remember... IE Sucks!