simulate pointer trails effect

Admin 1
Viewed 576

I'm trying to simulate windows pointer trails effect:

enter image description here

with the same settings there's in windows. This is what I tried:

 var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
var a = 0;
document.addEventListener("mousemove", function (e) {
  $("#trail" + (a - 6)).remove();
  document.body.innerHTML = document.body.innerHTML + '<img class="trail" id="trail' + a + '" style="left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>';
  document.getElementById("cursor").style = "z-index:2;left:" + e.pageX + "px;top:" + e.pageY + "px;";
  a++;
});
*{cursor:none;}
#cursor {
  position:fixed;
  z-index:999999;
  width:12px;
  height:19px;
}

.trail {
  z-index:1;
  position:fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<button onclick="alert('click')">click me</button>

But I have few problems with this code:

  1. I can't press buttons or anything else, and if I change the z-index to be negative the cursor is behind the buttons.
  2. If page zoom is different then 100% the cursor size is bigger/smaller.
  3. It's too fast, in the windows pointer trails there's bigger gap between the cursor trails.
  4. I want it to be possible to change trails length(like in the windows settings) but I can't do it because of problem 1.
css html jquery javascript
1 Answers

You can use pointer-events:none to solve problem 1, to solve problem 2 you can do "transform:scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")", to solve problem 3 you can add cursor image only in odd/even loops(I compared it to the windows pointer trails and it's the same speed), and to solve problem 4 you can use animation timing:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
*{cursor:none;}
.trail
{
    position:fixed;
    width:0;
    height:0;
    transform-origin:0 0;
}
#trails
{
    pointer-events: none;
    position:fixed;
    top:0;
    left:0;
    z-index:99998;
    width:100%;
    height:100vh;
}
#cursor
{
    pointer-events:none;
    position:fixed;
    z-index:999999;
    width:12px;
    height:19px;
    transform-origin:0 0;
}
@keyframes pointer_trails
{
    0%{width:12px;height:19px;}
    100%{width:12px;height:19px;}
}
</style>
<script>
    var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII=";
    var a = true;
    //makes image stay the same size:
    $(document).ready(function () {
        $('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
        $('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
    });
    $(window).resize(function () {
        $('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
        $('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
    });
    //pointer trails effect:
    document.addEventListener("mousemove", function (e) {
        document.getElementById("cursor").style = "left:" + e.pageX + "px;top:" + e.pageY + "px;";
        if (document.getElementById("_checked").checked && a)
            $("#trails").append('<img style="animation:pointer_trails ' + document.getElementById('trails_length').value + 's ease-in-out;left:' + e.pageX + 'px;top:' + e.pageY + 'px;" class="trail" src="' + src + '"></img>');
        a = !a;
        $('#cursor').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")");
        $('.trail').css('transform', "scale(" + (parent.document.body.clientWidth) / (window.outerWidth) + ")"); 
    });
</script>
</head>
<body>
<div id="trails"></div>
<img id="cursor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAMAAACTKxybAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAJdnBBZwAAACAAAAAgAIf6nJ0AAAAtUExURUxpcQECEAABDgIFFgABDwAADgECEQIEFQECEgMFGP////T19+Tk5tbW2Lu7w/64qcAAAAAKdFJOUwC95zbT9LRNnhpZwYIeAAAAWUlEQVQI103OSw7AIAgEUEW0Laj3P24H/M6KF8iEQCmcULxEconkEnBk2HIsDUxNqGtiaEEqtAE5FAUWg+Yu8RltmhNLZQfmULoUW0XMAavG+/fS5ODjFwc/pqUD3BylxA0AAAAASUVORK5CYII="/>
<div style="text-align:center">
<input type="checkbox" id="_checked" checked/>Show pointer trails
<br />
Short<input type="range" id="trails_length" min="0.02" max="0.15" step="0.026" value="0.15"/>Long
</div>
</body>
</html>
user_82711800
Related