I have been trying to figure out how to replicate this effect. The Red arrowhead remains stationary while the background features a curved path. Currently, I am adjusting the background position to give the illusion of the arrowhead moving along the curved path.
Check Out the Red Arrow HERE
My current code has the arrow moving at a 45-degree angle towards the destination. However, my goal is to have the arrow move along that dashed path displayed in the image.
var interval = 100;
var currX = -82; // Current x position
var currY = -342; // Current y position
var destX = -750; // Destination x position
var destY = -850; // Destination y position
var currentDuration = 0;
var duration = 1800 * 1000; // Duration
var $bg = $('#flight-wrapper');
var intbg = window.setInterval(function(){
currentDuration += interval;
var leftX = destX - currX; // X pixels left
var leftY = destY - currY; // Y pixels left
var leftDuration = duration - currentDuration; // Duration left
var tickX = leftX / leftDuration * interval; // Pixel offset
var tickY = leftY / leftDuration * interval; // Pixel offset
var newX = currX + tickX;
var newY = currY + tickY;
// Ensure it does not overshoot the destination X & Y pixel
currX = newX <= destX ? destX : newX;
currY = newY <= destY ? destY : newY;
if ( currX <= destX && currY <= destY ) {
window.clearTimeout(intbg);
}
$bg.css({
backgroundPosition: Math.floor(currX) + 'px ' + Math.floor(currY) + 'px'
});
}, interval);
I would greatly appreciate any help or suggestions in achieving this desired effect.