مقدمه
انیمیشن ذرات در HTML، یک تکنیک جذاب است که به طراحان وب این امکان را می‌دهد تا با استفاده از CSS و JavaScript، جلوه‌های بصری جالب و تعاملی ایجاد کنند. این انیمیشن‌ها می‌توانند به زیبایی وبسایت شما افزوده و تجربه کاربری را بهبود ببخشند. در اینجا به بررسی نمونه قالب انیمیشن ذرات می‌پردازیم.
ساختار HTML
برای شروع، ابتدا نیاز به یک ساختار HTML ساده داریم. به عنوان مثال:
```html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=
- 0">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="particle-container"></div>
<script src="script.js"></script>
</body>
</html>
```
در اینجا، یک div با کلاس `particle-container` ایجاد کردیم که فضایی برای ذرات ما خواهد بود.
CSS برای طراحی ذرات
حالا بیایید به CSS بپردازیم. اینجا می‌توانیم شکل و اندازه ذرات را تعریف کنیم:
```css
body {
margin: 0;
overflow: hidden;
background-color: #000;
}
.particle-container {
position: relative;
width: 100vw;
height: 100vh;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: float 3s infinite ease-in-out;
}
@keyframes float {
0% { transform: translateY(0); }
50% { transform: translateY(-50px); }
100% { transform: translateY(0); }
}
```
جاوا اسکریپت برای تولید ذرات
حالا بیایید با استفاده از JavaScript، ذرات را به صورت داینامیک ایجاد کنیم:
```javascript
const container = document.querySelector('.particle-container');
for (let i = 0; i < 100; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
// موقعیت و زمان انیمیشن تصادفی
particle.style.left = Math.random() * 100 + 'vw';
particle.style.animationDuration = Math.random() * 2 + 1 + 's';
container.appendChild(particle);
}
```
نتیجه‌گیری
در نهایت، با این کدها، شما می‌توانید انیمیشن زیبای ذرات را بر روی وبسایت خود ایجاد کنید. این انیمیشن‌ها نه تنها جذاب هستند بلکه می‌توانند به تعامل کاربران کمک کنند. سعی کنید با تغییرات مختلف، جلوه‌های بهتری بسازید!
