🌙درسنا التاسع عشر من دورس تعلم فيجما بيكون عن:
🌟كيفية عمل تأثير النص و التمرير الأفقي (horizontal scrolling) في فيجما
الشرح مع رابط ملف فيجما 👇🏻
#figma
@OCreativeJobs
🌟كيفية عمل تأثير النص و التمرير الأفقي (horizontal scrolling) في فيجما
الشرح مع رابط ملف فيجما 👇🏻
#figma
@OCreativeJobs
نبدأ بالنص، فيه تأثير انه يظهر الخط كل سطر لحاله مو دفعة وحدة وهو الإفتراضي فنحتاج نخلي كل جملة كنص لوحدها مثل الموضح في الفيديو. صار عندي ٣ نصوص.
بعدها نحتاج نخلي كل نص ك frame لان نحتاج نظهر جملة وحدة في كل مرة ونخفي الباقي عن طريق خاصية Clip Content ويكون في تناقلات بينهم.
عشان نطبق التناقلات نقدر نستخدم خاصية فيجما (component variants) واللي تسمح لك يكون للعنصر (اللي هنا النص) عدة حالات وانت تتنقل بينهم مثل الموضح في الفيديو.
الحالات اللي عندي:
- مافي نص
- السطر الأول فقط
- السطر الأول والثاني فقط
- كامل الجملة
الحالات اللي عندي:
- مافي نص
- السطر الأول فقط
- السطر الأول والثاني فقط
- كامل الجملة
عشان نتقل بين الحالات نحتاج نستخدم prototype اللي يسمح لي اني أتنقل بين حالة وآخرى. ونحتاج نستخدم تأثير after delay عشان تكون التنقلات تلقائياً بدون اي تدخل مني.
📍قيمة after delay (اللي كانت في الفيديو ٨٠٠) نحتاج نخليه ١ (فيجما يسمح باقل قيمة تكون ١) عشان مايكون فيه تأخير.
📍قيمة after delay (اللي كانت في الفيديو ٨٠٠) نحتاج نخليه ١ (فيجما يسمح باقل قيمة تكون ١) عشان مايكون فيه تأخير.
خلصنا تأثير النص، تحتاج اللحين تأخذ نسخة من component وتحطه في الواجهة مكان النص الفعلي مثل الموضح في الفيديو.
📍عشان تشوف prototype تحتاج تضغط على زر present
📍عشان تشوف prototype تحتاج تضغط على زر present
اللحين منطقياً المفترض ان الزر (اكتشف الوصفات) والصور يكون موجود فقط لما يخلص تأثير النص فنحتاج نخفيهم ويكون في تناقلات بين الوجهات لما يخلص تأثير النص ننتقل للواجهة اللي فيها الزر ظاهر. نقدر نستخدم خاصية after delay اللي تمكننا من التنقل تلقائيًا بعد فترة محددة إلى واجهة اخرى
📍عشان نعرف مدة الفترة نحسب كم من الوقت يأخذ تأثير النص عندي 4 تناقلات كل تنقل يأخذ 300ms فالمجموع (4*300=1200ms)
📍نحتاج تأثير النص في الواجهة الثانية يكون في الحالة الأخيرة عشان مايرجع يبدأ مرة ثانية.
📍نحتاج تأثير النص في الواجهة الثانية يكون في الحالة الأخيرة عشان مايرجع يبدأ مرة ثانية.
في اخر واجهة نحتاج نعرض الصور اللي تحت فنفس الشئ نحتاج نحسب الفترة اللي تأخذه الواجهات اللي قبلها واللي هي (1200 ms (الواجهة الأولى) + 300 ms (الواجهة الثانية) = 1500 ms)
خلصنا تناقلات النص نيجي للصور وكيفية عمل التمرير الأفقي (horizontal scrolling). الصور عبارة عن frame ونقدر نعمل لها تأثير التمرير من خلال خانة scroll behavior -> overflow (horizontal).
📍عشان يشتغل تأثير التمرير بأنواعه (أفقي، رأسي، كلاهما) نحتاج يكون حجم frame (الصور) نفس حجم الواجهة واللي بيظهر التنبيه اللي في الفيديو ومارح يشتغل التأثير. وانت تصغر حجم frame اضغط ctrl عشان المحتوى frame (الصور) مايتحرك.
يتبع..
يتبع..
📍وضحت في الفيديو كيفية عمل تأثير عشان تكون الصور curved من فوق وتحت بس مو ضرورية عشان يشتغل تأثير التمرير الأفقي.
بعدها تقدر تنسخ frame الصور وتخليها في الواجهتين اللي قبل بس مخفي مثل الموضح في الفيديو.
وبالنهاية اقدر لو تسون لايك ورتويت لأول تغريدة عشان توصل لأكبر عدد لان عمل الفيديوهات متعب وشكراً.
وبس اتمنى ان الدرس مفيد لكم ولنا لقاء غداً بإذن الله مع درس جديد💜.
وبس اتمنى ان الدرس مفيد لكم ولنا لقاء غداً بإذن الله مع درس جديد💜.
جاري تحميل الاقتراحات...