Cursor print on move (Snake Cursor)

cursor-print-on-move-snake-cursor.markdown

Cursor print on move (Snake Cursor)

A Pen by Tiago França on CodePen.

License.

index.pug

.wrap

script.js

function throttle (callback, limit) {
    var waiting = false;                      // Initially, we're not waiting
    return function () {                      // We return a throttled function
        if (!waiting) {                       // If we're not waiting
            callback.apply(this, arguments);  // Execute users function
            waiting = true;                   // Prevent future invocations
            setTimeout(function () {          // After a period of time
                waiting = false;              // And allow future invocations
            }, limit);
        }
    }
}

var body = document.querySelector(".wrap"),
	count = 0,
	x = 0, 
	y = 0,
	distance = 5,
	maxAmount = 100;

window.addEventListener("mousemove", throttle(function(){placeCursor()}, 2) );

function placeCursor(){
	var lastX = x;
	var lastY = y;
	x = event.clientX;
	y = event.clientY;
	if (Math.hypot(x - lastX, y - lastY) < distance) {  // Distance between two point Math.hypot(endX - startX, endY - startY)
		x = lastX;
		y = lastY;
		return true;
	}
	count++;
	var thisCount = count;
	body.innerHTML += '<span style="top:'+y+'px;left:'+x+'px;" data-count="'+count+'" class="cursor"></span>';

	// Time based removal
	// setTimeout(() => { 
	// 	document.querySelector('.cursor[data-count="'+thisCount+'"]').remove();
	// }, 2000);

	// Quantity based removal
	document.querySelector('.cursor[data-count="'+(thisCount-maxAmount)+'"]').remove();
}

// Next steps

// add event listener to each cursor that triggers on mouse over
// Event reloads page (google javascript reload page)

style.stylus

.cursor
	width 23px
	height 23px
	left 0
	top 0
	position fixed
	cursor: cursor;
	background-image url(https://upload.wikimedia.org/wikipedia/commons/9/92/Location_dot_red.svg)
	background-size contain
	background-repeat no-repeat
	will-change top, left, width, height
	transition top 0.01s, left 0.01s, width 0.5s, height 0.5s

.wrap
	width 100vw
	height 100vh
	background yellow