VR

Realidad Virtual

// 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' }); });