الأرشيف ٢٠٠٨ - ٢٠١٢

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

أوه .. هذا المقال قديم ... ممممم قديم جداً

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

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

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

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

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

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

  1. قم بتحميل التطبيق .
  2. أضف السطر التالي في ترويسة الصفحة التي تريد استخدام التطبيق فيها :
    حيث your-path هو المسار الموجود عليه الملف reflection.js
  3. لتطبيق الانعكاس على الصورة قم باضافة class=”reflect” الى وسم الصورة ليكون بالشكل التالي :

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

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

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

صفحة التطبيق

الوسوم

‫۷ تعليقات

  1. جزاك الله كل خير أخي المُعاصر , شيء راائع الجافا سكربت شيء خيالي ! لحد الآن لاأستطيع أن أقول على نفسي مبتدء :)

    تحياتي
    فراس

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

إقرأ أيضاً

زر الذهاب إلى الأعلى
إغلاق