پیش‌نمایش طراحی استوری اسلایدر با HTML و CSS

آموزش ساخت اسلایدر استوری با HTML و CSS (بدون نیاز به جاوااسکریپت)

,

در طراحی رابط کاربری فروشگاه‌های اینترنتی، نمایش جذاب دسته‌بندی‌ها و پیشنهادات ویژه اهمیت زیادی دارد. یکی از ترندهای جذاب UI، استفاده از اسلایدر استایل “استوری” است. در این مقاله قصد داریم کدی را بررسی کنیم که بدون نیاز به جاوااسکریپت، با استفاده از HTML و CSS، یک اسلایدر افقی ساده ولی حرفه‌ای ایجاد می‌کند. این طراحی، برای نمایش دسته‌بندی‌ها، محصولات ویژه یا بنرهای تبلیغاتی بسیار مناسب است.

هدف این مقاله

  • آموزش نحوه پیاده‌سازی اسلایدر استوری با HTML و CSS

  • بررسی ساختار کد و استایل‌ها

  • بررسی نکات کاربردی برای سفارشی‌سازی

  • رعایت اصول سئو و تجربه کاربری (UX)

 

معرفی کد

در اینجا یک قطعه کد ساده ولی قدرتمند آورده شده که ظاهر آن شبیه استوری اینستاگرام طراحی شده است. این اسلایدر از Flexbox و overflow افقی برای نمایش آیتم‌ها استفاده می‌کند و نیازی به اسکریپت یا کتابخانه خاصی ندارد.

🧩 کد کامل اسلایدر استوری:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>استوری اسلایدر</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background-color: #f5f5f5;
    }

    .story-container {
      background: #fff;
      padding: 10px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
      overflow-x: auto;
      white-space: nowrap;
      direction: rtl;
    }

    .story-slider {
      display: flex;
      gap: 16px;
    }

    .story {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: opacity 0.3s;
    }

    .story:hover {
      opacity: 0.8;
    }

    .story-ring {
      width: 66px;
      height: 66px;
      border-radius: 50%;
      padding: 2px;
      background: conic-gradient(from 0deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      object-fit: cover;
      background-color: #fff;
    }

    .story span {
      margin-top: 6px;
      font-size: 12px;
      text-align: center;
      color: #333;
      white-space: nowrap;
    }

    .story-container::-webkit-scrollbar {
      display: none;
    }

    .story-container {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }
  </style>
</head>
<body>

  <div class="story-container">
    <div class="story-slider">

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/ffd6e0/ffffff?text=" alt="سوپرمارکت" />
        </div>
        <span>سوپرمارکت</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/d1e8ff/ffffff?text=" alt="مد و پوشاک" />
        </div>
        <span>مد و پوشاک</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/cbf1cc/ffffff?text=" alt="موبایل" />
        </div>
        <span>موبایل</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/ffe5b4/ffffff?text=" alt="زیبایی" />
        </div>
        <span>زیبایی</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/e5d4ef/ffffff?text=" alt="دیجیتال" />
        </div>
        <span>دیجیتال</span>
      </div>

      <div class="story">
        <div class="story-ring">
          <img src="https://placehold.co/64x64/fde2e4/ffffff?text=" alt="آشپزخانه" />
        </div>
        <span>آشپزخانه</span>
      </div>

    </div>
  </div>

</body>
</html>

بررسی ساختار HTML

در بخش HTML، اجزای اصلی اسلایدر به این صورت تعریف شده‌اند:

  • .story-container: عنصر اصلی حاوی اسلایدر که قابلیت اسکرول افقی دارد.

  • .story-slider: مجموعه‌ای از استوری‌ها به صورت Flex.

  • .story: هر آیتم یا استوری شامل تصویر دایره‌ای و یک عنوان است.

  • .story-ring: حلقه رنگی اطراف تصویر که حس استوری را القا می‌کند.

  • <img>: تصویر شاخص هر دسته‌بندی یا موضوع.

  • <span>: عنوان هر استوری.

 

بررسی CSS و طراحی ظاهری

در بخش CSS از تکنیک‌های زیر استفاده شده:

  • Flexbox برای چینش افقی آیتم‌ها

  • Scrollbar مخفی برای زیبایی بیشتر و تجربه کاربری بهتر

  • Conic-gradient برای ساخت حلقه رنگی اطراف تصویر (الهام‌گرفته از استوری اینستاگرام)

  • Transition در حالت hover برای تعامل بیشتر با کاربر

  • استفاده از object-fit: cover برای نمایش صحیح تصویر داخل قاب دایره‌ای

 

پیش‌نمایش خروجی نهایی اسلایدر

در تصویر زیر می‌توانید نمونه خروجی اسلایدر استایل استوری را مشاهده کنید. این اسلایدر به‌صورت افقی قابل اسکرول است و ظاهر مدرنی دارد که به تجربه کاربری جذاب‌تر کمک می‌کند.

استوری اسلایدر

طراحی استوری اسلایدر برای سایت با html و css

مزایای این طراحی

✅ سبک و سریع
✅ بدون نیاز به جاوااسکریپت
✅ سازگار با موبایل (Responsive)
✅ قابل استفاده برای دسته‌بندی‌ها، تبلیغات ویژه، یا استوری محصولات
✅ سفارشی‌سازی آسان (تغییر عکس، رنگ، عنوان‌ها)

نکات کلیدی سئو و تجربه کاربری

  • استفاده از alt برای تصاویر جهت بهبود سئو تصاویر

  • استفاده از تگ‌های معنایی مثل <section>, <span>, <img>

  • نمایش جذاب در موبایل بدون نیاز به پلاگین

  • توجه به سرعت لود به دلیل سبک بودن ساختار و عدم استفاده از JS

 

نحوه استفاده و شخصی‌سازی

برای اضافه کردن این اسلایدر به سایت خود:

  1. کد CSS و HTML را در قالب صفحه یا سایت خود قرار دهید.

  2. تصاویر و متن‌های موجود در تگ <img> و <span> را با محتوای دلخواه خود تغییر دهید.

  3. در صورت نیاز، با تغییر رنگ‌ها یا اندازه‌ها در CSS، ظاهر را با برند خود هماهنگ کنید.

 

نتیجه‌گیری

با استفاده از این کد ساده، می‌توانید یک اسلایدر استایل استوری کاملاً حرفه‌ای و واکنش‌گرا را به راحتی در سایت خود پیاده‌سازی کنید. این نوع طراحی نه تنها ظاهری مدرن و جذاب به رابط کاربری شما می‌دهد، بلکه با توجه به سادگی کد، تأثیر منفی بر سرعت سایت هم ندارد. برای فروشگاه‌ها، بلاگ‌ها یا صفحات فرود، این یک ابزار بصری عالی برای جلب توجه کاربران است.

/0 دیدگاه /توسط
0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *