aneelkkhatri/trailing-letters.html

## trailing-letters.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<script type="text/javascript">
		let content = "ANEEL KUMAR";
		let movingEls = content.split('').map(c => {
			let d = document.createElement('div')
			d.innerHTML = c;
			d.style.position = "absolute";
			return d;
		})

		movingEls.forEach(div => {
			document.body.appendChild(div);
		})

		function move(div, params) {
			div.style.left = (params.x)+'px';
			div.style.top = params.y+'px';
		}

		const SPACE = 20;

		// using approach 2
		approach2();

		function approach1() {
			document.addEventListener('mousemove', e => {
				let gap = 60;

				for (var i = 0; i < movingEls.length; i++) {
					setTimeout((i, SPACE) => {
						move(movingEls[i], {
							x: (SPACE+e.pageX),
							y: e.pageY
						})
					}, gap * i, i, SPACE * i)
				}
			})
		}

		function approach2() {
			const QUEUE_SIZE = 4*movingEls.length;
			let pos = [];
			for (var i = 0; i < QUEUE_SIZE; ++i) {
				pos[i] = {x:0, x:0}
			}

			setInterval(() => {
				for (var i = 0; i < movingEls.length; i++) {
					move(movingEls[i], {
						x: (i*SPACE+pos[QUEUE_SIZE - 4*i - 1].x),
						y: pos[QUEUE_SIZE - 4*i - 1].y
					})
				}
				pos.push(currentPos)
				pos.shift();

			},10)

			let currentPos = {
				x: 0,
				y: 0
			};

			document.addEventListener('mousemove', e => {
				currentPos = {
					x: e.pageX,
					y: e.pageY
				};

			});
		}
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>

	<script type="text/javascript">
	let content = "ANEEL KUMAR";
	let movingEls = content.split('').map(c => {
	let d = document.createElement('div')
	d.innerHTML = c;
	d.style.position = "absolute";
	return d;
	})

	movingEls.forEach(div => {
	document.body.appendChild(div);
	})

	function move(div, params) {
	div.style.left = (params.x)+'px';
	div.style.top = params.y+'px';
	}

	const SPACE = 20;

	// using approach 2
	approach2();

	function approach1() {
	document.addEventListener('mousemove', e => {
	let gap = 60;

	for (var i = 0; i < movingEls.length; i++) {
	setTimeout((i, SPACE) => {
	move(movingEls[i], {
	x: (SPACE+e.pageX),
	y: e.pageY
	})
	}, gap * i, i, SPACE * i)
	}
	})
	}

	function approach2() {
	const QUEUE_SIZE = 4*movingEls.length;
	let pos = [];
	for (var i = 0; i < QUEUE_SIZE; ++i) {
	pos[i] = {x:0, x:0}
	}

	setInterval(() => {
	for (var i = 0; i < movingEls.length; i++) {
	move(movingEls[i], {
	x: (iSPACE+pos[QUEUE_SIZE - 4i - 1].x),
	y: pos[QUEUE_SIZE - 4*i - 1].y
	})
	}
	pos.push(currentPos)
	pos.shift();

	},10)

	let currentPos = {
	x: 0,
	y: 0
	};

	document.addEventListener('mousemove', e => {
	currentPos = {
	x: e.pageX,
	y: e.pageY
	};

	});
	}
	</script>
	</body>
	</html>