إنشاء سلايدر رائع مع صور مصغرة بـ CSS - مترجم #2

hussam3bd · 2014-12-19T14:34:13Z

#جمعة مبارة وكل عام ولغتنا العربية بخير وتطور *مشروع اليوم هو استكشاف اخر من التطبيقات العملية يمكننا عمله مع القليل من الابداع وبعض CSS.* *النتيجة النهائية لدرس اليوم ان ننتج طريقة رائعة لعرض شريط من الصور المصغرة وعندما يقوم المستخدم بتمرير الماوس عليها يشهدها بحجم كبير، دعونا نبدأ في الشرح.* *شرح الفكرة* الفكرة هنا او التخطيط بسيط جدا، نريد شريط من الصور المصغرة وصورة واحدة كبيرة، الجزء الاصعب هو عرض الصورة الكبيرة عندما يقوم المستخدم بتمرير الماوس على واحدة من الصورة المصغرة. *صورة توضيحية الفكرة:* http://bit.ly/16z2Fsc *نظرة على النتيجة:* http://bit.ly/16z3wZN في CSS لا يمكن انشاء اثنين من div كي يكون الاول نقطة عمل للثاني لاكن من السهل جدا فعل هذا الامر باستخدام JavaScript ولاكن Css تعطيك حرية اقل بالتعامل مع العناصر الخاصة بك. تطبيق المشروع سيكون بسيط نسبيا في حال كنا أذكياء في طريقة هيكلة صفحة الـ HTML. *HTML* لنبدأ في هذا العمل نحن بحاجة الى أربع صورة مصغرة واربعة صور بالحجم الكامل، سوف نتفق على شيء جميع الصور التي سوف نضيفها سوف تكون بهذا الشكل. هنا لدينا رابط واحد وبداخله الصورة المصغرة والصورة الكبيرة، وايضا عيدنا class مشترك لجميع الصور "thumb -big"، وهذا سوف يجعل المستخدم يمرر الماوس على صورة واحدة، يمكننا بسهولة التعامل مع الصورة الاخرى، سوف نرى هذا عند وصولنا الى CSS. والان سوف نعرف فائدة تنظيم الصفحة، يمكننا تكرار هذا الامر أربع مرات، ووضع كل شئ داخل div ونعطيه class=container. بما اننا وضعنا صورة واحدة كبيرة، والسبب في ذلك ان الصورة الكبيرة سوف تنزلق الى الاسفل عندما يقوم المستخدم بتمرير الماوس على الصورة الصغيرة، وسوف يبقى فراغ كبير في الوقت الذي لا يقوم المستخدم بتمرير الماوس على الصورة الصغيرة، ولملء هذا الفراغ سوف نضع صورة من اختيارنا. :) *معاينة:* http://bit.ly/16z3wZN هذا هو كل شيء في كود HTML، والان دعونا نبدأ في كود CSS. *محتوى المظهر:* في ملف CSS الخاص بك, سوف ننشأء مظهر المحتوى, تبدأ بتحديد position: relative, ولاحقا سوف نستخدم position: absolute. بعد ذلك نعين الطول والعرض المذكورين هنا .وهذه الأرقام ليست أرقام وأبعاد إجبارية و لكن تم حسابها بدقة وعناية إن كل صورة مصغرة px200 , أربع مرات يساوي ثمانمائة، بالإضافة إلى الهوامش (4 * 40) يساوي 960px. وبالمثل، الصور المصغرة هي 200px عالية، صورة كبيرة هو 400px وسوف يكون هناك 30px للهوامش بالنسبة للمجموع هو 660px عالية. .container { position: relative; height: 660px; width: 960px; overflow: hidden; margin: 0 auto; } قمنا بتحديد الطول والعرض كي نتمكن من عمل انزلاق للصورة من حدود المحتوى وهي مخفية، كما اننا نضع قيمة overflow : hidden الى حين الانتهاء من التركيز وكل هذا مع margin: auto. *التحقق من التقدم* نحن نبحث جدا في هذه النقطة، ولاكن لا تقلق، كل شيء على المسار الصحيح. *صورة للمعاينة:* http://bit.ly/1CbIw5C *المظهر المشترك لك شيء* كما رئيتم في الصورة، الصور سوف تكون في كل مكان ولاكن في هذه النقطة سوف نعيد كل شيء الى موضعه الصحيح. من جديد نحن بحاجة الى التفكير، نريد كل الصور المصغرة في مجموعة لوحدها، وايضا نريد كل الصور الكبيرة في مجموعة لوحدها، ولاكن لا نستطيع فعل هذا فقط باستخدام HTML. وعلى الرغم ان كل نوع من الصور (الصور المصغرة والكبيرة) لديه class خاص به, نحن يمكننا ان نضع float لجميع الصور الى اليسار, وبعدها نقوم بفصل الصور الكبيرة عن الصغيرة بواسطة position: absolute. *ونضع كود CSS على هذا الشكل* .container a { float: left; margin: 20px; } .big { position: absolute; top: 260px; left: 20px; } من المهم جداً أن نفهم كيف يعمل هذا لذا دعونا نقوم بتشغيله عن طريق روابطنا الظاهرة إلى اليسار إنها جعلت كل الصور تظهر مضمنة واحدة بعد آخرى , وعلى المكان المطلق للصور الكبيرة تنسحب منهم للخروج من هذا التدفق ويضعها على وجه التحديد في المكان الذي نحن قمنا بتعينه باستخدام الخصائص الأعلى والأيسر وهذا يترك فقط الصور المصغرة تكون ظاهرة أو بمعنى آخر عائمة. *التحقق من التقدم* بكتابة كود صغير جدا استطعنا تحويل الصور المبعثرة الى صور مرتبة وفي تخطيط جيد، لاحظ اننا سوف نرى صورة واحدة كبيرة لان الصورة الاخرى موجودة خلف هذه الصورة. *للمعاينة:* http://bit.ly/16z5PMt #Bring It To Life الان كل شيء في مكانه، وحان الوقت كي نبدا بالعمل، اول شيء يجب علينا القيام به هو نقل كافة الصور الكبيرة كي تظهر في مكان المحتوى عندما يقوم المستخدم بتمرير الماوس على الصورة المصغرة، وهذا الامر يجبرنا الى الرجوع خطوة الى الوراء ومراجعة الاكواد السابقة لدينا. نعود الى كود CSS وتعيد كافة الصور الكبيرة لتكون 900px من الاعلى، وهذا الامر يجعل الصور تندفع من الاسفل، وايضا يجب علينا انشاء مددة الانتقال "transition"، نستهدف المنطقة العليا ونحدد المدة الزمنية وهي سانية واحدة transition: top 1s ease، في النهاية سوف يصبح كود CSS على هذا الشكل. .big { position: absolute; top:900px; left:20px; -webkit-transition: top 1s ease; -moz-transition: top 1s ease; -o-transition: top 1s ease; -ms-transition: top 1s ease; transition: top 1s ease; } هذا الكود يدفع كل الصور الكبيرة من الاسفل الى خارج المحتوى، وسوف نستخدم الكود التالي كي نعيد الصورة التي وضعنها سابقا عندما يقوم المستخدم بإزالة الماوس عن الصورة. .featured { top: 260px; left: 20px; z-index: -3; } نحن هنا استخدمنا top و left كي نجعل صورة الغلاف " *الصورة المقصودة:* http://bit.ly/16z71iT " في المكان الصحيح لها واستخدمنا z-index كي نضمن ان صورة الغلاف " *الصورة المقصودة:* http://bit.ly/16z71iT " سوف تبقى خلف الصور الكبيرة عندما يقوم المستخدم بتمرير الماوس على الصورة المصغرة، ان لم نفعل هذا فلن نشاهد صورة الغلاف مرة اخرى عند انزلاق الصورة الكبيرة الى الاسفل. #Hover Styles المظهر اثناء تمرير الماوس الان وبعد ان وضعنا كل الصور الكبيرة خارج المحتوى، يجب علينا اعدتها عندما يقوم المستخدم بتمرير الماوس على الصورة المصغرة، ويتم عمل هذا الامر من خلال استهداف الصورة الكبيرة وإرجاعها الى الاعلى 260px، وايضا اريد ان اضيف تأثير الظل "shadow" على الصورة المصغرة حتى يعرف المستخدم انه مرر الماوس على هذه الصورة وبدأت في تفعيل التأثير. a:hover .thumb { -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5); box-shadow: 0px 0px 15px rgba(0,0,0,0.5); } a:hover .big { top: 260px; } وبسبب الطريقة أنشأنا HTML ,إن جميع الصور المصغرة اتوماتيكياً وتلقائياً تتوافق مع الصورة الكبيرة المرفقة ذلك بالتمرير فوق الصور المصغرة و المتصفح يرى كل واحد اينش ولايمانع بالتلاعب ولكن فقط بالجزء من الطبقة الكبيرة. #التحقق من العمل لقد أنهينا الـ Slider بشكل رائع . لنلقي نظرة على عرض مباشر في الأسفل للصور المصغرة لإعطائك اختبار العمل ولاستعراض براعة هذا المشروع . وهذه التجربة اشتملت على نسختين بديلتين التي نفذت الرسوم المتحركة المختفلة بعض الشي. *للمعاينة:* http://bit.ly/16z3wZN #نستنتج لقد تعلمنا الكثير من الاشياء في HTML , CSS وايضا تعلمنا كيف التعامل مع عنصر واحد في صفحة HTML والتلاعب به عن طريق CSS وايضا تعلمنا كيفية التلاعب في مكان العنصر والتعامل مع z-index. *ان راق لك هذا الشرح لا تنسانا من صالح دعائك :)* #هل ما زلت متردد الم تفكر بالبدء بعد ؟! المقال الماضي بعنوان : -10 تأثيرات سهلة لتمرير الماوس على الصور بستخدام CSS - مترجم #1 https://arabia.io/go/17009 المصدر designshack

حذف بواسطة المستخدم
hussam3bd
2014-12-19T14:34:13+00:00

برمجة

مجتمع للمبرمجين من جميع المستويات لتبادل المعرفة والخبرات. ناقش لغات البرمجة المختلفة، الحلول البرمجية، والمشاريع.

25.6 ألف متابع

أطلق موقعك الإلكتروني في دقائق

صمم موقعك كاملا بالسحب والإفلات بدون خبرة برمجية، واحجز مكانك على الإنترنت.

أنشئ موقعك الآن

إنشاء سلايدر رائع مع صور مصغرة بـ CSS - مترجم #2

التعليقات

برمجة

أطلق موقعك الإلكتروني في دقائق