سامان
5 سال پیش توسط سامان مطرح شد
1 پاسخ

افکت موس

سلام دوستان . من میخواستم وبسایتی که طراحی میکنم بنوعی باشه که وقتی یک صفحه html فعال باشه با کلیک موس روی هر جای آن ، یک افکت خاصی اتفاق بیوفته مثلا جائی که کلیک میکنیم یه حالت دایره رنگی ظاهر بشه و سریع هم ناپدید شه تا کسی دیگری که صفحه را میبینه بفهمه که کجای صفحه کلیک شده . این برای جاهائی که از روی اینترنت آموزش میدن را دیدم ولی من میخوام این اتفاق صرفا روی یک صفحه html خاص اتفاق بیافته . نمیخوام از خود سیستم عامل افکت موس را تنظیم کنم . کسی در این زمینه تجربه داره ؟ ممنون از همگی .


ثبت پرسش جدید
نوب
تخصص : کدنویس نوب :)
@yk5742g 5 سال پیش مطرح شد
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>

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام