مرحبًا، جميعًا. سنتحدث في هذه المحاضرة عن خاصية التحويلات. لقد رأيت في أمثلة مختلفة
أنه يمكننا تغيير حالة العناصر. فقد تتحول الروابط من رابط عادي
إلى رابط تمت زيارته. يمكنك أن تحوم فوق الأشياء. ويمكنك التركيز عليها. حسنًا، ماذا لو كنت ترغب في الحصول
على القليل من الرسوم المتحركة بالفعل متى يمكنك القيام بهذه الأشياء؟ هذا هو ما يمكننا استخدام
خاصية التحويلات فيه. لذلك إذا حومت فوق الرابط،
فإنه يمكنك تغيير اللون. إذا أصبحت صورة مصدر التركيز، فإن هذا يعني أنك قد ضغطت عليها،
ويمكنك تغيير الحجم. وأنها عبارة عن هذه الأشياء الصغيرة فحسب
التي تعطيك في بعض الأحيان، عند إنشاء صفحتك، قليلًا من ذلك
العامل المناسب الذي تبحث عنه، ليبين أنك بدأت
تدرك هذه المفاهيم. إذًا ،هيا لنبدأ. إذا أردت أن تضيف التحويلات إلى صفحتك، فهناك أربعة خصائص
سترغب في الاطلاع عليها. الأولى هي خاصية التحويلات الفعلية. ما الذي تود تغييره؟ هل ترغب في تغيير الحجم أم اللون
أم المكان أم كل ذلك؟ ماذا عن مدة التحويل؟ كم المدة التي يجب أن يستغرقها كل تحويل؟ فيمكن أن يتم بسرعة كبيرة،
حيث قد لا يستطيع الناس ملاحظته، أو يمكن أن يكون طويلًا بالفعل. توقيت التحويل، أمر غريب نوعًا ما
لكن هذه هي الفكرة إذا كنت ستجعل شيئًا ما كبيرًا
هل تريد أن تجعله أكثر بطئًا وطولًا في نفس الوقت أم تريد
أن تجعله سهل الدخول وسهل الخروج. يمكنك تغيير كيفية القيام بمختلف
الأشياء ونوع السرعة التي تتم به. تأخير التحويل هو،
هل تريد مني الانتظار، هل يجب أن ينتظر المتصفح
قبل البدء في التحويل؟ إذا كان شخص ما يحوم، فهل تريد منه
أن يحوم لمدة ثانيتين قبل أن تواصل؟ ربما تود التفكير في ذلك،
لأنه في يعض الأحيان عندما ينظر الناس إلى صفحتك، فإن كل ما يصل
إليهم هو أن يحوموا بالمؤشر في كل مكان. ولا تريد منهم أن ينظروا إلى التحويلات
ما لم يحتاجوا بالفعل إلى التركيز على ذلك العنصر فقط. حسنًا لذا دعنا نمضي قدماً و نبدأ. إذا كنت ترغب في استخدام التحويلات،
فإن أول شيء عليك القيام هو ما كنت تقوم به طوال الوقت،
أن تحدد العنصر وتشير إلى الأسلوب الذي تود الحصول عليه
عند تحميل الصفحة لأول مرة. بعد ذلك، تريد أن تختار العناصر
التي تود تحويلها. لذلك ربما تكون قد صممتها في لون الخلفية
واللون والعرض والارتفاع. ولا يلزم أن ترغب في تغيير
كل هذه الأشياء عندما تدخل إلى التحويل الخاص بك. لذا اختر الأشياء التي تود تغييرها. ثالثًا، حدد القيم الجديدة لهذه العناصر. و هذا هام للغاية تحتاج إلى دمج هذه الخطوة
مع التأثيرات الخاصة. يجب أن يتم ذلك مع حوم أو تركيز أو نشاط. لذا دعنا ننظر إلى بعض الأكواد على الشاشة ثم سأنفذها من خلال مثال فعلي. وهنا، لقد ذهبت مباشرة وحددت
القسم للحصول على لون فحسب وخلفية وارتفاع الخط وارتفاع العرض
جميعها بنفس الأشياء النموذجية. إذا لاحظت، فإن نصف قطر الحد
صغير للغاية. فهو ست بكسلات فقط. وبعد ذلك، دخلت واخترت، أتدرك ماذا،
سأذهب مباشرة وأحدد كل خاصية من هذه الخصائص. لذا فإن الخصائص التي أود تغييرها هي
اللون والعرض والخلفية ونصف قطر الحد. هذا كثير نوعًا ما، لكن
أردت أن أضرب مثالًا كبيرًا. يمكنك القول، أردت أن استغرق نصف ثانية أردت أن أجري عليهم جميعًا
نفس التغيير الطفيف أردت منك أن تنتظر نصف ثانية
قبل أن تبدأ ذلك التحويل. الخطوة الأخيرة، الخطوة التي يجب عليك
القيام بها مع التأثيرات الخاصة، كانت هي إضافة القسم: أن أحوم وأضع القيم
الجديدة التي أريد أن يكون عيها كل شيء. لذا فبدلًا من أن يكون أسود،
أود تحويله إلى أبيض. وبدلًا من أن يكون العرض 250 بكسل،
أريده أن يكون 350، لون خلفية مختلف، ونصف قطر حد أكبر بكثير. حسنا؟ لذا دعونا نمضِ قدمًا انظر إلى المثال الذي لدينا. لقد رمزته بالفعل حتى أبين لك. لذلك في هذا المثال،
استخدمت صفحة تصميم داخلية، جزئيًا لأن الملف الكامل في HTML
هنا في الأسفل. فكل ما لدي هو قسم واحد. الطريقة التي صممته بها هي القول
الآن عندما يحوم شخص ما فوق هذا القسم، أريدك أن تغير اللون في الخلفية
ونصف قطر الحد. وقد وضعتها أيضًا نشطة، فقط لأنني أردت أن أبين لك أنه
يمكنك القيام بالعديد من الحالات المختلفة. نشطة، إذا كنت ربما لا تتذكر، عندما
تضغط على حالة ما. لنلقي نظرة فيما يلي تحويلي، بالخطأ
عندما تنظر إلى الصفحة. والآن، عندما أحوم فوقها بالمؤشر، يمكنك معرفة نوع هذا التغيير الطفيف
في اللون ونصف قطر الحد. يمكن لنصف قطر الحد أن يغير الأشياء
فعليًا بدلًا من أن تكون مثل مربع إلى أن تبدو مثل دائرة. والأمر الأخير هو أنني سأبقي المؤشر بالأسفل وسنري ما سيحدث عندما تتغير الحالة إلى نشطة. يمكنك أن ترى مرة أخرى أنني
غيرت كل تلك الأشياء. فإنني أرى هذه التغييرات أفضل بالفعل. وقد تكون مشتتة أيضًا غلى الرغم من ذلك. لذلك تريد استخدام التحويلات بشكل طفيف للتأكد من عدم إخراج الأشياء
بعيدًا عن صفحتك. من الممكن والشائع أن تستخدم الاختصارات عند
كتابة مختلف التحويلات الخاصة بك. فبدلًا من كتابة مدة التحويل والخصائص والأشياء المختلفة مثل ذلك
يمكنك وضعها جميعًا في سطر واحد. يفيد هذا الأمر أنني أريد تغيير الخلفية
فيجب أن يستغرق ثانيتين وأريد أن أسهل الخروج،
أو أريد أن يكون تحويلًا طوليًا. والآن، يفيد الأمر أنني أريد المضي قدمًا
وتغيير نصف قطر الحد، فكم المدة التي سيستغرقها ونوع التحويل
وكم تبلغ مدة تأخير التحويل. لذا عندما تنظر إلى
أكواد الأشخاص الآخرين، لا ترتبك إذا لم تكن مصل مثالي الأول. فربما يستخدمون الاختصارات. حسنًا لذا آمل أن يكون هذا لطيفًا
وأن تكون متحمسًا للذهاب وتنفيذ بعد أنواع التحويلات على صفحتك. فالتجربة فيهم ستمنحك أكثر من مجرد
إظهار موقعك مليئًا بالألوان ونشطًا نوعًا ما. فسيمنحك تدريبًا على فهم هذه التأثيرات الخاصة المختلفة وإعلانها في وضع نشط
وتركيز وحوم وما إلى ذلك. لكن تذكر رجاءً أن الوصول
سيسبب مشكلة دائمًا عند التعامل مع مختلف الحالات على الصفحة. لا تطلب أن يعمل الناس على الحوم فوق صفحتك. لا تطلب أن يعمل الناس على الضغط عليه. فأنت تريد التأكد من إتاحة
المحتوى دائمًا واترك تلك التحويلات لشيء إضافي
تريد إضافته إلى موقعك. حظ سعيد.