وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري

بسم الله الرحمن الرحيم السلام عليكم ورحمة الله وبركاته،، في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery و نترك ال ..


موضوع مغلق

الصفحة 1 من 2 < 1 2 > الأخيرة »


14-02-2011 07:40 مساء
cherire
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 870
المشاركات : 467
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 19-1-1995
يتابعهم : 0
يتابعونه : 1
قوة السمعة : 501
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،

في درس اليوم سنتعلم طريقة تصميم بنر بواسطة JQuery
و نترك الطرق التقليدية باستعمال برامج الفلاش او الفوتوشوب
sanstitre7b

اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس)

هنا

تحميل المرفق : (jquerybnr.zip)

اذا فل نتبدا مع بعض لندخل عالما جديدا من التصميم باستعمال احدث تقنيات الويب

1- صفحة HTML

اولا ننشيء صفحة HTML عادية ثم نضيف الكود التالي
بين وسمي <body>




	   <div class="content">
<div id="ca_banner2" class="ca_banner ca_banner2">
			 <div class="ca_slide ca_bg2">
				<div class="ca_zone ca_zone1"><!--الصورة العليا-->
				    <div class="ca_wrap ca_wrap1">					 
				    <img src="images/gs1.png" class="ca_shown" alt=""/>
				    <img src="images/gs2.png" alt="" style="display:none;"/></a> </div>
			   </div>
				<div class="ca_zone ca_zone2"><!--صورة الوسط-->
				    <div class="ca_wrap ca_wrap2">
				    <img src="images/gs3.png" class="ca_shown" alt=""/></a>
				    <img src="images/gs4.png" alt="" style="display:none;"/></a> </div>
			   </div>
			 </div>
		  </div>

		  <div style="clear:both;"></div>
		  <div>



لاحظ اننا استخدمنا صورتين في كل عنصر

1- كود CSS

الكود مشروح ...

/*نمط الشعار*/
.ca_banner{
    position:relative;
    overflow:hidden;
    background:#f0f0f0;
    padding:10px;
    border:1px solid #fff;
    -moz-box-shadow:0px 0px 2px #aaa inset;
}
.ca_slide{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
}
.ca_zone{
    position:absolute;
    width:100%;
}
.ca_wrap{
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.ca_wrap img.ca_shown{
    display:inline !important;
}

/*حجم البنر*/
.ca_banner2{
    width:120px;
    height:600px;
}
/*الخلفية*/
.ca_bg2{
    background:#fff url(../images/bgSmall.jpg) no-repeat top left;
}
.ca_banner2 .ca_zone1{
    top:10px;
    left:0px;
}
.ca_banner2 .ca_wrap1, /*نفس الحجم*/
.ca_banner2 .ca_wrap2{
    width:120px;
    height:220px;
}
.ca_banner2 .ca_zone2{
    top:250px;
    left:0px;
}
1- جافا سكريبت JavaScript

الان سوف نهيكل الخطوات في الخطوة الاحيرة من الدرس
عن طريق الجافا سكريبت الى خطوات
(خطوة1..خطوة2...)
عن طريق الكود


[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]



في البنر المطروح كمثال
لدينا حركتين في كل عنصر
و 4 حركات كلية في البنر


	  <!-- كود الجافا سكريبت -->
	   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	   <script type="text/javascript" src="jquery.easing.1.3.js"></script>
	   <script src="jquery.transform-0.8.0.min.js"></script>
	   <script src="jquery.banner.js" type="text/javascript"></script>
	   <script type="text/javascript">
		  $(function() {

			 //4 حركات للبنر 
			 $('#ca_banner2').banner({
				steps : [
				    [
					   //1 حركة :
					   [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}],
					   [{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}]
				    ],
				    [
					   //2 حركة:
					   [{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}],
					   [{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
				    ],
				    [
					   //3 حركة:
					   [{"to" : "2"}, {"effect": "slideOutLeft-slideInLeft"}],
					   [{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
				    ],
				    [
					   //4 حركة:
					   [{"to" : "1"}, {"effect":"zoomOutRotated-zoomInRotated"}],
					   [{"to" : "1"}, {"effect": "zoomOutRotated-zoomInRotated"}],
				    ]
				],
				total_steps    : 4,
				speed	    : 2000
			 });
		  });
	   </script>
	   



و هذه بعض الاوامر الاخرى التي يمكن استعمالها على البنر كحركات

* zoomOut-zoomInRotated
* zoomOutRotated-zoomInRotated
* zoomOut-zoomIn
* slideOutRight-slideInRight
* slideOutLeft-slideInLeft
* slideOutTop-slideInTop
* slideOutBottom-slideInTop
* slideOutTop-slideInBottom
* fadeOut-fadeIn commented
* fadeOut-zoomIn commented
* zoomOut-fadeIn commented

و يمكنك بطبيعة الحال استعمال الصور و اضافاء تاثيرات خاصة على بنرك لاضفاء الجمالية و الخصوصية على تصميمك
biggrin2

الى هنا ينتهي درسنا و امل ان يكون قد اوفى بالمطلوب
ارجو من كل من قرا الدرس ان يبدي رايه في هذه التقنية الجديدة و التي قد تغنينا عن الفلاش
biggrin2


:. الموضوع الاصلى: هنا | المصدر:المنتدى - مجمع السكريبتات | كاتب الموضوع: admin .:

14-02-2011 09:09 مساء
مشاهدة مشاركة منفردة [1]
ahmed imad
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 865
المشاركات : 366
الدولة : المغرب
الجنس : ذكر
تاريخ الميلاد : 13-2-1994
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 1169
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
شكراجزيلا على الشرح 704746 أخي الكريم

14-02-2011 10:13 مساء
مشاهدة مشاركة منفردة [2]
نجم الويب
عضو سوبر ستار
rating
العضو غائب بلاكهرباء حتى اشعار آخر ,والمعذرة على الغياب المتكررلأسباب وظروف ولله الحمد , دعواتكم لبلادي وبلاد المسلمين ..
معلومات الكاتب ▼
تاريخ الإنضمام : 23-07-2010
رقم العضوية : 599
المشاركات : 3734
الدولة : أمي اليمن
الجنس : ذكر
تاريخ الميلاد : 4-3-1987
الدعوات : 1
يتابعهم : 2
يتابعونه : 1
قوة السمعة : 8237
موقعي : زيارة موقعي
اصدار المنتدى : 3.0.2
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
704746 704746 704746 704746
جميل هذا الابداع

18-02-2011 05:03 صباحا
مشاهدة مشاركة منفردة [3]
m_rezk2000
عضـو بـارز
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 07-12-2010
رقم العضوية : 1059
المشاركات : 1335
الدولة : أم الدنيا مصر
الجنس : ذكر
تاريخ الميلاد : 23-5-1969
الدعوات : 1
يتابعهم : 0
يتابعونه : 2
قوة السمعة : 2883
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
اشكرك على الشرح

19-02-2011 04:18 صباحا
مشاهدة مشاركة منفردة [4]
حركتات
عضـو مشارك
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 19-12-2010
رقم العضوية : 1094
المشاركات : 13
الجنس : أنثى
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 0
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
الموقع يحتاج تسجيل smile

ياريت ترفقلنا البرنامج هنا
وشكرا على البرنامج الحلو wink_3

20-02-2011 10:50 صباحا
مشاهدة مشاركة منفردة [5]
ahmed imad
عضـو نشيط
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 26-10-2010
رقم العضوية : 865
المشاركات : 366
الدولة : المغرب
الجنس : ذكر
تاريخ الميلاد : 13-2-1994
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 1169
موقعي : زيارة موقعي
اصدار المنتدى : غير محدد
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
عدرا أخي لكن موقعك يطلب التسجيل g

21-02-2011 02:39 صباحا
مشاهدة مشاركة منفردة [6]
sayhi
عضو فعال
rating
معلومات الكاتب ▼
تاريخ الإنضمام : 22-08-2010
رقم العضوية : 647
المشاركات : 215
الدولة : الجزائر
الجنس : ذكر
تاريخ الميلاد : 27-7-1968
يتابعهم : 0
يتابعونه : 0
قوة السمعة : 46
موقعي : زيارة موقعي
اصدار المنتدى : 2.1.3
 offline 
look/images/icons/i1.gif وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري
مشكور اخي
لكن لو تتكرم وتضع لنا البرنامج في المرفق لي ان الموقع يشترط التسجيل
ومشكور مقدما


الصفحة 1 من 2 < 1 2 > الأخيرة »


الكلمات الدلالية
لا يوجد كلمات دلالية ..







الساعة الآن 08:48 صباحا