انعكاس الصور بإستخدام جافا سكريبت

انعكاس الصور هو احد التأثيرات الجميلة التي يمكن تطبيقها على الصور ، يمكن تطبيق هذا الانعكاس من خلال برامج تحرير الصور مثل الفوتوشوب .

انتشرت في الفترة الاخيرة عدد من تطبيقات الجافا سكريبت التي تسهل اضافة تاثير الانعكاس على الصور بكل سهولة دون الحاجه الى برامج تحرير الصور … هذه التطبيقات كثيرة و متعددة ولكني ساقتصر في هذه التدوينة على تطبيق Reflection.js .

يتيح Reflection.js تطبيق انعكاس على الصور مع امكانية تغيير مقدار ارتفاع الصورة المنعكسة و مدى شفافيتها كذلك فهو متوافق مع اكثر المتصفحات انتشاراً :

توافق تطبيق Reflection.js مع المستعرضات :

• Internet Explorer 5.5+
• Mozilla Firefox 1.5+
• Opera 9+
• Safari 2+

طريقة الاستخدام :

1. قم بتحميل التطبيق .
2. أضف السطر التالي في ترويسة الصفحة التي تريد استخدام التطبيق فيها :
   
   <script type="text/javascript" src="your-path/reflection.js"></script>

   1 2 3

   <script type="text/javascript" src="your-path/reflection.js"></script>

   حيث your-path هو المسار الموجود عليه الملف reflection.js
3. لتطبيق الانعكاس على الصورة قم باضافة class=”reflect” الى وسم الصورة ليكون بالشكل التالي :
   
   <img src="reflected.gif" class="reflect" alt="example image" />

   1 2 3

   <img src="reflected.gif" class="reflect" alt="example image" />

التحكم في ارتفاع الصور المنعكسة و شفافيتها :

للتحكم في ارتفاع الصورة المنعكسة اضف rheight متبوعة بالارتفاع المطلوب مثلا rheight66 الى class المحتوية على reflect لتكون بالشكل التالي :

للتحكم في مدى شفافية الصورة المنعكسة اضف ropacity متبوعة بالقيمه المطلوبه مثلا ropacity66 الى class المحتوية على reflect لتكون بالشكل التالي :

صفحة التطبيق