بسم الله الرحمن الرحيم ، درس اليوم إن شاء الله خفيف ، إلا أنه سيقضي على حركات الفلاش التقليدية ، و التي لا تزيد الصفحات إلا بطأ ، وكما أقول دائما ، فإن مكتبات الجافا سكربت ستقضي في الايام المقبلة على الفلاش .لأنها تعطي نتائج مبهرة + خفة على الصفحات + لا تحتاج تثبيت أي ملحقات على المتصفح

مثال Demo

لرؤية مثال على درسنا ، اضغط هنا .

فكرة الدرس و أدواته :

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

سأحتاج في الدرس إلى مكتبة jQuery و هذا شيء عادي ، و كذلك ملف ملحق لتحريك الخلفية ، كما أنني سأصمم خلفية بسيطة متموجة أستطيع من خلالها عمل حركة أخدع بها الزائر و أعطي نوع من الجمالية على مشروعي :

سأفتح برنامج Photoshop و سأعمل المراحل التالية :

ساحصل على الصورة التالية و هي التي سأستعمل في تطبيقي :

طريقة العمل :

سأبدأ في التوزيع ، ساعمل قائمة عادية لعناوين مهمة ، و سأجعلها أفقية ، كود xhtml بسيط :

<ul id="a">
	<li><a href="#">الرئيسية</a></li>
	<li><a href="#">المدونة</a></li>
	<li><a href="#">خدمات</a></li>
	<li><a href="#">اتصل بنا</a></li>
</ul>

وهو كود خاص بقائمة ul فيها عناوين li بها روابط a ، شيء عادي جدا ، بالنسبة للـ id الذي سميته a هذا لتمييز القائمة عن غيرها لأنني استعملت أكثر من قائمة في تطبيقي ، يمكنك الاستغناء عنه أو استبداله بما يصلح لك .

كود css التابع لهذه القائمة :

ul, ul li {
	margin:0;
	padding:0;
}
ul {
	list-style:none; /*  لحذف نقط التابعة للقائمة */
}
li {
	float:right;
	width:100px;
	text-align:center;
	}
li a {
	font: 12px tahoma;
	display:block;	/* لجعل الرابط يملأ كل li */
	padding:10px 20px;
	height:100%;
	color:#000;
	text-decoration:none;
	border-right:1px solid #FFF;
	background:url(bg.jpg) repeat -20px 35px;
}

اقرأ التعليقات ..
الآن قائمتي جيدة ، و عادية جدا ، إلا أنك ستلاحظ أنني لم أضف li a:hover ، لأنني سأضيفها داخل كود js

بعد استدعائنا للمكتبة في وسم الهيد + الملف المحلق المسسول عن تحريك الخلفية ، يمكنك أن قراءته من هنا فهو بسيط إن شاء الله . نشرع في بناء كود تطبيقنا :
أولا سأحتاج لتوضيح الفكرة ، لتأثير يجب أن يطبق عند دخول المأشر على القائمة ، و عند خروجه ، وهنا سأحتاج لحدثين ، mouseover الخاص بدخول المؤشر على المكان المحدد ، mouseout عند خروج المؤشر ..

.mouseover(function(){
	$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
})

ما عملناه هنا ، وهو عند دخول المؤشر على منطقة الرابط ، سيتم تغيير الخلفية من المكان الافتراضي إلى المكان الجديد (-20px 94px) . ولا تنس duration في تحديد مدة الانتقال ، 500 عادية في نظري ، لو أردتها بطيئة أكثر ، يمكنك الزيادة فيها الى اي رقم يظهر لك .
نفس الشيء سأعمله عند خروج المؤشر من مكان الرابط ، إلا أنني سأغير مكان الخلفية ليتم التمويج (40px 35px)

.mouseout(function(){
	$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
})

الآن الحدثين جاهزين للعمل ، بقي فقط ندخلهما تحت الرابط المراد التطبيق عليه :

$(function(){
$('#a a')
	.mouseover(function(){
		$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
	})
	.mouseout(function(){
		$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:500, })
	})
});

وهكذا أكون قد طبقت تحريكا للخلفية و تم تمويه الزائر أنه هناك حركة مثل فلاشية ، و لا وجود للفلاش داخل قائمتي

ملاحظات :

• عادة ما يكون لي في مشاريعي أكثر من قائمة ، و قد لا اريد تطبيق الحركة إلا على قائمة واحدة ، او كل قائمة لها حركتها المعينة ، لذلك يمكنني أن أجعل الخلفية الافتراضية لكل قائمة و تغييرها داخل كود js بتطبيق اوامر css داخل كود jQuery كالتالي :

  .css( {backgroundPosition: "-20px 35px"} )

  وهكذا فلن أقع في خلط ما دمت اعي ما أفعل

• لا يتوقف عمل هذه الحركات فقط على القوائم ، و إنما يمكنني تطبيقها على فقرات و عناصر أخرى من الصفحة ، يمكنك تجربة ذلك و ستكون نفس النتيجة إن شاء الله
• خدعتك تتوقف على شكل الصورة التي ستصممها اولا

آمل ان تكون استفدت مما قدمته اليوم ، على أمل الاتقاء في درس جديد و فكرة جديدة إن شاء الله تعالى ، و السلام عليكم ورحمة الله

هذه التدوينة نُشرت في السبت, 8 أغسطس, 2009 عند 12:05 م و مصنفة تحت تصنيف JavaScript, css , xhtml. يمكنك متابعة أي تعليقات عبر رابط RSS 2.0. يمكنك ترك تعليق, أو تعقيب من مدونتك.
الوسوم :background, css, javascript, jquery, تأثير, قائمة