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

عود معكم زوار موقعنا الكرام , واليوم نستعرض معكم واحد من الدروس الشيقه والتى ستعجب بها
لانك ستتعرف اليوم على شىء جديد, قد تستمتع به عيناك لتشاهده



فهرس الموضوع:

1-مقدمه سريعه
2-المثال العملى لموقع
3-شرح الأوامر الخاصه بspritely المهمه لتعدل عليها
4-شرح كيفيه استخدامه وتركيبه على صفحه تريد استخدام spritely فيها


أولا: مقدمه سريعه:


كثير من يريد تصميم هيدر او اى جزء فى موقعه, ويريد استخدام المؤثرات الحركيه فى موقعه , ويلجأ الى
الفلاش لينفذ ذلك, ولكن بالرغم من جمال الفلاش الا انه له عيوب وهى:
1-يتطلب برنامج مشغل الفلاش لتشغيله
2-عمل لود على الصفحه وسحب الترافيك خصوصا لو كان ملف كبير
3-ازعاج زوار الموقع فقد لا يظهر من بطىء التحميل ........الخ

لذلك , ما رأيك ان نستغنى عن الفلاش ونستخدم مكتبة الjquery البرمجيه الرائعه لنقوم بذلك

باستخدام الspritely

ماهو spritely: هو عباره عن plugin قامت شركة artlogic ببرمجته لينضم لاحد مزايا الjquery الرائعه

صفحة المشروع الرئيسيه من هـــــــــنــــــــا

وظيفة spritely : يقدم لك هذا الplugin امكانيات متكامله لعمل مؤثرات حركيه للصور


ثانيا: المثال العملى :

قبل ان ابدأ فى شرحه بأذن الله أريدك ان تشاهد المثال العملى :

مثال عملى لموقع يعمل بspritely وشاهد مدى جمال الهيدر ورونقه :icon30:

ملحوظه: هذا الplugin يعمل بنجاح مع كافة المتصفحات الجديده بشكل جيد أفضل من المتصفحات القديمه , وهذا يختلف بأختلاف التصميم نفسه وليس كعيب فى plugin نفسه

يعنى يفضل تشوفه على chrome ,opera,ie7,8,firefox3




مثال عملى:

حمل الملفات والمثال من موقع المشروع:

ثالثا: شرح الأوامر الخاصه بspritely المهمه لتعدل عليها :



لحين واحده واحده ونشرح المهم وما يخصنا منه:

1-كيفية تحريك الطائر او اى صوره تريدها ؟

اولا سوف نقوم بعمل صوره للطائر بحيث تتغير حركة جناحيه بالترتيب

وأهم شرط ان عرض وطول للطائر الواحد او نقوم الفريم سيكون 180px فى 180px

تمام , الحين سنقوم بعمل div اسمه bird وسنقوم بعمل القيم الاتيه له :

كود:
#bird {
background: transparent url(images/bird-forward-back.png) 0 0 no-repeat;
position: absolute;
top: 150px;
left: 65px;
width: 180px;
height: 123px;
z-index: 2000;
cursor: pointer;
}

وبعد ذلك سنعطى أمر التحريك للطائر كالتى:

كود:
$('#bird').sprite({fps: 12, no_of_frames: 3});
حيث fps هى سرعة الفريم (الطائر الواحد) وno_of_frames هى عدد الفريمات
وكما نشاهد فالطائر له ثلاث حركات لذلك ستكون 3


2-كيفية جلب الطائر لنقرة الماوس فى اى جزء الصفحة :

سنقوم بوضع هذا الامر :

كود:
$('#bird').sprite({fps: 12, no_of_frames: 3}).activeOnClick().active();
$('body').flyToTap();


3-كيفية تحريك صورة الاعشاب لتظهر كأنها تتحرك؟





سنقوم بعمل div واسمه hill
ونقوم باعطاء خلفيه له واهم شىء التكرار الافقى,

كود:
#hill1 {
background: transparent url(images/hill-with-windmill.png) 0 104px repeat-x;


بعد ذلك , ستجد صورة أخرى للاعشاب بالطاحونه

أيضا بالمثل نسوى لها div ونقوم باعطاء خلفيه لها

كود:
#hill2 {
background: transparent url(images/hill2.png) 0 258px repeat-x;
}



الان بعد ما وضعنا هذه الصوره , نريد تحريكها فى الهيدر,

سوف نعطيها الامر الاتى:

كود:
$('#hill').pan({fps: 30, speed: 2, dir: 'left'});
حيث fps هى سرعة حركة الفريم, والspeed هى سرعة الصوره نفسها, والdir هو اتجاه حركه الصورة
وستكون من اليسار لليمين




4- كيف يمكننا تنسيق الصوره وعمق الصور فى الهيدر لتظهر كأنها تتحرك بكاملها؟

هذه نقطه مهمه وجلست اتطلع فى هذه الجزئيه كثير واقرأ المقصود منها, والحمدلله فهمناها

الحين لو تلاحظ فى الهيدر انه يوجد صور للاتى:

1-الطائر
2-الاعشاب
3-السحاب

كيف يمكننا ان نجعل السرعه بين هذول الثلاثه متناسقه ؟

اولا: فى أمر pan السابق لابد ان نحدد عمق الصوره فى الهيدر؟
يعنى شو عمق؟ :nosweat:

شوف الصوره الاتيه :


لعمق المقصود منها مكان الصوره بالهيدر, يعنى لو تلاحظ ان صورة الاعشاب الاولى هى التى فى المقدمه, ثم أتى بعدها صورة الاعشاب بالطاحونه, ثم صورة السحاب

لذلك لابد لكل صوره ان نعطى لها أمر العمق depth فى الامر السابق Pan بحيث يصبح كالاتى:

كود:
$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30})

تمام , نرجع لمحور نقطتتا وهو كيفية التنسيق بين سرعة الصور ,

سوف نستخدم لذلك الفانشكن spRelSpeed بحيث راح نختار الصور التى نريد التنسيق بينها
ونحدد لها سرعة

مثال:

كود:
$('#clouds, #hills').spRelSpeed(30);
الامر السابق سيقوم بعمل تنسيق بسرعة 30 على افتراض اننا اعطينا العمق hill2 30





5- كيفية تحديد اتجاه حركة الطائر؟

لو تلاحظ فى اول صوره سويناها للطائر, فهى مقسمه لصفين
-صف علوى خاص باتجاه حركة الطائر من اليسار لليمين
-صف سفلى خاص باتجاه حركة الطائر من اليمين لليسار

وحتى نحدد حركة اتجاه الطائر سوف نستخدم spstate

مثال:

كود:
$('#bird').spState(2); // fly backwards (row 2 of the sprite)
$('#bird').spState(1); // fly forwards (row 1 of the sprite)


خامسا: شرح كيفيه استخدامه وتركيبه على صفحه تريد استخدام spritely فيها ؟


اولا: نجلب ملفاتنا بوضعها بين وسم head

كود:





ثانيا: الcss:

فى نفس الصفحه اللى راح تضعها بين وسمى head:

كود:



3- أوامر الjquery

بين وسمى head........

كود:


(function($) {
$(document).ready(function() {
$('#logo').click(function() {
document.location.href = 'http://www.spritely.net/';
});

$('#bird')
.sprite({fps: 9, no_of_frames: 3})
.spRandom({top: 50, bottom: 200, left: 300, right: 320})
.isDraggable()

.activeOnClick()
.active();
$('#clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10});
$('#hill2').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
$('#hill1').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
$('#hill1, #hill2, #clouds').spRelSpeed(;

window.actions = {
fly_slowly_forwards: function() {
$('#bird')
.fps(10)
.spState(1);
$('#hill1, #hill2, #clouds')
.spRelSpeed(10)
.spChangeDir('left');
},
fly_slowly_backwards: function() {
$('#bird')
.fps(10)
.spState(2);
$('#hill1, #hill2, #clouds')
.spRelSpeed(10)
.spChangeDir('right');
},
fly_quickly_forwards: function() {
$('#bird')
.fps(20)
.spState(1);
$('#hill1, #hill2, #clouds')
.spRelSpeed(30)
.spChangeDir('left');
},
fly_quickly_backwards: function() {
$('#bird')
.fps(20)
.spState(2);
$('#hill1, #hill2, #clouds')
.spRelSpeed(30)
.spChangeDir('right');
},
fly_like_lightning_forwards: function() {
$('#bird')
.fps(25)
.spState(1);
$('#hill1, #hill2, #clouds')
.spSpeed(40)
.spChangeDir('left');
},
fly_like_lightning_backwards: function() {
$('#bird')
.fps(25)
.spState(2);
$('#hill1, #hill2, #clouds')
.spSpeed(40)
.spChangeDir('right');
}
};

window.page = {
hide_panels: function() {
$('.panel').hide(300);
},
show_panel: function(el_id) {
this.hide_panels();
$(el_id).show(300);
}
}

});
})(jQuery);




4-الdivs

بين وسمى body:

كود:



انتهى الدرس

أتمنى أكون وٌفقت فى شرحه ولو بشىء بسيط من الفهم

يسلموووووووو
كتييير حلوووو

انتي احلى بكثير
شكرا

شكرا كتييير
والعفوووو واجبى