diff options
| -rw-r--r-- | isometric/index.html | 81 |
1 files changed, 46 insertions, 35 deletions
diff --git a/isometric/index.html b/isometric/index.html index ba0b93d..47dfbde 100644 --- a/isometric/index.html +++ b/isometric/index.html @@ -4,9 +4,10 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Colorful Isometric Triangles</title> + <title>Isometric Triangles</title> <style> - body, html { + body, + html { margin: 0; padding: 0; width: 100%; @@ -24,7 +25,7 @@ transform-origin: center; animation: float 20s infinite ease-in-out; } - + /* Create isometric triangle using clip-path instead of borders */ .isometric { width: 100px; @@ -35,20 +36,24 @@ transform-style: preserve-3d; perspective: 800px; } - + @keyframes float { 0% { transform: translateY(0) rotate(0deg) scale(1); } + 25% { transform: translateY(-20px) rotate(90deg) scale(1.05); } + 50% { transform: translateY(0) rotate(180deg) scale(1); } + 75% { transform: translateY(20px) rotate(270deg) scale(0.95); } + 100% { transform: translateY(0) rotate(360deg) scale(1); } @@ -59,70 +64,76 @@ z-index: 10; color: white; text-align: center; - padding-top: 20vh; font-family: 'Arial', sans-serif; + + /* Center vertically and horizontally */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; } h1 { font-size: 3rem; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + margin-bottom: 1rem; } </style> </head> <body> <div class="content"> - <h1>Colorful Isometric Triangles</h1> - <p>A dynamic background with animated isometric triangles</p> + <h1>Isometric Triangles</h1> </div> <script> - document.addEventListener('DOMContentLoaded', function() { + document.addEventListener('DOMContentLoaded', function () { console.log("DOM loaded, creating triangles"); - + const colors = [ - '#FF0000', '#FF00FF', '#FF00AA', '#AA00FF', + '#FF0000', '#FF00FF', '#FF00AA', '#AA00FF', '#0000FF', '#00AAFF', '#00FFFF', '#00FFAA', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA00', '#FF6600', '#FF0066', '#FFFFFF', '#AAAAFF' ]; - + const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const triangleCount = Math.max(50, Math.floor((windowWidth * windowHeight) / 10000)); - + console.log(`Creating ${triangleCount} triangles for window size ${windowWidth}x${windowHeight}`); - + // Create triangles using DOM elements with isometric perspective for (let i = 0; i < triangleCount; i++) { createIsometricTriangle(); } - + function createIsometricTriangle() { const triangle = document.createElement('div'); triangle.className = 'triangle isometric'; - + // Random size between 50 and 150 const size = 50 + Math.random() * 100; - + // Random position const left = Math.random() * windowWidth; const top = Math.random() * windowHeight; - + // Random color const color = colors[Math.floor(Math.random() * colors.length)]; - + // Random rotation for isometric effect const rotateX = -30 + Math.random() * 60; // -30 to 30 degrees const rotateY = -30 + Math.random() * 60; // -30 to 30 degrees const rotateZ = Math.random() * 360; // 0 to 360 degrees - + // Random animation duration const duration = 10 + Math.random() * 40; - + // Random direction const direction = Math.random() > 0.5 ? 'normal' : 'reverse'; - + // Set triangle properties triangle.style.left = `${left}px`; triangle.style.top = `${top}px`; @@ -132,57 +143,57 @@ triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; triangle.style.animationDuration = `${duration}s`; triangle.style.animationDirection = direction; - + // Add to body document.body.appendChild(triangle); console.log(`Created isometric triangle at (${left}, ${top}) with size ${size} and color ${color}`); } - + // Add some triangles when mouse moves - document.addEventListener('mousemove', function(e) { + document.addEventListener('mousemove', function (e) { if (Math.random() < 0.05) { // 5% chance to create a triangle on mouse move const triangle = document.createElement('div'); triangle.className = 'triangle isometric'; - + const size = 50 + Math.random() * 100; const color = colors[Math.floor(Math.random() * colors.length)]; - + // Random rotation for isometric effect const rotateX = -30 + Math.random() * 60; const rotateY = -30 + Math.random() * 60; const rotateZ = Math.random() * 360; - - triangle.style.left = `${e.clientX - size/2}px`; - triangle.style.top = `${e.clientY - size/2}px`; + + triangle.style.left = `${e.clientX - size / 2}px`; + triangle.style.top = `${e.clientY - size / 2}px`; triangle.style.width = `${size}px`; triangle.style.height = `${size}px`; triangle.style.backgroundColor = color; triangle.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) rotateZ(${rotateZ}deg)`; triangle.style.animationDuration = `${10 + Math.random() * 40}s`; triangle.style.animationDirection = Math.random() > 0.5 ? 'normal' : 'reverse'; - + document.body.appendChild(triangle); } }); - + // Handle window resize - window.addEventListener('resize', function() { + window.addEventListener('resize', function () { // Clear all existing triangles const existingTriangles = document.querySelectorAll('.triangle'); existingTriangles.forEach(triangle => { document.body.removeChild(triangle); }); - + // Create new triangles based on new window size const newWindowWidth = window.innerWidth; const newWindowHeight = window.innerHeight; const newTriangleCount = Math.max(50, Math.floor((newWindowWidth * newWindowHeight) / 10000)); - + for (let i = 0; i < newTriangleCount; i++) { createIsometricTriangle(); } }); - + console.log("Initialization complete"); }); </script> |