<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to My Domain</title>
<style>
/* 1. Setup the "Stage" */
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
background-color: #111; /* Starting color */
overflow: hidden; /* Keeps scrollbars away */
transition: background-color 0.15s ease; /* Smooth color flash */
font-family: sans-serif;
}
/* 2. The Container that moves around */
#floating-container {
position: absolute;
width: 200px; /* Size of your image box */
height: 200px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
z-index: 10;
}
/* 3. The Image itself (The Spinner) */
.bouncing-img {
width: 100%;
height: 100%;
object-fit: contain;
/* Constant gentle spin */
animation: spin 6s linear infinite;
filter: drop-shadow(0 0 15px rgba(0,0,0,0.5));
transition: scale 0.3s ease;
}
/* 4. "Turbo Mode" on Hover */
#floating-container:hover .bouncing-img {
animation: spin 0.6s linear infinite; /* Spins way faster */
scale: 1.2; /* Gets slightly bigger */
}
/* The math for the rotation */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Optional: A little message in the background so it's not empty */
.bg-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: rgba(255,255,255,0.1);
font-size: 2rem;
pointer-events: none; /* User can't click this */
text-transform: uppercase;
letter-spacing: 5px;
}
</style>
</head>
<body>
<div class="bg-text">Coming Soon</div>
<div id="floating-container">
<img src="index.jpg" class="bouncing-img" alt="Bouncing Logo">
</div>
<script>
const box = document.getElementById('floating-container');
const body = document.body;
// Starting position (Random)
let posX = Math.random() * (window.innerWidth - 200);
let posY = Math.random() * (window.innerHeight - 200);
// Speed (Higher = Faster)
let velX = 3;
let velY = 3;
// Function to create a bright random color
function getRandomColor() {
const h = Math.floor(Math.random() * 360);
return `hsl(${h}, 70%, 40%)`; // Uses HSL for nicer, vibrant colors
}
function move() {
const winW = window.innerWidth;
const winH = window.innerHeight;
const boxW = box.offsetWidth;
const boxH = box.offsetHeight;
// Apply the velocity to the position
posX += velX;
posY += velY;
let hitWall = false;
// Bounce off left/right
if (posX + boxW >= winW || posX <= 0) {
velX *= -1;
hitWall = true;
}
// Bounce off top/bottom
if (posY + boxH >= winH || posY <= 0) {
velY *= -1;
hitWall = true;
}
// Update background color if we hit a wall
if (hitWall) {
body.style.backgroundColor = getRandomColor();
}
// Move the actual element on screen
box.style.left = posX + 'px';
box.style.top = posY + 'px';
// Repeat the function for the next frame
requestAnimationFrame(move);
}
// Handle window resizing so it doesn't get stuck outside the screen
window.addEventListener('resize', () => {
posX = Math.min(posX, window.innerWidth - box.offsetWidth);
posY = Math.min(posY, window.innerHeight - box.offsetHeight);
});
// Start the movement
move();
</script>
</body>
</html>