طراحی نوار جستجو انیمیشنی با CSS — راهنمای کامل

نوار جستجو یکی از عناصر کلیدی در رابط‌های کاربری است. افزودن انیمیشن‌های مناسب می‌تواند تجربه کاربر را بهبود دهد، باعث جلب توجه شود و در عین حال از آشفتگی بصری جلوگیری کند. در این مقاله به روش‌های عملی و قابل اجرا برای طراحی نوار جستجوی انیمیشنی تنها با CSS (و در صورت نیاز با اندکی جاوااسکریپت برای دسترسی) می‌پردازیم.

چرا نوار جستجوی انیمیشنی؟

• افزایش تعامل: انیمیشن‌های نرم کاربران را دعوت به تعامل می‌کنند.
• صرفه‌جویی در فضا: نوارهای جمع‌شونده فضای صفحه را بهینه می‌کنند.
• هویت بصری: انیمیشن‌های کوچک می‌توانند برندینگ را تقویت کنند.

الگوها و سناریوهای رایج

• نوار گسترش‌یاب (expanding) هنگام کلیک یا فوکوس
• آیکون تبدیل‌شونده (مثلاً از آیکون جستجو به ایکون بستن)
• استفاده از placeholder متحرک یا برچسب شناور
• نمایش پیشنهادات (autocomplete) با انیمیشن fade/slide

مثال عملی: نوار جستجوی جمع‌شونده با CSS خالص

<form class="search" role="search">
  <label for="q" class="search__label">
    <svg class="search__icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
      <path d="M21 21l-4.35-4.35" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
      <circle cx="11" cy="11" r="6" stroke="currentColor" stroke-width="2" fill="none"></circle>
    </svg>
    <input id="q" type="search" class="search__input" placeholder="جستجو..." aria-label="جستجو">
  </label>
</form>

در این HTML از ساختار ساده label+input استفاده شده که برای دسترسی (accessibility) مناسب است. آیکون SVG داخل برچسب قرار دارد تا کلیک روی آیکون هم فوکوس روی input را فعال کند.

.search{
  display:inline-block;
}
.search__label{
  display:flex;
  align-items:center;
  background:#fff;
  border-radius:24px;
  padding:6px 8px;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
  transition:width 0.35s ease, box-shadow 0.2s;
  width:40px; /* اندازه اولیه فقط آیکون */  overflow:hidden;
}
.search__icon{
  color:#555;
  flex:0 0 auto;
}
.search__input{
  border:0;
  outline:none;
  padding:6px 8px;
  min-width:0;
  width:0;
  background:transparent;
  transition:width 0.35s ease, opacity 0.35s ease;
  opacity:0;
  font-size:14px;
}

/* وقتی والد فوکوس یا :focus-within دارد، گسترش می‌دهیم */.search__label:focus-within{
  width:260px;
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
}
.search__label:focus-within .search__input{
  width:180px;
  opacity:1;
}

در CSS بالا از خاصیت :focus-within برای تشخیص فوکوس درون label استفاده شده و با transition نرمی، عرض برچسب و فیلد ورودی افزایش می‌یابد. این روش بدون جاوااسکریپت کار می‌کند و تجربه دسترسی را حفظ می‌کند.

بهینه‌سازی‌ها و نکات پیشرفته

• prefers-reduced-motion: برای کاربران حساس به حرکت، انیمیشن‌ها را غیرفعال یا کند کنید.
• دسترسی (ARIA): از aria-label یا متن مرئی استفاده کنید. کلیدهای میانبر را در نظر بگیرید.
• پاسخگویی (Responsive): اندازه‌های مختلف برای موبایل و دسکتاپ تعریف کنید.
• تبدیل آیکون: برای تغییر آیکون به بستن، می‌توان با اضافه کردن یک دکمه و transition روی opacity/transform کار کرد.

@media (prefers-reduced-motion: reduce) {
  .search__label,
  .search__input {
    transition: none;
  }
}

کد بالا انیمیشن‌ها را در صورت تنظیم سیستم کاربر روی کاهش حرکت حذف می‌کند—این یک بهترین‌روش مهم برای دسترسی است.

نمونه: تبدیل آیکون به دکمه بستن (با کمی جاوااسکریپت)

<div class="search-wrap">
  <input id="s" type="search" class="s-input" aria-label="جستجو">
  <button class="s-toggle" aria-label="پاک کردن">✕</button>
</div>

این ساختار یک دکمه برای پاک کردن (یا بستن) فراهم می‌کند. برای عملکرد دکمه می‌توانید از JS استفاده کنید تا وورک‌فلوهای اضافه مانند پاک کردن متن اجرا شود.

document.querySelector('.s-toggle').addEventListener('click', function(){
  const input = document.querySelector('.s-input');
  input.value = '';
  input.focus();
});

این اسکریپت ساده مقدار ورودی را پاک می‌کند و فوکوس را بازمی‌گرداند تا کاربر بتواند سریع دوباره جستجو کند. اگر بخواهید بدون JS هم قابل‌استفاده باشد، دکمه را از نوع reset داخل فرم قرار دهید.

جدول مقایسه خصوصیات CSS مفید

بهترین روش‌ها و نکات نهایی

• همیشه دسترسی (keyboard و screen reader) را آزمایش کنید.
• انیمیشن‌ها را کوتاه و ملایم نگه دارید (200–400ms معمولاً مناسب است).
• برای موبایل، اندازه ناحیه کلیک را بزرگتر کنید تا لمس آسان‌تر باشد.
• از رنگ‌ها و کنتراست مناسب برای خوانایی استفاده کنید.
• آنالیز عملکرد: انیمیشن‌های سنگین می‌توانند مصرف انرژی و بار پردازشی را افزایش دهند.

در مجموع، با ترکیب ساده‌ای از HTML معنایی، CSS مدرن (مثل :focus-within و prefers-reduced-motion) و در صورت نیاز اندکی جاوااسکریپت برای تعامل، می‌توانید نوار جستجوی انیمیشنی زیبا، سبک و قابل‌دسترس بسازید که هم تجربه کاربری را بالا می‌برد و هم عملکرد صفحه را حفظ می‌کند.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال