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

به نام خدا

در این آموزش میخواهیم که پروژه موس دنباله دار با حالت انیمیشن در صفحه وب به کمک جاوااسکریپت را پیاده سازی نماییم.

ابتدا در سند css خود استایل هایی که قرار است به شکل هایی که دنباله موس می آیند را میدهیم(به صورت کلاس).

برای مثال :

.shape {
 width: 30px;
 height: 30px;
 border: 3px solid #000;
 position: absolute;
 border-radius: 50%;
 opacity: 0.7;
}

یک کلاس با نام shape ایجاد میکنیم و عرض و ارتفاع آن را 30px و بوردر 3px در حالت solid و رنگ مشکی. و....

این کلاس به شکل ما را به شکل دایره حالت میدهد.

حالا باید یک رخداد حرکت موس برای سند خود در جاوااسکریپت تعریف کنیم و تابعی با نام mouseAnim را به آن نسبت بدهیم :

document.onmousemove = mouseAnim;

در صورت حرکت موس در صفحه وب خود، تابع mouseAnim فراخوانی میشود.

حالا باید تابع mouseAnim را ایجاد کنیم تا بتوانیم دستوراتی که قرار است در رخداد حرکت موس در صفحه اجرا شوند را پیاده ساز ی نماییم.

توجه داشته باشید که باید آرگومان ورودی event را به آن نسبت بدهیم زیرا برای بدست آوردن x و y موس لازم است.

function mouseAnim(event){

}

حالا که رخداد را تعریف کرده و تابع آنرا تعریف نموده ایم باید کدها و دستورات اصلی را پیاده سازی نماییم.

ابتدا باید که تایین کنیم که این تابع یک المان جدیداز نوع div  برای ما بسازد و آنرا داخل متغیر element قرار دهد :

function mouseAnim(event){
var element = document.createElement("div");
}

در این بخش باید که آن کلاسی که در ابتدا با نام shape ساختیم به المانی که ساختیم نسبت داده شود.

با استفاده از متود setAttribute کلاس shape را به المانی که ساخته ایم نسبت میدهیم:

function mouseAnim(event){
var element = document.createElement("div");
 
element.setAttribute("class", "shape");
}

در قسمت بعدی باید که مختصات x و y این شکل که قرار است دنباله موس شود، با مختصات خود موس یکی کنیم زیرا در غیر این صورت شکل در دنباله موس نخواهد آمد. همچنین به هرکدام 10 پیکسل نیز اضافه میکنیم تا کمی از موس فاصله داشته باشد و دقیقا با موس یکجا نباشد

function mouseAnim(event){
var element = document.createElement("div");
 
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
}

درواقع event.clientX فاصله موس از چپ ، و event.clientY فاصله موس از بالا را به ما میدهد و ما با استفاده از style آن را به top و left المان خود نسبت میدهیم.

برای انیمیشنی شدن حالات از transition استفاده میکنیم :

function mouseAnim(event){
var element = document.createElement("div");
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
 
element.style.transition="all 0.5s linear";
}

حالا باید که المانی را که ساختیم به سند خود و body الحاق کنیم.

با استفاده از متود appendChild :

function mouseAnim(event){
var element = document.createElement("div");
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
 
element.style.transition="all 0.5s linear";
 
document.body.appendChild(element);
}

تا اینجا %70 کار را پیش برده ایم.

برای زیبا تر شدن دنباله ، دستوراتی را تایین میکنیم که رنگ border را بصورت رندوم عوض کند.

برای این منظور یک آرایه تشکیل شده از رنگ های مختلف (تعداد و رنگ آن را میتوانید بصورت دلخواه تایین کنید) را ایجاد میکنیم :

function mouseAnim(event){
var element = document.createElement("div");
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
 
element.style.transition="all 0.5s linear";
 
document.body.appendChild(element);
 
var colors = ["#f00", "#6cf", "#0f0", "#00f"];
}

حالا باید یکی از رنگ هارا بصورت رندوم انتخاب کنیم و در متغیری بنام color آنرا ذخیره کنیم سپس color را به رنگ border نسبت میدهیم:

میتوانیم با استفاده از Math یک عدد رندوم در بازه تعداد اعضای آرایه colors ایجاد کنیم  

function mouseAnim(event){
var element = document.createElement("div");
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
 
element.style.transition="all 0.5s linear";
 
document.body.appendChild(element);
 
var colors = ["#f00", "#6cf", "#0f0", "#00f"];
 
var color = colors[Math.floor(Math.random()*colors.length)];
}

حالا رنگ بدست آمده در color را به رنگ بوردر المان نسبت میدهیم و برای اینکه دنباله بعد از مدتی  محو شود  یکسری استایل هارا به المان نسبت میدهیم.همچنین برای محو شدن باید از setTimeout استفاده کنیم تا بعد از مدت مثلا 10 میلی ثانیه شکل دنباله موس را محو نماید.

function mouseAnim(event){
var element = document.createElement("div");
element.setAttribute("class", "shape");
 
element.style.left=event.clientX+10+"px";
element.style.top=event.clientY+10+"px";
 
element.style.transition="all 0.5s linear";
 
document.body.appendChild(element);
 
var colors = ["#f00", "#6cf", "#0f0", "#00f"];
 
var color = colors[Math.floor(Math.random()*colors.length)];
 
element.style.borderColor=color;
setTimeout(function(){
 element.style.opacity=0;
},10)
}

حالا که بیس این کار را یاد گرفته اید میتوانید خودتان افکت ها و... جذابی تولید کنید.