Oct 17, 2019
Back to all Elements
1. Giving an element a mix-blend-mode property so it will change it's color by the color of the element behind.
We start by creating a div and giving it the class .cursor and these properties:
Now we need to add a bit of code for that to work well.
1st part is making sure we won't get horizontal scroll bar once the element (pointer) is outside of the viewport.
2nd part is giving the .cursor class the mix-blend-mode and making it "transparent" so any clicks of the actual pointer will "go through" to the element below.
<style>
html,
body {
max-width: 100%;
overflow-x: hidden;
}
.cursor {
mix-blend-mode: difference;
pointer-events: none;
}
</style>
2. Replacing the pointer with the new element.
Now we need edit the body TAG to make the cursor "disappear"
And now all that is left to do is to "glue" the .cursor element to the mouse movements with a bit of JavaScript
<script>
var $cursor = $('.cursor');
function moveCursor(e) {
$cursor.css({
"top": e.pageY,
"left": e.pageX
});
}
$(window).on('mousemove', moveCursor);
</script>
Try avoiding using "Transition: All". It is heavy on the browser's engine.
.png)
.png)