الانتقال إلى المحتوى

الانيميشن مع (font Awesome)فى اوراكل ابكس


alisaleh84

Recommended Posts

ستعرف اليوم على استخدام الانيميشن مع كلاسات

font awesome

نعلم جميعا ان اوراكل ابكس اصبحت تتدعم كلاسات font awesome 
لاستخدامها بدل من الصور 
وكل ماعليك اذا احتجت ان تضع اى صوره لايكونه ان تكتب اسم الكلاس فى المكان المحدد لها
ويمكن ان تعرف الكثير عن كلاسات font awesome من خلال الموقع http://fontawesome.io/icons/
ولكن الجديد فى هذا الدرس استخدام كلاس اخر للانيميشن كل ماعليك هو اضافه الكلاس المطلوب بجوار اسم الكلاس الرئيسي
ويوجد ثلاث انواع للحركه بالنسبه للعناصر
اما مع 

On DOM load

او  مع 

On parent hover

او مع

On hover

وهذا الموقع الذى يحتوى على الكلاسات
http://l-lin.github.io/font-awesome-animation/
***************************************************
ولكن عيك اولا ان تضع لنك ملف css
فى الصفحه المطلوبه
او ان تضعه فى تمبلت المستخدم فى صفحات حتى يتم تفعيل الكلاسات
وهذا مثال عملى على الانيميشن مع كلاسات

font awesome
https://apex.oracle.com/pls/apex/f?p=92775:7:9275140265164::NO:::
مرفق : ملف css

تم تعديل بواسطة alisaleh84
رابط هذا التعليق
شارك

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

تم تعديل بواسطة toota
رابط هذا التعليق
شارك

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

ياريت لو امكن اضافة صفحة توضح المطلوب (source code)

رابط هذا التعليق
شارك

 

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

ياريت لو امكن اضافة صفحة توضح المطلوب (source code)

المقصود ملف css

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

رابط هذا التعليق
شارك

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

 

يقصد بها ملف css

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

رابط هذا التعليق
شارك

جزالك الله خيرا لمجهود الرائع و اين المرفق

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

رابط هذا التعليق
شارك

 

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

 

يقصد بها ملف css

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

 

شكرا مقدما

القصد صفحة مفتوحة المصدر بالapex

رابط هذا التعليق
شارك

 

 

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

 

يقصد بها ملف css

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

 

شكرا مقدما

القصد صفحة مفتوحة المصدر بالapex

 

الطريقه الوحيده هو اعطاء اليوزر والباسورد

for workspace 

لو فيه حاجه مش فاهماها انا موجود ان شاء الله

تم تعديل بواسطة alisaleh84
رابط هذا التعليق
شارك

 

 

 

تسلم على تزويدنا بالجديد

الملفات المقصودة موجودة باللنك http://l-lin.github....some-animation/

 

يقصد بها ملف css

https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css

 

شكرا مقدما

القصد صفحة مفتوحة المصدر بالapex

 

الطريقه الوحيده هو اعطاء اليوزر والباسورد

for workspace 

لو فيه حاجه مش فاهماها انا موجود ان شاء الله

 

شكرا شكرا شكرا

رابط هذا التعليق
شارك

ستعرف اليوم على استخدام الانيميشن مع كلاسات

font awesome

نعلم جميعا ان اوراكل ابكس اصبحت تتدعم كلاسات font awesome 

لاستخدامها بدل من الصور 

وكل ماعليك اذا احتجت ان تضع اى صوره لايكونه ان تكتب اسم الكلاس فى المكان المحدد لها

ويمكن ان تعرف الكثير عن كلاسات font awesome من خلال الموقع http://fontawesome.io/icons/

ولكن الجديد فى هذا الدرس استخدام كلاس اخر للانيميشن كل ماعليك هو اضافه الكلاس المطلوب بجوار اسم الكلاس الرئيسي

ويوجد ثلاث انواع للحركه بالنسبه للعناصر

اما مع 

On DOM load

او  مع 

On parent hover

او مع

On hover

وهذا الموقع الذى يحتوى على الكلاسات

http://l-lin.github.io/font-awesome-animation/

***************************************************

ولكن عيك اولا ان تضع لنك ملف css

فى الصفحه المطلوبه

او ان تضعه فى تمبلت المستخدم فى صفحات حتى يتم تفعيل الكلاسات

وهذا مثال عملى على الانيميشن مع كلاسات

font awesome

https://apex.oracle.com/pls/apex/f?p=92775:7:9275140265164::NO:::

مرفق : ملف css

الافضل والاسهل وضع اللنك فى

المسار الخاص لللابكيشن ككل

حتى يمكن استخدام الكلاس فى اى مكان للابلكيشن

****

اتبع الصور ولكن نضع اللنك  

APP_IMAGES#font-awesome-animation.css#

فى

Cascading Style Sheets

js-storage.gif

تم تعديل بواسطة alisaleh84
رابط هذا التعليق
شارك

  • بعد 11 شهور...
  • بعد 2 شهور...

انضم إلى المناقشة

يمكنك المشاركة الآن والتسجيل لاحقاً. إذا كان لديك حساب, سجل دخولك الآن لتقوم بالمشاركة من خلال حسابك.

زائر
أضف رد على هذا الموضوع...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   تمت استعادة المحتوى السابق الخاص بك.   مسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

جاري التحميل
×
×
  • أضف...

برجاء الإنتباه

بإستخدامك للموقع فأنت تتعهد بالموافقة على هذه البنود: سياسة الخصوصية