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

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته،،

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


اولا مثال بسيط (يمكنكم تحميله من المرفق مع جميع ملفات الدرس)
ط¯ظ?ظ…ظˆ ط?طµظ…ظ?ظ… ط¨ظ†ط± ط¨ظˆط§ط³ط·ظˆ JQuery

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


1- صفحة HTML

اولا ننشيء صفحة HTML عادية ثم نضيف الكود التالي
بين وسمي
رمز PHP:



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




1- كود CSS


الكود مشروح ...
رمز Code:
/*نمط الشعار*/
.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...)
عن طريق الكود
رمز Code:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]


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






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

* 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

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

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

تحميل المرفق jquerybnr.zip)
وداعا للفلاش...شرح تصميم بنر بواسطة جيكوري - المنتدى مجمع السكريبتات - Forums G-Scripts.Com