نتیجه نهایی که بدست می آورید:
روی کادر کلیک کن:
بارنگ
html
<div class="cursor-ring"></div>
<script>
const ring = document.querySelector('.cursor-ring');
document.addEventListener('mousemove', (e) => {
ring.style.top = `${e.clientY}px`;
ring.style.left = `${e.clientX}px`;
});
css
<style>
.cursor-ring {
opacity: 50%;
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 150px;
border-radius: 50%;
pointer-events: none;
background: rgba(0, 0, 0, 0.38);
box-shadow: 0 0 80px rgba(0, 0, 0, 1);
transform: translate(-50%, -50%);
transition: transform 0.08s linear;
z-index: 999;
}
</style>
ایجاد هاله رنگی دور موس با یک کد ساده (قابل استفاده در المنتور)
اگر قصد دارید با یک افکت جذاب و سبک تجربه کاربری سایت خود را زیباتر کنید، افکت هاله رنگی دنبال کننده موس یکی از بهترین انتخابهاست. این افکت بدون کند کردن سایت، یک دایره رنگی را همراه با حرکت موس نمایش میدهد. در این پست کد کامل این افکت را قرار دادهایم تا بتوانید تنها با قرار دادن آن در یک ویجت HTML المنتور، آن را فعال کنید.
چطور رنگ هاله را تغییر دهیم؟
در بخش CSS کد، میتوانید رنگ و شدت نور را تغییر دهید:
background: rgba(0, 150, 255, 0.35);
box-shadow: 0 0 25px rgba(0, 150, 255, 0.7);
نحوه استفاده در المنتور
برای استفاده از این کد در المنتور مراحل زیر را انجام دهید:
یک ویجت HTML به صفحه اضافه کنید
کد بالا را به صورت کامل داخل آن قرار دهید
صفحه را آپدیت کنید
افکت هاله رنگی به سایت اضافه میشود
مزایای این افکت برای سایت
سبک و بدون تأثیر روی سرعت
بدون نیاز به افزونه
قابل استفاده در همه قالبها
قابل سفارشیسازی کامل
مناسب برای سایتهای تکنولوژی، آموزش، فروشگاهی و شخصی
جمعبندی
افکت هاله رنگی دور موس یک روش ساده و سریع برای زیباسازی سایت است. با قرار دادن همین کدی که در این پست فراهم شده، میتوانید ظاهر حرفه ای تر و جذاب تری به صفحات سایت بدهید. اگر نسخه پیشرفته تر با چند هاله یا افکت انیمیشنی خاص خواستید، کافی است در کامنتها درخواست بدهید.
