آموزش ساخت انیمیشن لودینگ دایره‌ای با CSS

,

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

مقدمه

انیمیشن‌های لودینگ به کاربران نشان می‌دهند که محتوای در حال بارگذاری است. در این آموزش، یک لودینگ دایره‌ای با سه نیم‌دایره رنگی ایجاد می‌کنیم که به صورت هماهنگ می‌چرخند.

ساختار HTML

<div class="loading-container">
    <div class="circle-loader">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <div class="loading-text">loading ....</div>
</div>

  • loading-container: ظرف اصلی برای مرتب کردن عناصر

  • circle-loader: ظرف دایره‌های انیمیشنی

  • circle: سه دایره با رنگ‌های مختلف

  • loading-text: متن نمایشی زیر انیمیشن

استایل‌دهی با CSS

بخش‌های اصلی:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: white;
    margin: 0;
    font-family: Arial, sans-serif;
}

  • صفحه را به صورت flex تنظیم می‌کنیم تا محتوا در مرکز قرار گیرد

  • ارتفاع viewport را کامل می‌گیرد

  • پس‌زمینه سفید برای تمیز بودن طراحی

ظرف لودینگ:

.loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

  • عناصر را به صورت عمودی مرتب می‌کند

  • فاصله 20px بین انیمیشن و متن ایجاد می‌کند

متن لودینگ:

.loading-text {
    font-size: 14px;
    color: #333;
    letter-spacing: 2px;
    animation: pulse 1.5s infinite ease-in-out;
}

  • فونت و رنگ مناسب برای خوانایی

  • انیمیشن pulse برای جلوه‌ی چشمک زن

دایره‌های انیمیشنی:

.circle-loader {
    width: 80px;
    height: 80px;
    position: relative;
}

.circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: rotate 2s linear infinite;
    box-sizing: border-box;
}

  • اندازه ثابت برای ظرف دایره‌ها

  • position: relative برای موقعیت‌دهی مطلق دایره‌های داخلی

  • border-radius: 50% برای شکل دایره‌ای

  • انیمیشن rotate با مدت زمان 2 ثانیه

تنظیمات هر دایره:

.circle:nth-child(1) {
    border: 4px solid transparent;
    border-top-color: #3498db;
    border-bottom-color: #3498db;
}

.circle:nth-child(2) {
    border: 4px solid transparent;
    border-left-color: #e74c3c;
    border-right-color: #e74c3c;
    animation-delay: 0.5s;
    transform: rotate(30deg);
}

.circle:nth-child(3) {
    border: 4px solid transparent;
    border-top-color: #2ecc71;
    border-bottom-color: #2ecc71;
    animation-delay: 1s;
    transform: rotate(60deg);
}

  • هر دایره رنگ مخصوص به خود را دارد

  • animation-delay برای ایجاد افکت موجی

  • transform: rotate برای چیدمان اولیه نیم‌دایره‌ها

انیمیشن‌ها:

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.8);
    }
    100% {
        transform: rotate(360deg) scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

  • rotate: چرخش 360 درجه همراه با تغییر اندازه

  • pulse: تغییر تدریجی شفافیت متن

کد کامل

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circular Loading Animation</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: white;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        
        .loading-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        
        .loading-text {
            font-size: 14px;
            color: #333;
            letter-spacing: 2px;
            animation: pulse 1.5s infinite ease-in-out;
        }
        
        .circle-loader {
            width: 80px;
            height: 80px;
            position: relative;
        }
        
        .circle {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            animation: rotate 2s linear infinite;
            box-sizing: border-box;
        }
        
        .circle:nth-child(1) {
            border: 4px solid transparent;
            border-top-color: #3498db;
            border-bottom-color: #3498db;
        }
        
        .circle:nth-child(2) {
            border: 4px solid transparent;
            border-left-color: #e74c3c;
            border-right-color: #e74c3c;
            animation-delay: 0.5s;
            transform: rotate(30deg);
        }
        
        .circle:nth-child(3) {
            border: 4px solid transparent;
            border-top-color: #2ecc71;
            border-bottom-color: #2ecc71;
            animation-delay: 1s;
            transform: rotate(60deg);
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg) scale(1);
            }
            50% {
                transform: rotate(180deg) scale(0.8);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 0.6;
            }
            50% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div class="loading-container">
        <div class="circle-loader">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="loading-text">loading ....</div>
    </div>
</body>
</html>

نکات تکمیلی

  1. تنظیم سرعت: می‌توانید duration انیمیشن‌ها را تغییر دهید

  2. تغییر رنگ: رنگ‌ها را متناسب با پالت رنگ پروژه خود تنظیم کنید

  3. سایز: اندازه دایره‌ها با تغییر width و height در .circle-loader قابل تنظیم است

  4. تعداد دایره‌ها: می‌توانید دایره‌های بیشتری اضافه کنید

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

 

آیا این آموزش برای شما مفید بود؟
سوالی دارید؟
ایده‌ای برای بهبود انیمیشن دارید؟
تجربه استفاده از این کد را با ما به اشتراک بگذارید!

 

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

آموزش طراحی دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی در CSS

,

امروزه دکمه‌های شبکه‌های اجتماعی بخش مهمی از طراحی رابط کاربری (UI) هستند. در این مقاله، یاد می‌گیرید چگونه دکمه‌های مربعی با چرخش ۴۵ درجه طراحی کنید که هنگام هاور رنگ پس‌زمینه آنها به رنگ رسمی هر شبکه اجتماعی تغییر کند.

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

  • HTML5 (برای ساختار)

  • CSS3 (برای استایل‌دهی و افکت‌ها)

  • Font Awesome (برای آیکون‌ها)

آموزش گام‌به‌گام

۱. ساختار HTML

کد زیر چارچوب اصلی دکمه‌ها را ایجاد می‌کند:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

۲. استایل‌دهی با CSS

در این بخش، افکت‌های سه‌بعدی و تغییر رنگ را پیاده‌سازی می‌کنیم:

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: white;
}

.social-buttons {
    display: flex;
    gap: 15px;
}

.social-btn {
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #555;
    background: #f0f0f0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: rotate(45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.social-btn i {
    transform: rotate(-45deg);
    transition: all 0.3s ease;
}

/* تغییر رنگ هنگام هاور */
.whatsapp:hover { background: #25D366; }
.twitter:hover { background: #1DA1F2; }
.youtube:hover { background: #FF0000; }
.linkedin:hover { background: #0077B5; }

.social-btn:hover i {
    color: white;
    transform: rotate(-45deg) scale(1.1);
}

کد نهایی آماده برای استفاده

کدهای زیر را می‌توانید در هر پروژه وب‌سایتی استفاده کنید. این کدها شامل HTML و CSS کامل برای ایجاد دکمه‌های شبکه‌های اجتماعی با افکت سه‌بعدی است:

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>دکمه‌های شبکه‌های اجتماعی</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: white;
        }
        .social-buttons {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 60px;
            height: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #555;
            background: #f0f0f0;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            transform: rotate(45deg);
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .social-btn i {
            transform: rotate(-45deg);
            transition: all 0.3s ease;
        }
        .whatsapp:hover { background: #25D366; }
        .twitter:hover { background: #1DA1F2; }
        .youtube:hover { background: #FF0000; }
        .linkedin:hover { background: #0077B5; }
        .social-btn:hover i {
            color: white;
            transform: rotate(-45deg) scale(1.1);
        }
    </style>
</head>
<body>
    <div class="social-buttons">
        <button class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></button>
        <button class="social-btn twitter"><i class="fab fa-twitter"></i></button>
        <button class="social-btn youtube"><i class="fab fa-youtube"></i></button>
        <button class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></button>
    </div>
</body>
</html>

نحوه استفاده از این کدها:

  1. کدهای بالا را در یک فایل با پسوند .html ذخیره کنید.

  2. می‌توانید این کدها را در هر پروژه وب‌سایتی (مانند سایت‌های استاتیک یا سیستم‌های مدیریت محتوای غیر از وردپرس) استفاده کنید.

  3. برای تغییر رنگ‌ها یا اندازه دکمه‌ها، مقادیر CSS را ویرایش کنید.

 

نظر شما چیست؟

اگر این آموزش برایتان مفید بود یا پیشنهادی برای بهبود دارید، خوشحال می‌شویم در بخش نظرات با ما در میان بگذارید!

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

آموزش ساخت آیکون‌های مینیمال شبکه‌های اجتماعی با افکت hover رنگی

,

در این آموزش، نحوه ایجاد آیکون‌های مینیمال و زیبا برای شبکه‌های اجتماعی با استفاده از CSS و کتابخانه Font Awesome را یاد می‌گیرید. این آیکون‌ها دارای افکت hover هستند که هنگام قرارگیری ماوس روی آن‌ها، به رنگ رسمی هر شبکه اجتماعی تغییر می‌کنند.

مراحل پیاده‌سازی

افزودن فونت Awesome
ابتدا کتابخانه Font Awesome را به پروژه خود اضافه کنید:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

ساخت ساختار HTML

ساخت ساختار HTML

<div class="social-container">
    <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
    <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
    <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
    <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
    <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
</div>

استایل‌دهی با CSS

.social-container {
    display: flex;
    gap: 15px;
}
.social-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #333;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
.social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
.social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
.social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
.social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }

کد کامل

<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f5f5f5;
        }
        .social-container {
            display: flex;
            gap: 15px;
        }
        .social-btn {
            width: 50px;
            height: 50px;
            border: 1px solid #ddd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            color: #333;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .social-btn.youtube:hover { color: #FF0000; border-color: #FF0000; }
        .social-btn.twitter:hover { color: #1DA1F2; border-color: #1DA1F2; }
        .social-btn.instagram:hover { color: #E1306C; border-color: #E1306C; }
        .social-btn.linkedin:hover { color: #0A66C2; border-color: #0A66C2; }
        .social-btn.whatsapp:hover { color: #25D366; border-color: #25D366; }
    </style>
</head>
<body>
    <div class="social-container">
        <a href="#" class="social-btn youtube"><i class="fab fa-youtube"></i></a>
        <a href="#" class="social-btn twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" class="social-btn instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" class="social-btn linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="social-btn whatsapp"><i class="fab fa-whatsapp"></i></a>
    </div>
</body>
</html>

نظر شما چیست؟

آیا این آموزش برای شما مفید بود؟ اگر سوال یا پیشنهادی دارید، در بخش نظرات با ما در میان بگذارید.

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

آموزش ساخت دکمه اشتراک‌گذاری تعاملی با CSS و HTML

,

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

پیش‌نمایش نهایی

قبل از شروع، بیایید ببینیم چه چیزی می‌سازیم:

  • یک دکمه با طراحی مدرن و گوشه‌های گرد

  • افکت تبدیل هنگام hover به سه دایره اجتماعی

  • انیمیشن‌های نرم و جذاب

  • کاملاً ریسپانسیو

 

کد کامل

<!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>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .share-container {
            text-align: center;
            margin: 2rem;
        }
        
        .share-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #00CED1;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            cursor: pointer;
            font-size: 16px;
            border: none;
            outline: none;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
            overflow: hidden;
            width: 140px;
            height: 50px;
            box-shadow: 0 4px 8px rgba(0, 206, 209, 0.3);
        }
        
        .share-btn i {
            margin-right: 8px;
            transition: transform 0.3s ease;
        }
        
        .social-circles {
            position: absolute;
            display: flex;
            width: 100%;
            justify-content: space-around;
            opacity: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.7);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }
        
        .social-circle {
            width: 40px;
            height: 40px;
            background-color: #00CED1;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .social-circle:hover {
            transform: scale(1.1) translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .share-btn:hover {
            background-color: transparent;
            box-shadow: none;
        }
        
        .share-btn:hover .btn-content {
            opacity: 0;
            transform: translateY(-30px);
        }
        
        .share-btn:hover .social-circles {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
        
        .btn-content {
            display: flex;
            align-items: center;
            transition: all 0.4s ease;
        }
    </style>
</head>
<body>
    <div class="share-container">
        <button class="share-btn">
            <span class="btn-content">
                اشتراک‌گذاری <i class="fas fa-share-alt"></i>
            </span>
            <div class="social-circles">
                <div class="social-circle">
                    <i class="fab fa-instagram"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-twitter"></i>
                </div>
                <div class="social-circle">
                    <i class="fab fa-telegram"></i>
                </div>
            </div>
        </button>
    </div>
</body>
</html>

توضیحات گام به گام

1. ساختار HTML

ساختار اصلی شامل این بخش‌هاست:

  • بدنه اصلی: تگ <body> که محتوا را در مرکز صفحه قرار می‌دهد

  • کنتینر دکمه: div با کلاس share-container برای قرارگیری دکمه

  • دکمه اصلی: با کلاس share-btn که دو بخش دارد:

    • محتوای اصلی دکمه (btn-content)

    • دایره‌های اجتماعی (social-circles)

2. استایل‌دهی CSS

بخش body:

  • از flexbox برای مرکز کردن عمودی و افقی استفاده شده

  • ارتفاع 100vh برای پر کردن کل ارتفاع صفحه

  • فونت و پس‌زمینه مناسب تنظیم شده

دکمه اصلی:

  • رنگ فیروزه‌ای (#00CED1) با سایه مناسب

  • گوشه‌های گرد با border-radius

  • padding مناسب برای ظاهر زیبا

  • transition برای انیمیشن نرم

دایره‌های اجتماعی:

  • در حالت عادی مخفی هستند (opacity: 0)

  • با hover روی دکمه ظاهر می‌شوند

  • هر دایره دارای افکت hover جداگانه است

  • از transform برای انیمیشن‌های جذاب استفاده شده

3. افکت hover

هنگام hover روی دکمه:

  1. پس‌زمینه دکمه محو می‌شود

  2. محتوای اصلی (متن و آیکون) به بالا حرکت کرده و محو می‌شود

  3. دایره‌های اجتماعی با انیمیشن ظاهر می‌شوند

  4. هر دایره هنگام hover جداگانه واکنش نشان می‌دهد

4. نکات فنی مهم

  1. ترکیب transformها: استفاده همزمان از translate و scale برای انیمیشن‌های طبیعی‌تر

  2. cubic-bezier: برای ایجاد انیمیشن‌های غیرخطی و جذاب‌تر

  3. ترتیب transitionها: تنظیم زمان‌های مختلف برای ایجاد افکت‌های لایه‌ای

  4. سازگاری مرورگرها: کد با تمام مرورگرهای مدرن کار می‌کند

چگونه این کد را سفارشی کنیم؟

  1. تغییر رنگ: مقدار #00CED1 را به رنگ مورد نظر خود تغییر دهید

  2. تغییر آیکون‌ها: کلاس‌های Font Awesome را به آیکون‌های دلخواه تغییر دهید

  3. تغییر اندازه: مقادیر width و height را برای اندازه‌های مختلف تنظیم کنید

  4. اضافه کردن لینک: به هر دایره یک لینک اشتراک‌گذاری واقعی اضافه کنید

جمع‌بندی

این دکمه اشتراک‌گذاری یک راه حل زیبا و کاربردی برای افزایش تعامل کاربران است. با استفاده از تکنیک‌های مدرن CSS توانسته‌ایم یک اثر بصری جذاب ایجاد کنیم که هم از نظر عملکردی و هم از نظر زیبایی‌شناسی در سطح بالایی قرار دارد.

شما می‌توانید این کد را مستقیماً در پروژه‌های خود استفاده کنید یا با توجه به نیازهای خود آن را توسعه دهید. برای مشاهده عملکرد زنده می‌توانید کد را در یک فایل HTML ذخیره کرده و در مرورگر اجرا کنید.

 

نظر شما چیست؟
آیا این آموزش برای شما مفید بود؟ چه پیشنهادی برای بهبود این دکمه اشتراک‌گذاری دارید؟ نظرات و تجربیات خود را با ما و دیگر خوانندگان به اشتراک بگذارید.

اگر سوالی در مورد پیاده‌سازی این کد دارید یا به کمک نیاز دارید، در بخش نظرات مطرح کنید تا راهنمایی کنم. همچنین اگر این آموزش را دوست داشتید، با دوستان خود به اشتراک بگذارید!

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

آموزش ساخت دکمه موجی با CSS – انیمیشن حرفه‌ای بدون جاوااسکریپت

,

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

پیش‌نیازها

برای این آموزش فقط نیاز دارید:

  1. یک ویرایشگر کد ساده مثل VSCode

  2. مرورگر وب (ترجیحاً Chrome یا Firefox)

  3. کمی اشتیاق برای یادگیری!

 

قدم اول: ساخت فایل‌های پروژه

  1. یک پوشه جدید ایجاد کنید

  2. داخل آن یک فایل با نام index.html بسازید

  3. یک فایل با نام style.css هم ایجاد کنید

قدم دوم: کد HTML پایه

کد زیر را در فایل index.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>دکمه موجی CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <button class="wave-btn">کلیک کنید</button>
</body>
</html>

 

قدم سوم: استایل‌دهی پایه (CSS)

حالا به فایل style.css می‌رویم و این کدها را اضافه می‌کنیم:

 

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f8ff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wave-btn {
    position: relative;
    padding: 15px 30px;
    font-size: 18px;
    color: #0066cc;
    background: transparent;
    border: 2px solid #0066cc;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    font-weight: bold;
}

 

توضیح کدها:

  • body: صفحه را وسط‌چین می‌کند و یک پس‌زمینه آبی روشن قرار می‌دهد

  • .wave-btn: استایل اولیه دکمه ما که شامل:

    • حاشیه آبی

    • متن آبی

    • پس‌زمینه شفاف

    • گوشه‌های گرد

 

قدم چهارم: ساخت افکت موجی

حالا بخش جذاب کار! این کدها را به فایل CSS اضافه کنید:

 

.wave-btn::before {
    content: "";
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0066cc, #004d99);
    z-index: -1;
    transition: all 0.6s ease-out;
    clip-path: polygon(
        0% 100%,
        100% 100%,
        100% 100%,
        0% 100%
    );
}

.wave-btn:hover {
    color: white;
}

.wave-btn:hover::before {
    bottom: 0;
    clip-path: polygon(
        0% 20%,
        20% 15%,
        40% 25%,
        60% 15%,
        80% 25%,
        100% 15%,
        100% 100%,
        0% 100%
    );
    animation: wave 2s linear infinite;
}

@keyframes wave {
    0% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
    50% {
        clip-path: polygon(
            0% 15%,
            20% 25%,
            40% 15%,
            60% 25%,
            80% 15%,
            100% 25%,
            100% 100%,
            0% 100%
        );
    }
    100% {
        clip-path: polygon(
            0% 20%,
            20% 15%,
            40% 25%,
            60% 15%,
            80% 25%,
            100% 15%,
            100% 100%,
            0% 100%
        );
    }
}

 

توضیح بخش‌های مهم:

  1. .wave-btn::before:

    • یک المان ساختگی ایجاد می‌کند

    • ابتدا در پایین دکمه مخفی است (bottom: -100%)

    • با گرادیان آبی طراحی شده

  2. هاور کردن:

    • وقتی موس روی دکمه می‌رود:

      • المان موج از پایین به بالا می‌آید

      • رنگ متن به سفید تغییر می‌کند

      • افکت موجی شروع می‌شود

  3. انیمیشن موج:

    • با clip-path شکل موج ایجاد می‌شود

    • @keyframes حرکت موج را کنترل می‌کند

 

قدم پنجم: تست و تنظیمات نهایی

  1. فایل را در مرورگر باز کنید

  2. روی دکمه هاور کنید و افکت زیبا را ببینید

  3. می‌توانید مقادیر زیر را تغییر دهید:

    • رنگ‌ها در linear-gradient

    • سرعت انیمیشن در 0.6s

    • شکل موج با تغییر اعداد در clip-path

 

جمع‌بندی

در این آموزش کامل یاد گرفتیم:

  • چگونه با CSS افکت موجی ایجاد کنیم

  • چطور از pseudo-element ها استفاده کنیم

  • روش ساخت انیمیشن‌های روان با CSS

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

 

حالا نوبت شماست! این کد را امتحان کنید و خلاقیت به خرج دهید. اگر سوالی دارید یا پروژه‌ای با این تکنیک ساخته‌اید، خوشحال می‌شویم در بخش نظرات با ما و دیگران به اشتراک بگذارید.

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

آموزش طراحی دکمه Add to Cart با انیمیشن CSS و JavaScript

,

در این مقاله یاد می‌گیریم چگونه یک دکمه “Add to Cart” با انیمیشن ساده و بصری جذاب تهیه کنیم. در این نمونه:

  • با کلیک روی دکمه:
    • متن “Add to Cart” محو می‌شود
    • آیکن سبد خرید با انیمیشن از سمت چپ وارد می‌شود و در وسط موقف می‌شود

 

کد HTML:

<button id="cartBtn">
  <span class="text">Add to Cart</span>
  <i class="fas fa-cart-shopping icon"></i>
</button>

 

  • <button> یک دکمه کلیکی است
  • <span class="text"> متن اولیه دکمه است
  • <i class="fas fa-cart-shopping"> آیکن سبد خرید از Font Awesome

 

کد CSS:

 

button {
  width: 200px;
  height: 60px;
  background: #f97316;
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.text, .icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.5s ease;
}
.text {
  left: 50%;
  transform: translate(-50%, -50%);
}
.icon {
  left: -40px;
  font-size: 24px;
  opacity: 0;
}
.clicked .text {
  opacity: 0;
}
.clicked .icon {
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
  • دکمه همه چیز را درون خود جای می‌دهد
  • .clicked یک کلاس است که بعد از کلیک به دکمه اضافه می‌شود

کد JavaScript:

 

document.getElementById('cartBtn').addEventListener('click', function () {
  this.classList.add('clicked');
});

 

با کلیک روی دکمه، کلاس clicked به آن اضافه می‌شود و CSS انیمیشن را اجرا می‌کند.

کد کامل:

در صورتی که می‌خواهید همه کدها را به صورت یکجا کپی و استفاده کنید، از قطعه کد زیر استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Add to Cart Animation</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    body {
      margin: 0;
      background: #f3f4f6;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      font-family: sans-serif;
    }
    button {
      width: 200px;
      height: 60px;
      background: #f97316;
      color: white;
      font-size: 18px;
      border: none;
      border-radius: 8px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    .text, .icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      transition: all 0.5s ease;
    }
    .text {
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .icon {
      left: -40px;
      font-size: 24px;
      opacity: 0;
    }
    .clicked .text {
      opacity: 0;
    }
    .clicked .icon {
      left: 50%;
      transform: translate(-50%, -50%);
      opacity: 1;
    }
  </style>
</head>
<body>

  <button id="cartBtn">
    <span class="text">Add to Cart</span>
    <i class="fas fa-cart-shopping icon"></i>
  </button>

  <script>
    document.getElementById('cartBtn').addEventListener('click', function () {
      this.classList.add('clicked');
    });
  </script>

</body>
</html>

 

جمع‌بندی:

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

اگر این آموزش برای شما مفید بود یا سوالی داشتید، خوشحال می‌شویم در بخش نظرات همین صفحه با ما در میان بگذارید.

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

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

,

ساخت دکمه دانلود با انیمیشن پیشرفت و وضعیت موفق با HTML و CSS

در این آموزش از صفر تا صد طراحی یک دکمه دانلود مدرن با استفاده از HTML و CSS را یاد می‌گیرید؛ دکمه‌ای که هنگام کلیک، وارد حالت progress شده، انیمیشن چرخان نمایش می‌دهد و در پایان عملیات، به حالت موفقیت (success) با آیکون تیک و متن done تغییر می‌کند.

بخش اول: طراحی اولیه دکمه دانلود

در ابتدا یک دکمه ساده طراحی می‌کنیم که دارای آیکون دانلود (⬇) و متن download باشد. این دکمه دارای طراحی دایره‌ای، رنگ پس‌زمینه شفاف، حاشیه رنگی، و استایل مدرن است.

کد HTML ابتدایی:

<button class="download-btn">
  <span class="icon">⬇</span>
  <span class="text">download</span>
</button>

بخش دوم: استایل‌دهی کامل با CSS

در این بخش، با استفاده از CSS دکمه را به‌شکلی مدرن، جذاب و واکنش‌گرا طراحی می‌کنیم. هدف این است که کاربر نه‌تنها از ظاهر دکمه لذت ببرد، بلکه هنگام تعامل با آن (مثلاً کلیک برای دانلود) تجربه‌ی واضح، طبیعی و دل‌چسبی داشته باشد.

رنگ‌ها و وضعیت‌ها

ما از سه رنگ اصلی برای نشان دادن وضعیت‌های مختلف دکمه استفاده می‌کنیم:

  • آبی (رنگ اولیه): برای حالت پیش‌فرض که نشان می‌دهد کاربر هنوز روی دکمه کلیک نکرده.

  • زرد مایل به نارنجی (warning): برای نمایش حالت «در حال دانلود» که با انیمیشن چرخشی همراه است.

  • سبز (success): پس از اتمام دانلود، دکمه سبز می‌شود تا به کاربر تأیید دهد که عملیات با موفقیت انجام شده.

استفاده از این رنگ‌ها نه‌تنها بر پایه استانداردهای طراحی رابط کاربری (UI) است، بلکه به صورت بصری و بدون نیاز به توضیح، وضعیت را به کاربر منتقل می‌کند.

CSS کامل برای طراحی دکمه:

 

:root {
  --primary: #00d2ff;
  --warning: #e0a800;
  --success: #28a745;
  --text-color: #ffffff;
  --text-muted: #dddddd;
  --bg-dark: #2e3333;
}

body {
  background-color: var(--bg-dark);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.download-btn {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: 2px solid var(--primary);
  border-radius: 50px;
  padding: 8px 20px 8px 8px;
  font-family: sans-serif;
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  outline: none;
}

.download-btn .icon {
  width: 40px;
  height: 40px;
  background-color: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.download-btn .text {
  font-size: 16px;
  margin-left: 12px;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.download-btn:hover {
  background-color: rgba(0, 210, 255, 0.08);
  transform: translateY(-1px);
}

.download-btn.loading {
  border-color: var(--warning);
}

.download-btn.loading .icon {
  background-color: white;
  color: var(--warning);
  animation: spin 1s linear infinite;
}

.download-btn.loading .text {
  color: var(--text-muted);
}

.download-btn.done {
  border-color: var(--success);
}

.download-btn.done .icon {
  background-color: white;
  color: var(--success);
}

.download-btn.done .text {
  color: var(--success);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

بخش سوم: افزودن رفتار دکمه با JavaScript

برای شبیه‌سازی دانلود، با استفاده از جاوااسکریپت کلاس‌های loading و done را به دکمه اضافه می‌کنیم. این باعث فعال شدن انیمیشن و تغییر رنگ و آیکون می‌شود.

JavaScript برای مدیریت وضعیت دکمه:

 

<script>
  function startDownload(btn) {
    if (btn.classList.contains('loading')) return;

    const icon = btn.querySelector('.icon');
    const text = btn.querySelector('.text');

    btn.classList.remove('done');
    btn.classList.add('loading');
    icon.textContent = '⟳';
    text.textContent = 'downloading...';

    setTimeout(() => {
      btn.classList.remove('loading');
      btn.classList.add('done');
      icon.textContent = '✔';
      text.textContent = 'done';
    }, 3000);
  }
</script>

کد کامل HTML آماده اجرا

در اینجا کل کد HTML، CSS و JS را در یک فایل یک‌پارچه می‌بینید. کافی است آن را در مرورگر اجرا کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Download Button</title>
  <style>
    :root {
      --primary: #00d2ff;
      --warning: #e0a800;
      --success: #28a745;
      --text-color: #ffffff;
      --text-muted: #dddddd;
      --bg-dark: #2e3333;
    }

    body {
      background-color: var(--bg-dark);
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

    .download-btn {
      display: flex;
      align-items: center;
      background-color: transparent;
      border: 2px solid var(--primary);
      border-radius: 50px;
      padding: 8px 20px 8px 8px;
      font-family: sans-serif;
      color: var(--text-color);
      cursor: pointer;
      transition: all 0.3s ease;
      outline: none;
    }

    .download-btn .icon {
      width: 40px;
      height: 40px;
      background-color: var(--primary);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .download-btn .text {
      font-size: 16px;
      margin-left: 12px;
      white-space: nowrap;
      transition: color 0.3s ease;
    }

    .download-btn:hover {
      background-color: rgba(0, 210, 255, 0.08);
      transform: translateY(-1px);
    }

    .download-btn.loading {
      border-color: var(--warning);
    }

    .download-btn.loading .icon {
      background-color: white;
      color: var(--warning);
      animation: spin 1s linear infinite;
    }

    .download-btn.loading .text {
      color: var(--text-muted);
    }

    .download-btn.done {
      border-color: var(--success);
    }

    .download-btn.done .icon {
      background-color: white;
      color: var(--success);
    }

    .download-btn.done .text {
      color: var(--success);
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>
<body>
  <button class="download-btn" onclick="startDownload(this)">
    <span class="icon">⬇</span>
    <span class="text">download</span>
  </button>

  <script>
    function startDownload(btn) {
      if (btn.classList.contains('loading')) return;

      const icon = btn.querySelector('.icon');
      const text = btn.querySelector('.text');

      btn.classList.remove('done');
      btn.classList.add('loading');
      icon.textContent = '⟳';
      text.textContent = 'downloading...';

      setTimeout(() => {
        btn.classList.remove('loading');
        btn.classList.add('done');
        icon.textContent = '✔';
        text.textContent = 'done';
      }, 3000);
    }
  </script>
</body>
</html>

نتیجه‌گیری

با چند خط HTML، CSS و JavaScript می‌توان یک دکمه‌ی حرفه‌ای و زیبا برای عملیات دانلود یا هر عملیات زمان‌بر دیگری ساخت. این دکمه با استفاده از انیمیشن، رنگ‌بندی هشدار و موفقیت، تجربه‌ی کاربری (UX) بهتری ارائه می‌دهد و می‌تواند در اپلیکیشن‌های واقعی به‌خوبی مورد استفاده قرار گیرد.

نظر شما چیه؟

اگر از این دکمه در پروژه‌هات استفاده کردی، یا سوالی درباره‌ی پیاده‌سازی یا شخصی‌سازی اون داری، خوشحال می‌شم در بخش دیدگاه‌ها بخونم!

 منتظر نظرات ارزشمندت هستم.

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

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

ساخت دکمه نئونی متحرک فقط با HTML و CSS (بدون جاوااسکریپت)

اگر دنبال راهی هستی که فقط با HTML و CSS یه دکمه چشم‌گیر و حرفه‌ای طراحی کنی، این آموزش مخصوص توئه.
در این مقاله یاد می‌گیری چطور با استفاده از conic-gradient و انیمیشن CSS، یک دکمه نئونی متحرک بسازی که توجه هر کاربری رو جلب می‌کنه – بدون حتی یک خط JavaScript!

کد HTML + CSS کامل

در ادامه کد کامل رو گذاشتم ، میتونی همین کد رو داخل برنامه ات استفاده کنی. توضیحات کاملش هم پایین تر گفتم.

<!DOCTYPE html>
<html>
<head>
<style>
.glow-button {
  position: relative;
  padding: 14px 32px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 18px;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  z-index: 0;
}

.glow-button::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, #00f, #0ff, #0f0, #ff0, #f00, #f0f, #00f);
  animation: rotate 3s linear infinite;
  z-index: -2;
}

.glow-button::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background: #111;
  border-radius: 6px;
  z-index: -1;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
</head>
<body style="margin-top:300px;margin-left:250px">
 
<button class="glow-button">Click Me</button>

</body>
</html>

توضیح مراحل ساخت دکمه

1. ظاهر دکمه (کلاس .glow-button)
ما با یک پس‌زمینه تیره و متنی سفید کار رو شروع کردیم. گوشه‌های گرد، padding مناسب و بدون هیچ حاشیه ظاهری.

2. افکت نئونی متحرک با ::before
با conic-gradient یک حلقه رنگارنگ ایجاد کردیم و به‌کمک animation چرخشش دادیم تا یک افکت متحرک نئونی بسازیم.

3. ساخت بک‌گراند داخلی با ::after
یک لایه داخلی (زیر دکمه) قرار دادیم که ظاهر دکمه رو تمیز و واضح نگه‌داره، و افکت پشتش بدرخشه.

4. انیمیشن با @keyframes
تنها انیمیشن ما یک چرخش 360 درجه‌ای مداومه که حس داینامیک و حرکت به دکمه می‌ده.

پیش‌نمایش نهایی

دکمه نهایی یک دکمه مشکی ساده با افکت نئونی رنگارنگ در حاشیه است که به‌آرامی در حال چرخشه.
کاملاً ریسپانسیو، بدون نیاز به جاوااسکریپت و مناسب برای استفاده در فرم‌ها، صفحات فرود و…

نکات پایانی

  • می‌تونی این افکت رو با رنگ‌های دلخواهت شخصی‌سازی کنی.

  • مدت زمان انیمیشن یا ضخامت افکت رو هم می‌تونی با تغییر اندازه padding و ::after و ::before تنظیم کنی.

 

اگر سوالی داری توی کامنت های همین مقاله با ما در ارتباط باش.

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