[show_gps]
[ViewGPS]
[show_gps]
- Latitude: 35.293640, Longitude: -2.941613, Date: 2024-08-27 12:06:41
- Latitude: 35.293171, Longitude: -2.941494, Date: 2024-08-27 10:05:40
- Latitude: 35.293175, Longitude: -2.941501, Date: 2024-08-27 10:05:13
- Latitude: 35.293232, Longitude: -2.938375, Date: 2024-08-26 19:46:09
- Latitude: 35.292862, Longitude: -2.938369, Date: 2024-08-26 19:45:52
- Latitude: 35.292912, Longitude: -2.938284, Date: 2024-08-26 19:45:24
- Latitude: 35.292912, Longitude: -2.938269, Date: 2024-08-26 19:45:07
- Latitude: 35.292988, Longitude: -2.938337, Date: 2024-08-26 19:44:37
// Opossum Follower Script
document.addEventListener('DOMContentLoaded', function() {
// Create the opossum character
const opossum = document.createElement('div');
opossum.id = 'following-opossum';
// More detailed character (SVG for better quality)
opossum.innerHTML = ` `;
// Set styles for the character
opossum.style.position = 'fixed';
opossum.style.zIndex = '9999';
opossum.style.width = '40px';
opossum.style.height = '40px';
opossum.style.pointerEvents = 'none'; // So it doesn't interfere with clicking
opossum.style.transition = 'transform 0.2s ease';
// Add to the page
document.body.appendChild(opossum);
// Variables for tracking movement
let mouseX = 0, mouseY = 0;
let opossumX = window.innerWidth / 2;
let opossumY = window.innerHeight / 2;
// Character states
let isScanning = false;
let scanTarget = null;
let isIdle = true;
let idleTimer = null;
let lastMouseX = 0;
let lastMouseY = 0;
// Track mouse movement
document.addEventListener('mousemove', function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
// Reset idle timer when mouse moves
isIdle = false;
clearTimeout(idleTimer);
idleTimer = setTimeout(() => { isIdle = true; }, 3000);
// Determine if moving left or right
const movingRight = mouseX > lastMouseX;
// Flip the opossum based on movement direction
if (Math.abs(mouseX - lastMouseX) > 5) { // Only flip if significant movement
opossum.style.transform = movingRight ? 'scaleX(1)' : 'scaleX(-1)';
}
lastMouseX = mouseX;
lastMouseY = mouseY;
});
// Handle clicks - add a small animation
document.addEventListener('click', function(e) {
// Scan animation
isScanning = true;
scanTarget = { x: e.clientX, y: e.clientY };
// Reset scanning after a delay
setTimeout(() => {
isScanning = false;
scanTarget = null;
}, 500);
// Create a visual "ray" effect for the scan
const ray = document.createElement('div');
ray.style.position = 'fixed';
ray.style.backgroundColor = '#000000';
ray.style.height = '1px';
ray.style.transformOrigin = '0 0';
ray.style.zIndex = '9998';
ray.style.opacity = '0.7';
ray.style.pointerEvents = 'none';
document.body.appendChild(ray);
// Calculate length and angle of ray
const opossumCenterX = opossumX + 20; // half of opossum width
const opossumCenterY = opossumY + 20; // half of opossum height
const length = Math.sqrt(Math.pow(e.clientX - opossumCenterX, 2) + Math.pow(e.clientY - opossumCenterY, 2));
const angle = Math.atan2(e.clientY - opossumCenterY, e.clientX - opossumCenterX) * 180 / Math.PI;
// Set ray properties
ray.style.width = `${length}px`;
ray.style.left = `${opossumCenterX}px`;
ray.style.top = `${opossumCenterY}px`;
ray.style.transform = `rotate(${angle}deg)`;
// Animate ray
ray.animate([
{ opacity: 0.7 },
{ opacity: 0 }
], {
duration: 300,
easing: 'ease-out'
});
// Remove ray after animation
setTimeout(() => ray.remove(), 300);
});
// Idle animations
function doIdleAnimation() {
if (isIdle) {
// Simple wiggle animation
opossum.animate([
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-5px)' },
{ transform: 'translateY(0px)' }
], {
duration: 1000,
easing: 'ease-in-out'
});
// Randomize next idle animation
setTimeout(doIdleAnimation, Math.random() * 3000 + 2000);
} else {
// Check again in a second
setTimeout(doIdleAnimation, 1000);
}
}
// Start idle animation check
setTimeout(doIdleAnimation, 3000);
// Update position with a bit of delay for natural movement
function updatePosition() {
// If scanning, move more directly toward target
if (isScanning && scanTarget) {
opossumX += (scanTarget.x - opossumX - 20) * 0.3;
opossumY += (scanTarget.y - opossumY - 20) * 0.3;
} else {
// Normal following behavior
// Calculate distance to move (easing function)
opossumX += (mouseX - opossumX - 30) * 0.1; // 30px offset so it follows behind cursor
opossumY += (mouseY - opossumY - 30) * 0.1;
}
// Apply position
opossum.style.left = opossumX + 'px';
opossum.style.top = opossumY + 'px';
requestAnimationFrame(updatePosition);
}
// Adjust for different screen sizes
window.addEventListener('resize', function() {
// Keep opossum in viewport when window resizes
if (opossumX > window.innerWidth) {
opossumX = window.innerWidth - 50;
}
if (opossumY > window.innerHeight) {
opossumY = window.innerHeight - 50;
}
});
// Start the animation loop
updatePosition();
// Add a style for the opossum to bounce when it appears
opossum.animate([
{ transform: 'scale(0)', opacity: 0 },
{ transform: 'scale(1.2)', opacity: 1 },
{ transform: 'scale(1)', opacity: 1 }
], {
duration: 500,
easing: 'ease-out'
});
});