آموزش جامع Particles.js

📚معرفی و نصب

Particles.js یک کتابخانه سبک جاوااسکریپت است که با canvas ذرات متحرک زیبایی ایجاد می‌کند. بسیار مناسب برای hero section، صفحه loading و پس‌زمینه‌های تعاملی.

نصب

<script src="particles.min.js"></script>

ساختار HTML

<!-- div با ارتفاع مشخص و position:relative -->
<div id="particles-js" style="position:relative; width:100%; height:400px; background:#0d0d2b;"></div>

راه‌اندازی پایه

particlesJS('particles-js', {
  particles: {
    number:  { value: 80 },
    color:   { value: '#88ce02' },
    shape:   { type: 'circle' },
    opacity: { value: 0.5 },
    size:    { value: 3 },
    move:    { enable: true, speed: 3 }
  },
  interactivity: {
    events: {
      onhover: { enable: true,  mode: 'repulse' },
      onclick: { enable: true,  mode: 'push' }
    }
  }
});

⚙پیکربندی پایه

particlesJS('p-demo1', {
  particles: {
    number:  { value: 60, density: { enable: true, value_area: 800 } },
    color:   { value: '#88ce02' },
    shape:   { type: 'circle' },
    opacity: { value: 0.7, random: true },
    size:    { value: 4, random: true },
    line_linked: { enable: false },
    move:    { enable: true, speed: 2, out_mode: 'out' }
  },
  interactivity: { events: { onhover: { enable: false }, onclick: { enable: false } } },
  retina_detect: true
});

▶حرکت ذرات (Move)

particlesJS('p-demo2', {
  particles: {
    number: { value: 50 },
    color:  { value: ['#ff6b6b', '#ffd93d', '#6bcfff', '#88ce02', '#ff9f43'] },
    shape:  { type: 'circle' },
    opacity: { value: 0.8, random: true },
    size:    { value: 5, random: true },
    line_linked: { enable: false },
    move: {
      enable: true, speed: 3,
      direction: 'top',     // حرکت به سمت بالا
      straight: false, random: true,
      out_mode: 'out'        // از پایین دوباره وارد می‌شود
    }
  }
});

🕷خطوط اتصال (line_linked)

particles: {
  line_linked: {
    enable:   true,
    distance: 150,      // حداکثر فاصله برای رسم خط (px)
    color:    '#ffffff',
    opacity:  0.4,
    width:    1
  }
}

particlesJS('p-demo3', {
  particles: {
    number: { value: 70 },
    color:  { value: '#aaaaff' },
    shape:  { type: 'circle' },
    opacity: { value: 0.6 },
    size:    { value: 3 },
    line_linked: {
      enable: true, distance: 130,
      color: '#6666ff', opacity: 0.4, width: 1
    },
    move: { enable: true, speed: 1.5, out_mode: 'bounce' }
  }
});

🖰تعامل با ماوس

particlesJS('p-demo4', {
  particles: {
    number: { value: 100 },
    color:  { value: '#ff6b6b' },
    shape:  { type: 'circle' },
    opacity: { value: 0.7 },
    size:    { value: 4, random: true },
    line_linked: { enable: true, distance: 100, color: '#ff4444', opacity: 0.3, width: 1 },
    move: { enable: true, speed: 2, out_mode: 'bounce' }
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: { enable: true,  mode: 'repulse' },
      onclick: { enable: true,  mode: 'push' },
      resize: true
    },
    modes: {
      repulse: { distance: 100, duration: 0.4 },
      push:    { particles_nb: 4 }
    }
  },
  retina_detect: true
});

🎪شکل‌های مختلف (Shapes)

Particles.js از شکل‌های مختلفی پشتیبانی می‌کند: circle, edge (مربع), triangle, polygon, star, image.

shape: {
  type: 'star',          // یا 'polygon', 'triangle', 'edge'
  stroke: { width: 1, color: '#fff' },
  polygon: { nb_sides: 6 }, // تعداد اضلاع برای polygon
  image: {
    src: 'img/particle.png',
    width: 100, height: 100
  }
}

particlesJS('p-demo5', {
  particles: {
    number: { value: 50 },
    color:  { value: ['#ffd700', '#ff6b6b', '#88ce02', '#6bcfff'] },
    shape:  { type: 'star', stroke: { width: 0 } },
    opacity: { value: 0.8, random: true },
    size:    { value: 8, random: true },
    line_linked: { enable: false },
    move: { enable: true, speed: 2, random: true }
  },
  interactivity: {
    events: { onhover: { enable: true, mode: 'grab' }, onclick: { enable: true, mode: 'push' } },
    modes:  { grab: { distance: 180, line_linked: { opacity: 0.8 } } }
  }
});

🌈پریست‌های آماده

❄ پریست برف

🌞 پریست کهکشان

// پریست برف
particlesJS('snow', {
  particles: {
    number: { value: 80 },
    color:  { value: '#ffffff' },
    shape:  { type: 'circle' },
    opacity: { value: 0.7, random: true },
    size:    { value: 4, random: true },
    line_linked: { enable: false },
    move: { enable: true, speed: 2, direction: 'bottom', random: true, out_mode: 'out' }
  }
});

// پریست کهکشان
particlesJS('galaxy', {
  particles: {
    number: { value: 120 },
    color:  { value: ['#ffffff', '#ffffaa', '#aaaaff', '#88ce02'] },
    shape:  { type: 'circle' },
    opacity: { value: 0.9, random: true, anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } },
    size:    { value: 2, random: true },
    line_linked: { enable: false },
    move: { enable: true, speed: 0.5, random: true }
  }
});

🏆Hero Section کامل

ترکیب Particles.js با محتوای روی صفحه برای ساخت یک Hero Section حرفه‌ای:

<!-- HTML ساختار -->
<div class="hero" style="position:relative; height:100vh; background:#0d0d2b;">
  <div id="particles-js" style="position:absolute; width:100%; height:100%;"></div>
  <div class="content" style="position:relative; z-index:10; text-align:center; color:white;">
    <h1>عنوان</h1>
  </div>
</div>

// JavaScript
particlesJS('particles-js', {
  particles: {
    number: { value: 100 },
    color:  { value: '#88ce02' },
    shape:  { type: 'circle' },
    opacity: { value: 0.5, random: true },
    size:    { value: 3, random: true },
    line_linked: { enable: true, distance: 150, color: '#88ce02', opacity: 0.2, width: 1 },
    move: { enable: true, speed: 2, out_mode: 'bounce' }
  },
  interactivity: {
    events: {
      onhover: { enable: true, mode: 'grab' },
      onclick: { enable: true, mode: 'push' }
    },
    modes: { grab: { distance: 200, line_linked: { opacity: 0.6 } } }
  },
  retina_detect: true
});

🚀زمین بازی کد (Playground)

پیکربندی Particles.js را تغییر بده و افکت ذرات را زنده ببین. تعداد، رنگ، حرکت و تعامل ماوس را امتحان کن و ▶ اجرا را بزن. نسخهٔ ۲.۰.۰ آفلاین بارگذاری می‌شود.