خانه :: دوره های آموزش :: ساخت افکت دنبال‌کننده موس با دایره‌های متحرک در وبسایت

ساخت افکت دنبال‌کننده موس با دایره‌های متحرک در وبسایت

در این آموزش، ما یک افکت دنبال‌کننده موس (Mouse Follower) جذاب ایجاد خواهیم کرد که به وبسایت شما ظاهری مدرن و تعاملی می‌بخشد. این افکت شامل دو دایره است که با حرکت موس در صفحه به دنبال آن حرکت می‌کنند.

رایگان ;)

ساخت افکت دنبال‌کننده موس با دایره‌های متحرک در وبسایت
مدرس دوره: حسن سلگی

مدرس دوره: حسن سلگی

در این دوره تمام تلاشم رو میکنم تا به بهترین روش ممکن، از آموزش استاندارد و اصولی لذت ببرید و آماده بازار کار بشید.

1

تعداد قسمت آموزش

416

دانشجو

32 دقیقه

زمان آموزش

4.7/5

رضایت کاربران

پشتیبانی

کامل آموزش
ساخت افکت دنبال‌کننده موس با دایره‌های متحرک در وبسایت

توضیحات


فهرست مطالب

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

ایجاد ساختار HTML

مرحله 1: ایجاد ساختار HTML

ابتدا، یک فایل HTML ساده ایجاد کنید که ساختار پایه‌ای وبسایت شما را تشکیل می‌دهد. در این فایل، دو div با کلاس‌های circle1 و circle2 خواهیم داشت که به عنوان دایره‌های دنبال‌کننده موس عمل می‌کنند. در اینجا، ساختار HTML پایه را مشاهده می‌کنید:

<!DOCTYPE html>
<html>

<head>
    <title>Mouse Follower</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="circle circle1"></div>
    <div class="circle circle2"></div>

    <a href="https://whitewhale.website/">whitewhale</a>

    <script src="javascript.js"></script>
</body>

</html>

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

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

مرحله 2: استایل‌دهی با CSS

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

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

body {
    margin: 0;
    padding: 0;
    background: #333;
}

.circle {
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
}

.active {
    opacity: 1;
    visibility: visible;
}

.circle1 {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(255, 42, 0);
    transition: all 0.1s ease-out;
}

.circle2 {
    width: 10px;
    height: 10px;
    background: rgb(255, 42, 0);
}

a {
    text-align: center;
    display: block;
    margin: 100px 0;
    font-size: 50px;
    color: #fff;
}

:root,
* {
    cursor: none;
}

توضیحات:

  • body: تنظیمات اولیه صفحه شامل حذف حاشیه‌ها و پس‌زمینه تیره.
  • .circle: این کلاس برای دایره‌ها تعریف شده که شامل استایل‌هایی مثل شکل دایره‌ای، موقعیت مطلق و پنهان بودن اولیه است.
  • .active: این کلاس زمانی به دایره‌ها اضافه می‌شود که آن‌ها باید دیده شوند. این شامل تنظیماتی برای قابل مشاهده کردن دایره‌ها است.
  • .circle1 و .circle2: این دو کلاس برای دایره‌های مختلف با اندازه‌ها و استایل‌های متفاوت تعریف شده‌اند. دایره اول بزرگ‌تر و با حاشیه قرمز و دایره دوم کوچک‌تر و با پس‌زمینه قرمز است.
  • a: تنظیمات استایل لینک موجود در صفحه.
  • :root, *: با استفاده از این انتخابگرها، نشانگر موس را پنهان می‌کنیم تا افکت دنبال‌کننده برجسته شود.
افزودن تعامل با JavaScript

مرحله 3: افزودن تعامل با JavaScript

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

یک فایل JavaScript به نام javascript.js ایجاد کنید و کد زیر را در آن قرار دهید:

const mousePosition = document.querySelectorAll('.circle');

console.log(mousePosition);

window.addEventListener('mousemove', (e) => {
    for (let i = 0; i < mousePosition.length; i++) {
        mousePosition[i].style = `left: ${e.pageX - (mousePosition[i].offsetWidth / 2)}px; top: ${e.pageY - (mousePosition[i].offsetHeight / 2)}px;`;
        mousePosition[i].classList.add('active');
    }
});

توضیحات:

  • document.querySelectorAll('.circle'): این دستور تمام عناصری که کلاس circle دارند را انتخاب می‌کند و آن‌ها را در آرایه‌ای به نام mousePosition ذخیره می‌کند.
  • console.log(mousePosition): این خط برای بررسی انتخاب دایره‌ها و اطمینان از درستی آن‌ها استفاده می‌شود.
  • window.addEventListener('mousemove', (e) => {...}): این خط یک رویداد mousemove را به پنجره اضافه می‌کند تا هر زمانی که موس در صفحه حرکت می‌کند، تابعی اجرا شود.
  • for (let i = 0; i < mousePosition.length; i++) {...}: با استفاده از یک حلقه for، ما هر دایره را به موقعیت جدید موس منتقل می‌کنیم.
  • mousePosition[i].style = ...: این دستور موقعیت دایره‌ها را بر اساس موقعیت موس تنظیم می‌کند.
  • mousePosition[i].classList.add('active'): این دستور کلاس active را به دایره‌ها اضافه می‌کند تا آن‌ها قابل مشاهده شوند.

مرحله 4: بهینه‌سازی افکت

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

.circle1 {
    width: 50px;
    height: 50px;
    border: 1px solid rgb(255, 42, 0);
    transition: all 0.1s ease-out;
}

.circle2 {
    width: 10px;
    height: 10px;
    background: rgb(255, 42, 0);
    transition: all 0.1s ease-out;
}

در اینجا، با تنظیم transition بر روی all 0.1s ease-out، ما حرکت دایره‌ها را کمی نرم‌تر و واقعی‌تر می‌کنیم. این تغییرات کوچک می‌توانند تأثیر زیادی بر تجربه کاربری بگذارند.

نتیجه نهایی

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

این پروژه نه تنها شما را با اصول پایه HTML، CSS و JavaScript آشنا می‌کند، بلکه به شما کمک می‌کند تا با مفاهیم پیشرفته‌تری مانند تعاملات کاربر و انیمیشن‌های CSS آشنا شوید.

4.6/5 - (8 امتیاز)

سوالات متداول

دیدگاهها

اولین نفری باشید که دیدگاهی را ارسال می کنید برای “ساخت افکت دنبال‌کننده موس با دایره‌های متحرک در وبسایت”

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

هیچ دیدگاهی برای این محصول نوشته نشده است.