please take a look at this website: http://alexandercoggin.com/
and see how the curser drags the text. I want to implement exact the same effect. here I have tried to use the paper.js library to do so but the result is not like what I want. Can anyone help me to write the code snippet please; There is no limitation in using any other library at all.
// Setup Paper.js
paper.setup('myCanvas');
var word = 'Hello, World!';
var characters = [];
var offsetX = 0;
var offsetY = 0;
var characterSpacing = 20;
var chasingSpeed = 0.9;
var delayIncrement = 100;
for (var i = 0; i < word.length; i++) {
var character = new paper.PointText({
content: word[i],
fillColor: 'black',
fontFamily: 'Arial, sans-serif',
fontWeight: 'bold',
fontSize: 24,
justification: 'center'
});
character.targetPosition = new paper.Point(0, 0);
character.position = new paper.Point(0, 0);
character.delay = i * delayIncrement;
characters.push(character);
}
function onMouseMove(event) {
var mousePosition = event.point;
var cursor = document.querySelector('.custom-cursor');
cursor.style.top = mousePosition.y - cursor.offsetHeight / 2 + 'px';
cursor.style.left = mousePosition.x - cursor.offsetWidth / 2 + 'px';
// for (var i = 0; i < characters.length; i++) {
// var character = characters[i];
// var targetPosition = mousePosition.add(new paper.Point(i * characterSpacing + 20, 0));
// setTimeout(function(char, targetPos) {
// char.targetPosition = targetPos;
// }, character.delay, character, targetPosition);
// }
var wordLength = word.length;
var totalWidth = wordLength * characterSpacing;
var angleIncrement = Math.PI * 2 / totalWidth;
var initialAngle = Math.atan2(mousePosition.y, mousePosition.x) - Math.PI / 2;
for (var i = 0; i < characters.length; i++) {
var character = characters[i];
var angle = initialAngle + angleIncrement * i;
var radius = totalWidth / (2 * Math.PI);
var targetX = mousePosition.x + Math.cos(angle) * radius;
var targetY = mousePosition.y + Math.sin(angle) * radius;
setTimeout(function(char, posX, posY) {
char.targetPosition = new paper.Point(posX, posY);
}, character.delay, character, targetX, targetY);
}
}
function onFrame(event) {
for (var i = 0; i < characters.length; i++) {
var character = characters[i];
var distance = character.targetPosition.subtract(character.position);
character.position = character.position.add(distance.multiply(chasingSpeed));
}
}
paper.view.onMouseMove = onMouseMove;
paper.view.onFrame = onFrame;
paper.view.onResize = function(event) {
paper.view.viewSize = new paper.Size(window.innerWidth, window.innerHeight);
}
paper.view.draw();html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.custom-cursor {
position: absolute;
top: -3px;
left: -3px;
width: 7px;
height: 7px;
border: 2px solid black;
/* Customize the cursor border color */
border-radius: 50%;
background-color: transparent;
/* Make the cursor transparent */
pointer-events: none;
z-index: 9999;
}<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/paper"></script>
</head>
<body>
<div class="custom-cursor"></div>
<canvas id="myCanvas"></canvas>
</body>
</html>