شخصی سازی وب سایت یکی از سرگرم کننده ترین جنبه های توسعه وب است. در این آموزش، ما به دو روش برای اضافه کردن نشانگر ماوس سفارشی به وب سایت خود نگاه خواهیم کرد.
در مراحل اولیه توسعه وب، وب‌سایت‌ها با انواع و اقسام ویژگی‌های حواس‌انگیز بیداد می‌کردند: پس‌زمینه‌هایی با مضمون کهکشانی، فونت‌های رنگارنگ تا حد ناخوانایی، و انبوهی از خیمه‌ها.
اکنون در مورد طراحی وب کم و بیش آرام شده ایم، اما این بدان معنا نیست که دیگر نمی توانیم ویژگی های سرگرم کننده را در وب سایت خود داشته باشیم. در این آموزش، ما به نحوه اضافه کردن یک لمس شخصی به هر وب سایت با استفاده از یک مکان نما سفارشی، ابتدا با استفاده از رویکرد فقط CSS، سپس یک روش تعاملی جاوا اسکریپت نگاه خواهیم کرد.
1. اضافه کردن مکان نما سفارشی با CSS
در این نسخه ی نمایشی، ما دو مکان نما را در یک صفحه تنها با استفاده از CSS پیاده سازی کرده ایم. ماوس را روی قلم نگه دارید تا ببینید چه اتفاقی می افتد:
ویژگی CSS cursor به ما اجازه می دهد تا مکان نما را به کلمات کلیدی داخلی و همچنین به ما اجازه می دهد یک تصویر را به عنوان مکان نما تنظیم کنیم.
کد CSS ما چیزی شبیه به این است:
1 |
main { |
2 |
cursor: url("data:image/svg+xml,%3Csvg xmlns=" height="16" width="16" style="fill-rule:evenodd;text-rendering:geometricPrecision;image-rendering:optimizeQuality;clip-rule:evenodd;shape-rendering:geometricPrecision" xml:space="preserve" viewBox='0 0 7.5 7.5'%3E%3Cpath d='M0 3.8a3.7 3.7 0 1 1 7.5 0 3.7 3.7 0 0 1-7.5 0zm.5 0a3.3 3.3 0 1 0 6.6 0 3.3 3.3 0 0 0-6.6 0zm2.9 0c0 .2.2.3.4.3a.4.4 0 1 0-.4-.3z' style="fill:currentColor;stroke:currentColor;stroke-width:.0419595"/%3E%3C/svg%3E") 8 8, pointer; |
3 |
}
|
4 |
|
5 |
.hover-container { |
6 |
cursor: url(https://cur.cursors-4u.net/nature/nat-11/nat1021.cur), default; |
7 |
}
|
برای استایل دادن به مکان نما از مقادیر زیر استفاده می کنیم:
-
url(): تابع url برای تنظیم فایل تصویر برای مکان نما تا زمانی که در فرمت مناسب و حداکثر 128 پیکسل در 128 پیکسل باشد استفاده می شود. در عنصر اصلی خود، مکان نما را به عنوان یک تنظیم می کنیم.svgدر حالی که ما از a استفاده می کنیم.curفایل در عنصر ظرف شناور ما. -
مختصات: مقادیر مختصات x و y بعد از تابع url قرار می گیرند تا مشخص شود مکان نما از کدام نقطه شروع شود. به‌طور پیش‌فرض، تصاویر مکان‌نما در گوشه سمت چپ بالای جایی که مکان‌نمای ماوس قرار دارد، قرار می‌گیرند. در عنصر اصلی خود، مختصات x و y را روی قرار می دهیم
8 8برای اطمینان از اینکه مکان نما دایره ما در وسط نقطه ای است که ماوس به آن اشاره می کند. - بازگشت به عقب: مقدار بازگشتی آخرین کلمه کلیدی در انتهای ویژگی مکان نما ما است. بازگشت به یکی از مقادیر کلیدواژه مکان‌نمای داخلی تنظیم می‌شود و در صورتی استفاده می‌شود که تصویر موجود در url بارگیری نشود.
و این تمام چیزی است که برای تنظیم یک مکان نما سفارشی با CSS وجود دارد!
2. اضافه کردن مکان نما سفارشی با جاوا اسکریپت
اگر می خواهیم مکان نما ما تعامل بیشتری با صفحه وب ما داشته باشد، می توانیم آن را با استفاده از جاوا اسکریپت تنظیم کنیم. ماوس را روی قلم نگه دارید تا ببینید مکان نما چگونه تغییر می کند:
برای انجام این کار، ابتدا به یک عنصر HTML نیاز داریم تا به عنوان مکان نما تعاملی ما عمل کند.
1 |
<div id="custom-cursor"> |
2 |
</div>
|
در مرحله بعد، به عنصر مکان نما سفارشی CSS خود استایل می دهیم. می‌توانیم هر تصویر یا ویژگی استایلی را به عنصر مکان‌نما منتقل کنیم تا دقیقاً همانطور که می‌خواهیم به نظر برسد. در این آموزش، یک دایره ساده را استایل می‌دهیم و به آن می‌پردازیم ::after عنصر شبه برای تشکیل یک نقطه در وسط. در اینجا استایل CSS آمده است:
1 |
#custom-cursor { |
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
pointer-events: none; |
8 |
top: 0; |
9 |
}
|
10 |
|
11 |
#custom-cursor::after { |
12 |
content: ""; |
13 |
border-radius: 50%; |
14 |
position: absolute; |
15 |
top: -8px; |
16 |
left: -8px; |
17 |
border: 1px solid white; |
18 |
width: 16px; |
19 |
height: 16px; |
20 |
}
|
برای مکان نما سفارشی ما مهم است که داشته باشد position: fixed و pointer-events: none خواص این برای اطمینان از این است که مکان نما همیشه با حرکات ماوس در صفحه قرار می گیرد و ما قادر به تعامل با عنصر مکان نما نیستیم.
چلپ چلوپ از رنگ
با استفاده از نشانگر می توانیم مقداری سرگرمی رنگ به مکان نما اضافه کنیم mix-blend-mode ویژگی. این به مکان نما یک افکت رنگ معکوس بر اساس پس‌زمینه‌ای که روی آن معلق است می‌دهد.
1 |
#custom-cursor {
|
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
top: 0; |
8 |
mix-blend-mode: difference; |
9 |
} |
این چیزی است که ما تا کنون داریم:
مکان نما اصلی را مخفی کنید
سپس می‌خواهیم مکان‌نمای معمولی خود را مخفی کنیم و فقط زمانی که صفحه در حال نگه‌داشتن صفحه نمایش داده می‌شود، عنصر مکان‌نمای سفارشی را نشان دهیم:
1 |
body { |
2 |
cursor: none; |
3 |
}
|
4 |
|
5 |
body:hover #custom-cursor { |
6 |
opacity: 1; |
7 |
}
|
8 |
|
9 |
#custom-cursor { |
10 |
width: 2px; |
11 |
height: 2px; |
12 |
border-radius: 50%; |
13 |
background-color: white; |
14 |
position: fixed; |
15 |
top: 0; |
16 |
mix-blend-mode: difference; |
17 |
opacity: 0; |
18 |
}
|
افزودن جادوی جاوا اسکریپت
اکنون سبک را از سر راه برداشته ایم، بیایید عملکرد مکان نما را با جاوا اسکریپت تنظیم کنیم.
عملکرد ما قرار دادن مکان نما سفارشی را بر اساس حرکت ماوس و همچنین تعامل مکان نما با عناصر موجود در صفحه انجام می دهد.
کد به روز رسانی مکان نما به صورت زیر است:
1 |
const customCursor = document.getElementById('custom-cursor'); |
2 |
|
3 |
const updateCursorPosition = (event) => { |
4 |
customCursor.style.top = `${event.clientY}px`; |
5 |
customCursor.style.left = `${event.clientX}px`; |
6 |
}
|
7 |
|
8 |
window.addEventListener('mousemove', (event) => { |
9 |
updateCursorPosition(event) |
10 |
})
|
ما استفاده می کنیم clientX و clientY مقادیر برای تنظیم مختصات مکان نما هر زمان که ماوس حرکت می کند.
همچنین می‌توانیم استایل مکان‌نما را هر زمان که با یک عنصر تعامل داشت، به‌روزرسانی کنیم. وقتی عنصر مکان نما روی عنصر hover-container قرار می گیرد، یک کلاس بزرگنمایی اضافه می کنیم.
بیایید CSS خود را به‌روزرسانی کنیم تا یک استایل برای کلاس بزرگنمایی نیز لحاظ شود:
1 |
#custom-cursor { |
2 |
width: 2px; |
3 |
height: 2px; |
4 |
border-radius: 50%; |
5 |
background-color: white; |
6 |
position: fixed; |
7 |
top: 0; |
8 |
opacity: 0; |
9 |
pointer-events: none; |
10 |
mix-blend-mode: difference; |
11 |
transition: transform 500ms; |
12 |
}
|
13 |
|
14 |
#custom-cursor.zoom { |
15 |
transform: scale(3); |
16 |
}
|
ما می توانیم استفاده کنیم .matches() تابعی برای هدف قرار دادن زمانی که hover-container در حال شناور شدن است (و به این ترتیب ما مجبور نخواهیم شد شنونده رویداد دیگری را به عنصر متصل کنیم).
کد نهایی جاوا اسکریپت به این صورت است:
1 |
const customCursor = document.getElementById('custom-cursor'); |
2 |
const hoverContainer = document.querySelector('.hover-container'); |
3 |
|
4 |
const updateCursorPosition = (event) => { |
5 |
customCursor.style.top = `${event.clientY}px`; |
6 |
customCursor.style.left = `${event.clientX}px`; |
7 |
}
|
8 |
|
9 |
window.addEventListener('mousemove', (event) => { |
10 |
updateCursorPosition(event) |
11 |
|
12 |
if (hoverContainer.matches(':hover')) { |
13 |
customCursor.classList.add('zoom') |
14 |
} else { |
15 |
customCursor.classList.remove('zoom') |
16 |
}
|
17 |
})
|
نتیجه
و با آن، علاوه بر مکان‌نمای ساده CSS خود، یک نسخه سبک وزن از یک مکان‌نمای سفارشی تعاملی، تنها با استفاده از جاوا اسکریپت وانیلی ساخته‌ایم.
