افکت موس
سلام دوستان . من میخواستم وبسایتی که طراحی میکنم بنوعی باشه که وقتی یک صفحه html فعال باشه با کلیک موس روی هر جای آن ، یک افکت خاصی اتفاق بیوفته مثلا جائی که کلیک میکنیم یه حالت دایره رنگی ظاهر بشه و سریع هم ناپدید شه تا کسی دیگری که صفحه را میبینه بفهمه که کجای صفحه کلیک شده . این برای جاهائی که از روی اینترنت آموزش میدن را دیدم ولی من میخوام این اتفاق صرفا روی یک صفحه html خاص اتفاق بیافته . نمیخوام از خود سیستم عامل افکت موس را تنظیم کنم . کسی در این زمینه تجربه داره ؟ ممنون از همگی .
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
1
@samanf33
خدمت شما
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.clickEffect{
position:fixed;
box-sizing:border-box;
border-style:solid;
border-color:#000000;
border-radius:50%;
animation:clickEffect 0.4s ease-out;
z-index:99999;
}
@keyframes clickEffect{
0%{
opacity:1;
width:0.5em; height:0.5em;
margin:-0.25em;
border-width:0.5rem;
}
100%{
opacity:0.2;
width:15em; height:15em;
margin:-7.5em;
border-width:0.03rem;
}
}
</style>
<script type="text/javascript">
function clickEffect(e){
var d=document.createElement("div");
d.className="clickEffect";
d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
document.body.appendChild(d);
d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
document.addEventListener('click',clickEffect);
</script>
</head>
<body>
<h1>کلیک کن هر جا که میخوای</h1>
</body>
</html>