آموزش ساخت اسلایدر استوری با 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 دیدگاه /توسط

جوجه‌ای که موس شما را دنبال می‌کند! | پروژه تعاملی با HTML, CSS, JavaScript

,

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

ویژگی‌های پروژه

  • طراحی کامل فقط با HTML، CSS و JavaScript بدون نیاز به کتابخانه‌های خارجی

  • دارای حرکت طبیعی و دنبال‌کننده موس

  • انیمیشن راه رفتن جوجه هنگام حرکت

  • انیمیشن نوک زدن جوجه هنگام توقف موس

  • طراحی ریسپانسیو و بهینه برای اجرا در مرورگرهای مدرن

  • قابل استفاده در پروژه‌های آموزشی، سایت‌های سرگرمی یا بخش‌هایی از وب‌سایت‌های تعاملی

 

نحوه عملکرد

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

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

دموی زنده این پروژه را ببینید

اگر هنوز ویدیوی مربوط به این پروژه را مشاهده نکرده‌اید، پیشنهاد می‌کنیم حتماً آن را در کانال ما در یوتیوب ببینید:

👉 @highlearn_ir

کد کامل پروژه

در ادامه می‌توانید کد کامل این پروژه را مشاهده کنید. کافی‌ست آن را در یک فایل با پسوند .html ذخیره کرده و در مرورگر خود باز کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>جوجه طلایی</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            overflow: hidden;
            background-color: #f0f8ff;
            cursor: none;
        }
        
        #seed {
            position: absolute;
            width: 12px;
            height: 12px;
            background-color: #d62c1a;
            border-radius: 50%;
            z-index: 1001;
            pointer-events: none;
            transform: translate(-50%, -50%);
        }
        
        #chicken {
            position: absolute;
            width: 80px;
            height: 80px;
            pointer-events: none;
            z-index: 1000;
            transform-origin: center;
        }
        
        .chicken-body {
            position: absolute;
            width: 50px;
            height: 60px;
            background: #ffeb3b;
            border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
            top: 20px;
            left: 15px;
            box-shadow: inset -3px -3px 7px rgba(0,0,0,0.1);
        }
        
        .chicken-head {
            position: absolute;
            width: 30px;
            height: 30px;
            background: #ffeb3b;
            border-radius: 50%;
            top: 10px;
            left: 40px;
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .eye {
            position: absolute;
            width: 5px;
            height: 5px;
            background: #000;
            border-radius: 50%;
            top: 10px;
            right: 7px;
        }
        
        .beak {
            position: absolute;
            width: 10px;
            height: 7px;
            background: #ff9800;
            border-radius: 50% 50% 0 0 / 100% 100% 0 0;
            top: 17px;
            right: -3px;
            transform: rotate(15deg);
            z-index: 1002;
            transform-origin: left center;
        }
        
        .leg {
            position: absolute;
            width: 4px;
            height: 25px;
            background: #ff9800;
            bottom: -10px;
        }
        
        .leg.left {
            left: 25px;
            transform: rotate(5deg);
        }
        
        .leg.right {
            left: 40px;
            transform: rotate(-5deg);
        }
        
        .foot {
            position: absolute;
            width: 15px;
            height: 5px;
            background: #ff9800;
            bottom: -5px;
            border-radius: 3px;
        }
        
        .foot.left {
            left: -7px;
            transform: rotate(-10deg);
        }
        
        .foot.right {
            right: -7px;
            transform: rotate(10deg);
        }
        
        .wing {
            position: absolute;
            width: 35px;
            height: 35px;
            background: #ffd54f;
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            top: 30px;
            left: 17px;
            transform: rotate(-10deg);
            box-shadow: inset -2px -2px 4px rgba(0,0,0,0.1);
        }
        
        .walking .leg {
            animation: legMove 0.5s infinite alternate;
        }
        
        @keyframes legMove {
            0% { transform: rotate(5deg) translateY(0); }
            50% { transform: rotate(-5deg) translateY(-5px); }
            100% { transform: rotate(5deg) translateY(0); }
        }
        
        .walking .wing {
            animation: wingMove 0.5s infinite alternate;
        }
        
        @keyframes wingMove {
            0% { transform: rotate(-10deg) translateY(0); }
            100% { transform: rotate(-5deg) translateY(-3px); }
        }
        
        .eating {
            animation: eat 0.3s 3;
        }
        
        @keyframes eat {
            0% { transform: rotate(15deg); }
            50% { transform: rotate(0deg) scale(1.2); }
            100% { transform: rotate(15deg); }
        }
    </style>
</head>
<body>
    <div id="seed"></div>
    <div id="chicken">
        <div class="chicken-body"></div>
        <div class="wing"></div>
        <div class="chicken-head">
            <div class="eye"></div>
            <div class="beak" id="beak"></div>
        </div>
        <div class="leg left">
            <div class="foot left"></div>
        </div>
        <div class="leg right">
            <div class="foot right"></div>
        </div>
    </div>

    <script>
        const chicken = document.getElementById('chicken');
        const seed = document.getElementById('seed');
        const beak = document.getElementById('beak');
        let seedX = window.innerWidth / 2;
        let seedY = window.innerHeight / 2;
        let chickenX = seedX - 100;
        let chickenY = seedY - 100;
        let isMoving = false;
        let isEating = false;
        let stopTimer;
        let eatTimer;
        
        // موقعیت دانه ثابت می‌ماند
        seed.style.left = seedX + 'px';
        seed.style.top = seedY + 'px';
        
        document.addEventListener('mousemove', (e) => {
            seedX = e.clientX;
            seedY = e.clientY;
            seed.style.left = seedX + 'px';
            seed.style.top = seedY + 'px';
        });
        
        function animate() {
            const distX = seedX - (chickenX + 40);
            const distY = seedY - (chickenY + 30);
            const distance = Math.sqrt(distX * distX + distY * distY);
            
            if (distance > 15) {
                const speed = Math.min(distance / 8, 12);
                
                chickenX += distX / speed;
                chickenY += distY / speed;
                
                const angle = Math.atan2(distY, distX);
                if (angle > Math.PI/2 || angle < -Math.PI/2) {
                    chicken.style.transform = 'scaleX(-1)';
                } else {
                    chicken.style.transform = 'scaleX(1)';
                }
                
                if (isEating) {
                    isEating = false;
                    beak.classList.remove('eating');
                }
                
                isMoving = true;
                chicken.classList.add('walking');
                clearTimeout(stopTimer);
                stopTimer = setTimeout(() => {
                    isMoving = false;
                    chicken.classList.remove('walking');
                }, 300);
            } else {
                if (!isEating && !isMoving) {
                    isEating = true;
                    beak.classList.add('eating');
                    
                    clearTimeout(eatTimer);
                    eatTimer = setTimeout(() => {
                        beak.classList.remove('eating');
                    }, 1000);
                }
            }
            
            chicken.style.left = chickenX + 'px';
            chicken.style.top = chickenY + 'px';
            
            requestAnimationFrame(animate);
        }
        
        animate();
    </script>
</body>
</html>

 

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

نحوه استفاده

  1. کد را در فایل HTML جدید کپی کنید.

  2. آن را با مرورگر (Chrome, Firefox یا …) باز کنید.

  3. نشانگر موس را حرکت دهید و از دنبال کردن آن توسط جوجه لذت ببرید!

 

نتیجه‌گیری

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

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