| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Floating Particles</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .particle { |
| position: absolute; |
| pointer-events: none; |
| opacity: 0; |
| animation: float-up linear forwards; |
| will-change: transform; |
| } |
| |
| @keyframes float-up { |
| 0% { |
| transform: translateY(0) rotate(0deg); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 1; |
| } |
| 90% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-100vh) rotate(360deg); |
| opacity: 0; |
| } |
| } |
| |
| .control-panel { |
| transition: all 0.3s ease; |
| } |
| |
| .control-panel.collapsed { |
| transform: translateX(calc(100% - 40px)); |
| } |
| |
| .toggle-btn { |
| transition: transform 0.3s ease; |
| } |
| |
| .control-panel.collapsed .toggle-btn { |
| transform: rotate(180deg); |
| } |
| |
| .clip-triangle { |
| clip-path: polygon(50% 0%, 0% 100%, 100% 100%); |
| } |
| |
| body { |
| overflow: hidden; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 min-h-screen relative"> |
| <div id="particles-container" class="absolute inset-0 overflow-hidden"></div> |
| |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center z-10"> |
| <h1 class="text-5xl font-bold text-white mb-4">Floating Particles</h1> |
| <p class="text-xl text-gray-300">Customizable particle animation</p> |
| </div> |
| |
| |
| <div id="control-panel" class="control-panel fixed right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 p-4 rounded-l-lg shadow-lg z-50 w-64"> |
| <div class="flex justify-between items-center mb-4"> |
| <h2 class="text-xl font-bold text-white">Particle Settings</h2> |
| <button id="toggle-panel" class="toggle-btn bg-gray-700 text-white p-2 rounded-full"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-4"> |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Particle Count</label> |
| <input id="particle-count" type="range" min="1" max="500" value="100" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>1</span> |
| <span>500</span> |
| </div> |
| <div class="text-center text-sm text-gray-300 mt-1"> |
| <span id="count-value">100</span> particles |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Particle Size</label> |
| <input id="particle-size" type="range" min="2" max="30" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>2px</span> |
| <span>30px</span> |
| </div> |
| <div class="text-center text-sm text-gray-300 mt-1"> |
| <span id="size-value">8</span>px |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Animation Duration (s)</label> |
| <input id="animation-duration" type="range" min="2" max="20" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>2</span> |
| <span>20</span> |
| </div> |
| <div class="text-center text-sm text-gray-300 mt-1"> |
| <span id="duration-value">8</span> seconds |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Spawn Rate</label> |
| <input id="spawn-rate" type="range" min="100" max="2000" value="500" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-xs text-gray-400"> |
| <span>Fast</span> |
| <span>Slow</span> |
| </div> |
| <div class="text-center text-sm text-gray-300 mt-1"> |
| <span id="rate-value">500</span>ms |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Particle Color</label> |
| <div class="flex flex-wrap gap-2 mt-2"> |
| <button data-color="#3B82F6" class="color-btn w-6 h-6 rounded-full bg-blue-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#EF4444" class="color-btn w-6 h-6 rounded-full bg-red-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#10B981" class="color-btn w-6 h-6 rounded-full bg-green-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#F59E0B" class="color-btn w-6 h-6 rounded-full bg-yellow-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#8B5CF6" class="color-btn w-6 h-6 rounded-full bg-purple-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#EC4899" class="color-btn w-6 h-6 rounded-full bg-pink-500 border-2 border-transparent hover:border-white"></button> |
| <button data-color="#FFFFFF" class="color-btn w-6 h-6 rounded-full bg-white border-2 border-transparent hover:border-white"></button> |
| <button data-color="random" class="color-btn w-6 h-6 rounded-full bg-gradient-to-r from-red-500 via-yellow-500 to-blue-500 border-2 border-transparent hover:border-white flex items-center justify-center"> |
| <i class="fas fa-random text-xs text-white"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Particle Shape</label> |
| <div class="flex flex-wrap gap-2 mt-2"> |
| <button data-shape="circle" class="shape-btn w-8 h-8 rounded-full bg-gray-700 border-2 border-blue-500 flex items-center justify-center"> |
| <div class="w-4 h-4 rounded-full bg-blue-500"></div> |
| </button> |
| <button data-shape="square" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
| <div class="w-4 h-4 bg-blue-500"></div> |
| </button> |
| <button data-shape="triangle" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
| <div class="w-4 h-4 bg-blue-500 clip-triangle"></div> |
| </button> |
| <button data-shape="star" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
| <i class="fas fa-star text-blue-500 text-xs"></i> |
| </button> |
| <button data-shape="heart" class="shape-btn w-8 h-8 rounded bg-gray-700 border-2 border-transparent hover:border-blue-500 flex items-center justify-center"> |
| <i class="fas fa-heart text-blue-500 text-xs"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-sm font-medium text-gray-300 mb-1">Movement Style</label> |
| <select id="movement-style" class="w-full bg-gray-700 text-white rounded p-2 text-sm"> |
| <option value="float">Float Up</option> |
| <option value="swirl">Swirling</option> |
| <option value="zigzag">Zigzag</option> |
| <option value="expand">Expanding</option> |
| </select> |
| </div> |
| |
| <div class="pt-2 grid grid-cols-2 gap-2"> |
| <button id="start-btn" class="bg-green-600 hover:bg-green-500 text-white py-2 px-4 rounded-lg transition"> |
| <i class="fas fa-play mr-1"></i> Start |
| </button> |
| <button id="stop-btn" class="bg-red-600 hover:bg-red-500 text-white py-2 px-4 rounded-lg transition"> |
| <i class="fas fa-stop mr-1"></i> Stop |
| </button> |
| <button id="reset-btn" class="col-span-2 bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition"> |
| <i class="fas fa-sync mr-1"></i> Reset |
| </button> |
| <button id="burst-btn" class="col-span-2 bg-blue-600 hover:bg-blue-500 text-white py-2 px-4 rounded-lg transition"> |
| <i class="fas fa-bolt mr-1"></i> Particle Burst |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| let settings = { |
| count: 100, |
| size: 8, |
| duration: 8, |
| spawnRate: 500, |
| color: '#3B82F6', |
| shape: 'circle', |
| movement: 'float', |
| randomColor: false, |
| isRunning: false |
| }; |
| |
| |
| const container = document.getElementById('particles-container'); |
| const countSlider = document.getElementById('particle-count'); |
| const sizeSlider = document.getElementById('particle-size'); |
| const durationSlider = document.getElementById('animation-duration'); |
| const spawnRateSlider = document.getElementById('spawn-rate'); |
| const movementStyle = document.getElementById('movement-style'); |
| const colorButtons = document.querySelectorAll('.color-btn'); |
| const shapeButtons = document.querySelectorAll('.shape-btn'); |
| const startBtn = document.getElementById('start-btn'); |
| const stopBtn = document.getElementById('stop-btn'); |
| const resetBtn = document.getElementById('reset-btn'); |
| const burstBtn = document.getElementById('burst-btn'); |
| const togglePanelBtn = document.getElementById('toggle-panel'); |
| const controlPanel = document.getElementById('control-panel'); |
| |
| |
| const countValue = document.getElementById('count-value'); |
| const sizeValue = document.getElementById('size-value'); |
| const durationValue = document.getElementById('duration-value'); |
| const rateValue = document.getElementById('rate-value'); |
| |
| |
| let spawnInterval; |
| let resizeTimeout; |
| |
| |
| updateSliderValues(); |
| updateValueDisplays(); |
| setActiveColorButton(); |
| setActiveShapeButton(); |
| startAnimation(); |
| |
| |
| window.addEventListener('resize', function() { |
| clearTimeout(resizeTimeout); |
| resizeTimeout = setTimeout(handleResize, 200); |
| }); |
| |
| countSlider.addEventListener('input', function() { |
| settings.count = parseInt(this.value); |
| updateValueDisplays(); |
| }); |
| |
| sizeSlider.addEventListener('input', function() { |
| settings.size = parseInt(this.value); |
| updateValueDisplays(); |
| }); |
| |
| durationSlider.addEventListener('input', function() { |
| settings.duration = parseInt(this.value); |
| updateValueDisplays(); |
| }); |
| |
| spawnRateSlider.addEventListener('input', function() { |
| settings.spawnRate = parseInt(this.value); |
| updateValueDisplays(); |
| if (settings.isRunning) { |
| restartAnimation(); |
| } |
| }); |
| |
| movementStyle.addEventListener('change', function() { |
| settings.movement = this.value; |
| }); |
| |
| colorButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| const color = this.getAttribute('data-color'); |
| if (color === 'random') { |
| settings.randomColor = true; |
| } else { |
| settings.color = color; |
| settings.randomColor = false; |
| } |
| setActiveColorButton(); |
| }); |
| }); |
| |
| shapeButtons.forEach(btn => { |
| btn.addEventListener('click', function() { |
| settings.shape = this.getAttribute('data-shape'); |
| setActiveShapeButton(); |
| }); |
| }); |
| |
| startBtn.addEventListener('click', startAnimation); |
| stopBtn.addEventListener('click', stopAnimation); |
| resetBtn.addEventListener('click', resetSettings); |
| burstBtn.addEventListener('click', createParticleBurst); |
| togglePanelBtn.addEventListener('click', togglePanel); |
| |
| |
| function createParticles() { |
| const width = window.innerWidth; |
| const height = window.innerHeight; |
| |
| for (let i = 0; i < settings.count; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const x = Math.random() * width; |
| const y = Math.random() * height + height; |
| particle.style.left = `${x}px`; |
| particle.style.top = `${y}px`; |
| |
| |
| const sizeVariation = Math.random() * settings.size * 0.5; |
| const finalSize = settings.size + sizeVariation; |
| particle.style.width = `${finalSize}px`; |
| particle.style.height = `${finalSize}px`; |
| |
| |
| let color; |
| if (settings.randomColor) { |
| color = getRandomColor(); |
| } else { |
| color = settings.color; |
| } |
| particle.style.backgroundColor = color; |
| |
| |
| if (settings.shape === 'circle') { |
| particle.style.borderRadius = '50%'; |
| } else if (settings.shape === 'square') { |
| particle.style.borderRadius = '0'; |
| } else if (settings.shape === 'triangle') { |
| particle.style.borderRadius = '0'; |
| particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)'; |
| } else if (settings.shape === 'star') { |
| particle.style.backgroundColor = 'transparent'; |
| particle.innerHTML = '<i class="fas fa-star"></i>'; |
| adjustIconStyles(particle, color, finalSize); |
| } else if (settings.shape === 'heart') { |
| particle.style.backgroundColor = 'transparent'; |
| particle.innerHTML = '<i class="fas fa-heart"></i>'; |
| adjustIconStyles(particle, color, finalSize); |
| } |
| |
| |
| const durationVariation = Math.random() * settings.duration * 0.5; |
| const finalDuration = settings.duration + durationVariation; |
| particle.style.animationDuration = `${finalDuration}s`; |
| |
| |
| let animationName = 'float-up'; |
| let animationProperties = ''; |
| |
| switch(settings.movement) { |
| case 'swirl': |
| animationProperties = `cubic-bezier(0.4, 0, 0.2, 1) forwards`; |
| particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 200}px`); |
| particle.style.animation = `swirl-up ${finalDuration}s ${animationProperties}`; |
| break; |
| case 'zigzag': |
| animationProperties = `ease-in-out forwards`; |
| particle.style.setProperty('--x-offset', `${(Math.random() - 0.5) * 300}px`); |
| particle.style.animation = `zigzag-up ${finalDuration}s ${animationProperties}`; |
| break; |
| case 'expand': |
| animationProperties = `ease-out forwards`; |
| particle.style.animation = `expand-up ${finalDuration}s ${animationProperties}`; |
| particle.style.setProperty('--scale-end', `${1 + Math.random() * 0.5}`); |
| break; |
| default: |
| animationProperties = `linear forwards`; |
| const xMovement = (Math.random() - 0.5) * 100; |
| particle.style.setProperty('--x-movement', `${xMovement}px`); |
| particle.style.animation = `float-up ${finalDuration}s ${animationProperties}`; |
| } |
| |
| |
| particle.style.animationDelay = `${Math.random() * 2}s`; |
| |
| container.appendChild(particle); |
| |
| |
| setTimeout(() => { |
| if (particle.parentNode) { |
| particle.remove(); |
| } |
| }, finalDuration * 1000 + 2000); |
| } |
| } |
| |
| function adjustIconStyles(particle, color, size) { |
| particle.style.display = 'flex'; |
| particle.style.alignItems = 'center'; |
| particle.style.justifyContent = 'center'; |
| const icon = particle.querySelector('i'); |
| if (icon) { |
| icon.style.color = color; |
| icon.style.fontSize = `${size}px`; |
| } |
| } |
| |
| function createParticleBurst() { |
| const burstCount = Math.floor(settings.count * 1.5); |
| const width = window.innerWidth; |
| const height = window.innerHeight; |
| |
| for (let i = 0; i < burstCount; i++) { |
| const particle = document.createElement('div'); |
| particle.classList.add('particle'); |
| |
| |
| const centerX = width / 2; |
| const centerY = height / 2; |
| particle.style.left = `${centerX}px`; |
| particle.style.top = `${centerY}px`; |
| |
| |
| const sizeVariation = Math.random() * settings.size * 0.8; |
| const finalSize = settings.size + sizeVariation; |
| particle.style.width = `${finalSize}px`; |
| particle.style.height = `${finalSize}px`; |
| |
| |
| let color; |
| if (settings.randomColor) { |
| color = getRandomColor(); |
| } else { |
| color = settings.color; |
| } |
| particle.style.backgroundColor = color; |
| |
| |
| if (settings.shape === 'circle') { |
| particle.style.borderRadius = '50%'; |
| } else if (settings.shape === 'square') { |
| particle.style.borderRadius = '0'; |
| } else if (settings.shape === 'triangle') { |
| particle.style.borderRadius = '0'; |
| particle.style.clipPath = 'polygon(50% 0%, 0% 100%, 100% 100%)'; |
| } else if (settings.shape === 'star') { |
| particle.style.backgroundColor = 'transparent'; |
| particle.innerHTML = '<i class="fas fa-star"></i>'; |
| adjustIconStyles(particle, color, finalSize); |
| } else if (settings.shape === 'heart') { |
| particle.style.backgroundColor = 'transparent'; |
| particle.innerHTML = '<i class="fas fa-heart"></i>'; |
| adjustIconStyles(particle, color, finalSize); |
| } |
| |
| |
| const angle = Math.random() * Math.PI * 2; |
| const distance = 50 + Math.random() * 150; |
| const burstDuration = 1 + Math.random() * 2; |
| |
| particle.style.transform = `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`; |
| particle.style.transition = `transform ${burstDuration}s ease-out, opacity ${burstDuration}s ease-out`; |
| particle.style.opacity = '0'; |
| |
| container.appendChild(particle); |
| |
| |
| setTimeout(() => { |
| if (particle.parentNode) { |
| particle.remove(); |
| } |
| }, burstDuration * 1000 + 100); |
| } |
| } |
| |
| function getRandomColor() { |
| const hue = Math.floor(Math.random() * 360); |
| return `hsl(${hue}, 80%, 60%)`; |
| } |
| |
| function setActiveColorButton() { |
| colorButtons.forEach(btn => { |
| const btnColor = btn.getAttribute('data-color'); |
| if (settings.randomColor && btnColor === 'random') { |
| btn.classList.add('border-white'); |
| } else if (!settings.randomColor && btnColor === settings.color) { |
| btn.classList.add('border-white'); |
| } else { |
| btn.classList.remove('border-white'); |
| } |
| }); |
| } |
| |
| function setActiveShapeButton() { |
| shapeButtons.forEach(btn => { |
| const btnShape = btn.getAttribute('data-shape'); |
| if (btnShape === settings.shape) { |
| btn.classList.add('border-blue-500'); |
| } else { |
| btn.classList.remove('border-blue-500'); |
| } |
| }); |
| } |
| |
| function startAnimation() { |
| if (!settings.isRunning) { |
| settings.isRunning = true; |
| startBtn.disabled = true; |
| stopBtn.disabled = false; |
| createParticles(); |
| spawnInterval = setInterval(createParticles, settings.spawnRate); |
| } |
| } |
| |
| function stopAnimation() { |
| if (settings.isRunning) { |
| settings.isRunning = false; |
| startBtn.disabled = false; |
| stopBtn.disabled = true; |
| clearInterval(spawnInterval); |
| } |
| } |
| |
| function restartAnimation() { |
| stopAnimation(); |
| startAnimation(); |
| } |
| |
| function resetSettings() { |
| stopAnimation(); |
| |
| settings = { |
| count: 100, |
| size: 8, |
| duration: 8, |
| spawnRate: 500, |
| color: '#3B82F6', |
| shape: 'circle', |
| movement: 'float', |
| randomColor: false, |
| isRunning: false |
| }; |
| |
| countSlider.value = settings.count; |
| sizeSlider.value = settings.size; |
| durationSlider.value = settings.duration; |
| spawnRateSlider.value = settings.spawnRate; |
| movementStyle.value = settings.movement; |
| |
| updateValueDisplays(); |
| setActiveColorButton(); |
| setActiveShapeButton(); |
| |
| |
| container.innerHTML = ''; |
| } |
| |
| function togglePanel() { |
| controlPanel.classList.toggle('collapsed'); |
| } |
| |
| function updateSliderValues() { |
| countSlider.value = settings.count; |
| sizeSlider.value = settings.size; |
| durationSlider.value = settings.duration; |
| spawnRateSlider.value = settings.spawnRate; |
| movementStyle.value = settings.movement; |
| } |
| |
| function updateValueDisplays() { |
| countValue.textContent = settings.count; |
| sizeValue.textContent = settings.size; |
| durationValue.textContent = settings.duration; |
| rateValue.textContent = settings.spawnRate; |
| } |
| |
| function handleResize() { |
| |
| } |
| |
| |
| const styleElement = document.createElement('style'); |
| styleElement.textContent = ` |
| @keyframes swirl-up { |
| 0% { |
| transform: translateY(0) rotate(0deg) translateX(0); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 1; |
| } |
| 90% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-100vh) rotate(720deg) translateX(var(--x-offset)); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes zigzag-up { |
| 0%, 100% { |
| transform: translateY(0) translateX(0); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 1; |
| } |
| 20% { |
| transform: translateY(-20vh) translateX(-50px); |
| } |
| 40% { |
| transform: translateY(-40vh) translateX(50px); |
| } |
| 60% { |
| transform: translateY(-60vh) translateX(-30px); |
| } |
| 80% { |
| transform: translateY(-80vh) translateX(30px); |
| } |
| 90% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-100vh) translateX(var(--x-offset)); |
| opacity: 0; |
| } |
| } |
| |
| @keyframes expand-up { |
| 0% { |
| transform: translateY(0) scale(1); |
| opacity: 0; |
| } |
| 10% { |
| opacity: 1; |
| } |
| 90% { |
| opacity: 1; |
| } |
| 100% { |
| transform: translateY(-100vh) scale(var(--scale-end)); |
| opacity: 0; |
| } |
| } |
| `; |
| document.head.appendChild(styleElement); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=hikkann/fp-test" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body> |
| </html> |
