بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته ..
اليوم وانا أتصفح موقع TutPlus المعروف , وجدت تطبيق جيكويري ممتاز جداً و حبيت أنقله عشان تعم الفائدة ..
مُلاحظة : الموجود في الموقع شرح كامل لعمله و تطبيقه وانا لم أشاهده بالكامل بصراحة , لكن نقلت لكم الكود جاهز مع بعض الملاحظات مني لـ كيفية التعديل عليه + قمت بتعديلات بسيطة عليه لأعطيه مرونة أكبر ..
أول شي مثال على التطبيق : untitled
رمز PHP:
untitled
/* Setup...not important. */
.img-wrap {
position: relative;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid
XImageTransform.Microsoft.BasicImage(grayscale=1);
}
#cvs-src:hover {
filter: none;
}
نأتي لـ شرح بسيط للي فوق ,السلام عليكم ورحمة الله وبركاته ..
اليوم وانا أتصفح موقع TutPlus المعروف , وجدت تطبيق جيكويري ممتاز جداً و حبيت أنقله عشان تعم الفائدة ..
مُلاحظة : الموجود في الموقع شرح كامل لعمله و تطبيقه وانا لم أشاهده بالكامل بصراحة , لكن نقلت لكم الكود جاهز مع بعض الملاحظات مني لـ كيفية التعديل عليه + قمت بتعديلات بسيطة عليه لأعطيه مرونة أكبر ..
أول شي مثال على التطبيق : untitled
رمز PHP:
untitled
/* Setup...not important. */
.img-wrap {
position: relative;
}
/* Handles animation of b*w to color */
canvas {
position: absolute;
left: 0;
top: 0;
opacity: 1;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
canvas:hover {
opacity: 0;
}
/* If you MUST have IE support */
#cvs-src {
filter: progid
XImageTransform.Microsoft.BasicImage(grayscale=1); }
#cvs-src:hover {
filter: none;
}
في البداية :
رمز PHP:
طبعاً هالجزئية مني , و هي عشان نحصل على مقاسات الصورة طول و عرض لأننا راح نحتاجها بعدين , الموقع طبعاً كان مثبت الطول و العرض على 500 :crazy: ! وبين القوسين مسار الصورة ..
و بعدها خصائص Css واضحة للجميع , لكن ما أنصح بالتعديل عليها لأنها تناسب التطبيق ,,
رمز PHP:
و في الأخير قمنا بـ استدعاء الصورة داخل Div خاص بخصائص الـ Css الخاصة بـ img-wrap
و أعطيناها الـ Id "cvs-src" عشان تطبق الدالة الخاصة بالجيكويري ..
و طبعا رابط الصورة بين علامتي التنصيص , وفي الأخير تدخل الـ Php لوضع المقاسات ..
طبعاً الي حابب يعرف وش فايدة حركة المقاسات يغير الطول والعرض بنفسه ويشوف المشكلة , الي هي أن الجزء الي بيتم تسويده من الصورة راح يكون حسب القياسات :crazy: !
أتمنى أني أفدت الجميع , سامحوني على القصور , سلام عليكم ..
