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

انتشرت في الفترة الاخيرة عدد من تطبيقات الجافا سكريبت التي تسهل اضافة تاثير الانعكاس على الصور بكل سهولة دون الحاجه الى برامج تحرير الصور … هذه التطبيقات كثيرة و متعددة ولكني ساقتصر في هذه التدوينة على تطبيق 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>

    حيث your-path هو المسار الموجود عليه الملف reflection.js

  3. لتطبيق الانعكاس على الصورة قم باضافة class=”reflect” الى وسم الصورة ليكون بالشكل التالي :
    <img src="reflected.gif" class="reflect" alt="example image" />

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

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

class="reflect rheight66"

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

class="reflect ropacity66"

صفحة التطبيق