$fx

نحتاج عند تطبيق مؤثرات باستخدام جافا سكريبت إلى تغيير خصائص عناصر في الصفحة (خصائص CSS للعقد في بنية XML) و يتم ذلك عن طريق DOM و الأحداث.
فمثلا لو فكرنا كيف نصنع حركة تقوم بتكبير صورة بشكل حركي مع تغيير موضعها لتصبح في منتصف الصفحة فوق كل العناصر الأخرى، نجد أن ذلك كفكرة يتم بتغيير كل من width,height,left,top مثلا و هذا التغيير عند جعله تابعا للزمن سيصبح أفضل من تغيير القيم من القيمة البدائية إلى النهائية فقط.
مثال آخر عند استعراض صور متلاحقة مع مؤثر مثل تغيير الشفافية فيمكن النظر لذلك بأننا نقول بتغيير الخاصية opacity للصورة (filter من أجل Internet Explorer) بين قيمتين.
المهم، هناك كثير من المكتبات التي توفر توابع جاهزة للقيام بمؤثرات متنوعة مثل jQuery مثلا و لكن إن كان المطلوب من المكتبة فقط تحقيق مؤثرات و لن نستخدم إمكانياتها الأخرى مثل Ajax أو التحقق من الحقول أو … فالأفضل هو بناء المكتبة فقط لهذا الغرض أو استخدام مكتبة صغيرة.
هنا سأتحدث قليلا عن مكتبة صغيرة هي $fx تحوي بعض التوابع التي تفيد في إعداد مؤثرات حيوية.
لاحظ الصفحة الرئيسية للموقع و حركة الغيوم مثلا، تؤمن هذه المكتبة عدة توابع هي مشروحة هنا.
سأكتب مثالا صغيرا عن كيفية تحريك div إلى موقع آخر في الصفحة مع تغيير الموضع و الأبعاد و الشفافية، إضافة لذلك كيفية تنفيذ تابع آخر عند انتهاء التحريك.

CSS Code:

#p{
position:absolute;
width:100px;
height:100px;
background-color:#F9F1D2;
border:1px solid #F1DF98;
text-align:center;
right:70px;
top:10px;
z-index:10;
}

Javascript Code:

//<![CDATA[
(function(){
window.onload = function(){
var p = document.getElementById("p");
zoomin(p);
function zoomin(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:70,to:410,step:20,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:10,to:66,step:4,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:520,step:30,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:380,step:20,delay:1,onfinish:function(){
zoomout(id);
id.innerHTML = 'Hello !';
}}).fxRun(null,1);
};
}
function zoomout(id){
id.onclick = function(){
$fx(id).fxAdd({type:'right',from:410,to:70,step:-20,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'top',from:66,to:10,step:-4,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'opacity',from:22,to:100,step:7,delay:1}).fxRun(null,1);
$fx(id).fxAdd({type:'width',to:100,step:-30,delay:10}).fxRun(null,1);
$fx(id).fxAdd({type:'height',to:100,step:-20,delay:10,onfinish:zoomin(id)}).fxRun(null,1);
};
}
};
})();
//]]

XHTML Code:

<div id="p"></div>

لتحميل مكتبة $fx النسخة المضغوطة من هنا و لتحميل المصدر من هنا، الملفات تخضع لرخصة MIT و GPL.
و لتحميل هذا المثال البسيط من هنا.

Advertisements

الأوسمة: , , , ,

2 تعليقان to “$fx”

  1. almhajer Says:

    كرا جزيلا على الايضاح بصراحة جكيوري وفرت الكثثير من الامكانيات وتبسيط الامور
    بخاصة انها تعتمد على المشاركة تشكر على المقالة

  2. salam Says:

    أهلا و سهلا 🙂

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: