loulou ange
11-01-2013, بتوقيت غرينيتش 04:28 PM
http://www.dzbatna.com/images/icons/icon30.gif ط¹ط±ط¶ 3d ط±ط§ط¦ط¹ ظ„ظ…ظ†طھط¬ط§طھظƒ ظ…ط¹ JQuery Impress ! (http://www.dzbatna.com/t2146131/)
http://michael-designs.com/wp-content/uploads/impress.jpg (http://michael-designs.com/%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-%D8%B9%D8%B1%D8%B6-%D8%B1%D8%A7%D8%A6%D8%B9-%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA%D9%83-%D9%85%D8%B9-impress/)
http://michael-designs.com/wp-content/uploads/online_demo.jpg (http://michael-designs.com/scripts/impress-showcase/) http://michael-designs.com/wp-content/uploads/download_03.jpg (http://michael-designs.com/%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-%D8%B9%D8%B1%D8%B6-%D8%B1%D8%A7%D8%A6%D8%B9-%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA%D9%83-%D9%85%D8%B9-impress/)
هل سئمت من شكل صفحاتك القديمة ؟ هل تمتلك منتج pluginات و تود عرضها في شكل جذاب ؟ أقرأ السطور القليلة القادمة لتحويل صفحاتك الثابتة إلى صفحات 3D جذابة في ثوانٍ قليلة …
بإستخدام مكتبة impress.js (https://github.com/bartaz/impress.js/) ، يمكننا تصميم عروض مذهلة فقط بإستخدام سطور قليلة لتحويل أي صفحة قديمة إلي عرض تقديمي جذاب
~ ملف HTML ~
نبدأ بملف HTML5 بسيط كما موضح :
رمز Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Impress! Showcase | Michael Designs</title> <!-- Google Webfonts and our stylesheet --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="impress" class="impress-not-supported"> <!-- The Slides Will Go Here --> </div> <a id="arrowLeft" class="arrow"><</a> <a id="arrowRight" class="arrow">></a> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/impress.js"></script> <script src="assets/js/script.js"></script> </body> </html>
الملف يبدو عادياً بإستثناء إضافة خط جوجل GOOGLE في الهيدر header ، مكوّن #Impress div في وسط الصفحة وهو الذي سيستقبل شرائح العرض ، في النهاية نضيف مكتبة Impress.js و ملف script.js الذي سيستضيف الإعدادات المختلفة ،
الشرائح من نوع div ذات كلاس step بالإضافة إلى بعض إعدادات 3d الأخرى لكي يتم قرائتها من خلال مكتبة impress ،
~ إستخدام مكتبة Impress ~
مكتبة impress تقوم بإستخراج كود code css3 حقيقي ، كل ما علينا فعله هو إخبار المكتبة بالكيفية التي نريد بها تدوير وتحريك شرائح العرض من خلال بعض الإعدادات :
* data-x, data-y, data-z : إعدادات تحريك الشريحة في الفضاء 3d
* data-rotate, data-rotate-x, data-rotate-y : إعدادات دوران الشرائح حول محور
* data-scale : حجم الشريحة من حيث التكبير أو التصغير
ولتطبيق هذه الإعدادات على الشرائح ، لاحظ الآتي :
رمز Code:
<!-- الشريحة الأولى .. تحتفظ بمكانها دائماً لهذا لن نقوم بكتابة اعدادات التحريك --> <div id="intro" class="step" data-x="0" data-y="0"> <h2>Introducing Galaxy Nexus</h2> <p>Android 4.0<br /> Super Amoled 720p Screen<br /> <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" /> </div> <!-- الشريحة الثانية .. الإعدادات تبين تحريك الشريحة خارج نطاق العرض ، وتكبيرها بنسبة 1.8 --> <div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190"> <h2>Simplicity in Android 4.0</h2> <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p> <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" /> </div> <!-- وهكذا لباقي الشرائح ... --> <div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270"> <h2>Connect & Share</h2> <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p> <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" /> </div> <div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180"> <h2>Instant Upload</h2> <p>Your photos upload themselves with Instant Upload, which makes ..</p> <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" /> </div> <div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270"> <h2>Jam on with Google Music</h2> <p>Google Music makes discovery, purchase, and listening effortless and..</p> <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" /> </div>
عند بدء العرض ، يقوم Impress بقراءة الإعدادات المكتوبة لكل شريحة ويقوم بترجمتها إلى كود code css3 حقيقي لتحقيق عرض 3d رائع وكأنك تتنقل بين الشرائح بكاميرا ثلاثية الأبعاد ، لكن يجب إعطاء كل شريحة إعدادات data-x , data-y , data-scale … وهكذا يدوياً لتحقيق أفضل النتائج ،
~ إعدادات CSS ~
لكي نتمكن من تشغيل العرض ، نقوم بإضافة لمسة جمالية لمساحة العرض بإستخدام سحر الـ css :
رمز Code:
/*---------------------------- Styling the presentation -----------------------------*/ #impress:not(.impress-not-supported) .step{ opacity:0.4; } #impress .step{ width:700px; height: 600px; position:relative; margin:0 auto; -moz-transition:1s opacity; -webkit-transition:1s opacity; transition:1s opacity; } #impress .step.active{ opacity:1; } #impress h2{ font: normal 44px/1.5 'PT Sans Narrow', sans-serif; color:#444648; position:absolute; z-index:10; } #impress p{ font: normal 18px/1.3 'Open Sans', sans-serif; color:#27333f; position:absolute; z-index:10; } #impress img{ position:absolute; z-index:1; }
ولتطبيق استايل styleات الشرائح :
رمز Code:
/*---------------------------- Slide 1 - Intro -----------------------------*/ #impress #intro{ width: 500px; } #intro h2{ text-align: center; width: 100%; } #intro p{ font-size: 22px; left: 290px; line-height: 1.6; top: 220px; white-space: nowrap; } #intro img{ top: 120px; }
وهكذا لباقي الشرائح … يمكنك قراءة الكود code كاملاً في ملف assets/css/style.css
لو رجعت لجزء الـ HTML من هذا الشرح طريقة ، ستجد أننا وضعنا كلاس impress-not-supported لمربع العرض ، هذا الكلاس يتم حذفه تلقائياً بواسطة الإسكربت عند تشغيل الصفحة على المتصفحات الحديثة التي تدعم css3 ..
إلى هنا يتبقى كتابة أكواد بسيطة لبدء العرض ، أيضاً لإضافة خاصية مفيدة وهي التنقل بين الشرائح بإستخدام أسهم لوحة المفاتيح …
~ إعدادات الـ JQuery ~
الكود code التالي يقوم بإستدعاء مكتبة Impress ، كما يقوم بربط اسهم لوحة المفاتيح لكي تتحكم في الإنتقال بين الشرائح
رمز Code:
$(function(){ var imp = impress(); $('#arrowLeft').click(function(e){ imp.prev(); e.preventDefault(); }); $('#arrowRight').click(function(e){ imp.next(); e.preventDefault(); }); });
تم بحمد الله
إلى هنا نكون قد وصلنا لنهاية الشرح طريقة ، لا تبخل علينا بآرائك http://www.dzbatna.com/images/smilies/shiny01.gif
وتابعنا على موقعنا (http://www.michael-designs.com)لمزيد من الإسكربتات المميزة
التعديل الأخير كان بواسطة Michael_ZZ; 20 - 08 - 2014 الساعة 20:44
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://michael-designs.com/wp-content/uploads/impress.jpg (http://michael-designs.com/%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-%D8%B9%D8%B1%D8%B6-%D8%B1%D8%A7%D8%A6%D8%B9-%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA%D9%83-%D9%85%D8%B9-impress/)
http://michael-designs.com/wp-content/uploads/online_demo.jpg (http://michael-designs.com/scripts/impress-showcase/) http://michael-designs.com/wp-content/uploads/download_03.jpg (http://michael-designs.com/%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-%D8%B9%D8%B1%D8%B6-%D8%B1%D8%A7%D8%A6%D8%B9-%D9%84%D9%85%D9%86%D8%AA%D8%AC%D8%A7%D8%AA%D9%83-%D9%85%D8%B9-impress/)
هل سئمت من شكل صفحاتك القديمة ؟ هل تمتلك منتج pluginات و تود عرضها في شكل جذاب ؟ أقرأ السطور القليلة القادمة لتحويل صفحاتك الثابتة إلى صفحات 3D جذابة في ثوانٍ قليلة …
بإستخدام مكتبة impress.js (https://github.com/bartaz/impress.js/) ، يمكننا تصميم عروض مذهلة فقط بإستخدام سطور قليلة لتحويل أي صفحة قديمة إلي عرض تقديمي جذاب
~ ملف HTML ~
نبدأ بملف HTML5 بسيط كما موضح :
رمز Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Impress! Showcase | Michael Designs</title> <!-- Google Webfonts and our stylesheet --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="impress" class="impress-not-supported"> <!-- The Slides Will Go Here --> </div> <a id="arrowLeft" class="arrow"><</a> <a id="arrowRight" class="arrow">></a> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/impress.js"></script> <script src="assets/js/script.js"></script> </body> </html>
الملف يبدو عادياً بإستثناء إضافة خط جوجل GOOGLE في الهيدر header ، مكوّن #Impress div في وسط الصفحة وهو الذي سيستقبل شرائح العرض ، في النهاية نضيف مكتبة Impress.js و ملف script.js الذي سيستضيف الإعدادات المختلفة ،
الشرائح من نوع div ذات كلاس step بالإضافة إلى بعض إعدادات 3d الأخرى لكي يتم قرائتها من خلال مكتبة impress ،
~ إستخدام مكتبة Impress ~
مكتبة impress تقوم بإستخراج كود code css3 حقيقي ، كل ما علينا فعله هو إخبار المكتبة بالكيفية التي نريد بها تدوير وتحريك شرائح العرض من خلال بعض الإعدادات :
* data-x, data-y, data-z : إعدادات تحريك الشريحة في الفضاء 3d
* data-rotate, data-rotate-x, data-rotate-y : إعدادات دوران الشرائح حول محور
* data-scale : حجم الشريحة من حيث التكبير أو التصغير
ولتطبيق هذه الإعدادات على الشرائح ، لاحظ الآتي :
رمز Code:
<!-- الشريحة الأولى .. تحتفظ بمكانها دائماً لهذا لن نقوم بكتابة اعدادات التحريك --> <div id="intro" class="step" data-x="0" data-y="0"> <h2>Introducing Galaxy Nexus</h2> <p>Android 4.0<br /> Super Amoled 720p Screen<br /> <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" /> </div> <!-- الشريحة الثانية .. الإعدادات تبين تحريك الشريحة خارج نطاق العرض ، وتكبيرها بنسبة 1.8 --> <div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190"> <h2>Simplicity in Android 4.0</h2> <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p> <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" /> </div> <!-- وهكذا لباقي الشرائح ... --> <div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270"> <h2>Connect & Share</h2> <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p> <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" /> </div> <div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180"> <h2>Instant Upload</h2> <p>Your photos upload themselves with Instant Upload, which makes ..</p> <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" /> </div> <div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270"> <h2>Jam on with Google Music</h2> <p>Google Music makes discovery, purchase, and listening effortless and..</p> <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" /> </div>
عند بدء العرض ، يقوم Impress بقراءة الإعدادات المكتوبة لكل شريحة ويقوم بترجمتها إلى كود code css3 حقيقي لتحقيق عرض 3d رائع وكأنك تتنقل بين الشرائح بكاميرا ثلاثية الأبعاد ، لكن يجب إعطاء كل شريحة إعدادات data-x , data-y , data-scale … وهكذا يدوياً لتحقيق أفضل النتائج ،
~ إعدادات CSS ~
لكي نتمكن من تشغيل العرض ، نقوم بإضافة لمسة جمالية لمساحة العرض بإستخدام سحر الـ css :
رمز Code:
/*---------------------------- Styling the presentation -----------------------------*/ #impress:not(.impress-not-supported) .step{ opacity:0.4; } #impress .step{ width:700px; height: 600px; position:relative; margin:0 auto; -moz-transition:1s opacity; -webkit-transition:1s opacity; transition:1s opacity; } #impress .step.active{ opacity:1; } #impress h2{ font: normal 44px/1.5 'PT Sans Narrow', sans-serif; color:#444648; position:absolute; z-index:10; } #impress p{ font: normal 18px/1.3 'Open Sans', sans-serif; color:#27333f; position:absolute; z-index:10; } #impress img{ position:absolute; z-index:1; }
ولتطبيق استايل styleات الشرائح :
رمز Code:
/*---------------------------- Slide 1 - Intro -----------------------------*/ #impress #intro{ width: 500px; } #intro h2{ text-align: center; width: 100%; } #intro p{ font-size: 22px; left: 290px; line-height: 1.6; top: 220px; white-space: nowrap; } #intro img{ top: 120px; }
وهكذا لباقي الشرائح … يمكنك قراءة الكود code كاملاً في ملف assets/css/style.css
لو رجعت لجزء الـ HTML من هذا الشرح طريقة ، ستجد أننا وضعنا كلاس impress-not-supported لمربع العرض ، هذا الكلاس يتم حذفه تلقائياً بواسطة الإسكربت عند تشغيل الصفحة على المتصفحات الحديثة التي تدعم css3 ..
إلى هنا يتبقى كتابة أكواد بسيطة لبدء العرض ، أيضاً لإضافة خاصية مفيدة وهي التنقل بين الشرائح بإستخدام أسهم لوحة المفاتيح …
~ إعدادات الـ JQuery ~
الكود code التالي يقوم بإستدعاء مكتبة Impress ، كما يقوم بربط اسهم لوحة المفاتيح لكي تتحكم في الإنتقال بين الشرائح
رمز Code:
$(function(){ var imp = impress(); $('#arrowLeft').click(function(e){ imp.prev(); e.preventDefault(); }); $('#arrowRight').click(function(e){ imp.next(); e.preventDefault(); }); });
تم بحمد الله
إلى هنا نكون قد وصلنا لنهاية الشرح طريقة ، لا تبخل علينا بآرائك http://www.dzbatna.com/images/smilies/shiny01.gif
وتابعنا على موقعنا (http://www.michael-designs.com)لمزيد من الإسكربتات المميزة
التعديل الأخير كان بواسطة Michael_ZZ; 20 - 08 - 2014 الساعة 20:44
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
