إنشاء سرادق متقدم باستخدام CSS3 Animation

هذه المقالة هي جزء من موقعنا "سلسلة دروس HTML5 / CSS3" - مكرسة لمساعدتك في جعلك أفضل مصمم و / أو مطور. انقر هنا لرؤية المزيد من المقالات من نفس السلسلة.

اليوم سوف نلقي نظرة على “سرادق” مرة اخرى. لقد غطينا بالفعل في هذا المنصب السابق الذي تحدثنا عن استخدام -بكت-سرادق الملكية ، ولكن هذه المرة سنتخذ هذا الموضوع أبعد من ذلك بقليل.

في هذا المنشور ، سنقوم بإنشاء ملف سرادق مثل تأثير باستخدام الرسوم المتحركة CSS3. بهذه الطريقة سنكون قادرين على إضافة المزيد من الوظائف التي لا يمكن تحقيقها مع -بكت-سرادق.

ما لم تكن معتادًا على وحدة الرسوم المتحركة CSS3 ، نوصيك بإلقاء نظرة على المراجع التالية قبل متابعة هذه الوثائق:

• الرسوم المتحركة CSS3 - W3School
• CSS Animations - Mozilla Dev. شبكة الاتصال

لاحظ أيضًا أنه في الوقت الحالي ، يمكن أن تعمل CSS3 Animation فقط في Firefox 8+ و Chrome 12+ و Safari 5.0+ مع الإصدار السابق (-MOZ- و -بكت-). ومع ذلك ، سوف نستخدم فقط الإصدار الرسمي من W3C دون البادئة لتجنب إفراط هذه المقالة برموز زائدة عن الحاجة.

معالجة قضية سرادق

واحدة من المشاكل مع سرادق هو أن النص يتحرك باستمرار. هذا السلوك يضر بالقراءة ، كما يصعب قراءة النص. هذه المرة ، سنحاول إنشاء نسختنا الخاصة من السرادق وجعلها سهلة الاستخدام. فمثلا؛ بدلاً من نقل النص باستمرار, سنوقفه عندما يكون مرئيًا بالكامل ، بحيث يمكن للمستخدم قراءة النص للحظة.

القصة المصورة (نوع من)

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

كما ترى من لوحة العمل أعلاه ، نخطط لإظهار سطرين فقط من النص ، سينتقل كلاهما بالتتابع من اليمين إلى اليسار.

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

ترميز HTML

نظرًا لأن الرسوم المتحركة الخاصة بنا ستكون بسيطة ، ستكون علامة HTML أيضًا بسيطة مثل:

 
 
كيفية إضافة وورد الوظائف ذات الصلة دون الإضافات
 
أتمتة ملفات دروببوإكس الخاص بك مع الإجراءات
 
 

الأنماط الأساسية

قبل العمل حول عناصر الرسوم المتحركة ، دعنا نضيف بعض الأنماط الأساسية. دعونا نبدأ بإضافة نسيج الخلفية ل أتش تي أم أل جزء.

 html background: url ('... /images/skewed_print.png')؛ 

بعد ذلك ، سنضع المستطيل في وسط نافذة المتصفح بالإضافة إلى إضافة بعض التفاصيل مثل الظل الداخلي ولون الخلفية والحدود.

 .سرادق العرض: 500 بكسل ؛ الارتفاع: 50 بكسل ؛ الهامش: 25px auto ؛ إخفاء الفائض؛ الموقف: نسبي الحد: 1px صلب # 000 ؛ الهامش: 25px auto ؛ لون الخلفية: # 222 ؛ -Wkkit-border-radius: 5px ؛ دائرة نصف قطرها الحدود: 5px ؛ -webkit-box-shadow: inset 0px 2px 2px rgba (0، 0، 0، .5)، 0px 1px 0px rgba (250، 250، 250، .2)؛ box-shadow: inset 0px 2px 2px rgba (0، 0، 0، .5)، 0px 1px 0px rgba (250، 250، 250، .2)؛ 

بعد ذلك ، سنضع النص - وهو في هذه الحالة ملفوفًا داخل علامة فقرة - تمامًا ومنذ علامة مطلق الموضع سوف يتسبب في انهيار العنصر ، وسيتعين علينا تحديد عنصر العرض 100٪ وذلك لتغطية عرض الوالد.

 .marquee p position: absolute؛ font-family: Tahoma، Arial، sans-serif؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الهامش: 0 ارتفاع الخط: 50 بكسل ؛ محاذاة النص: المركز ؛ اللون: # ff؛ text-shadow: 1px 1px 0px # 000000؛ filter: dropshadow (color = # 000000، offx = 1، offy = 1)؛ 

دعونا نلقي نظرة على النتيجة لفترة من الوقت.

في هذه المرحلة ، قمنا بكل الأساليب الأساسية التي نحتاجها ؛ أنت حر في إضافة المزيد أو تخصيص الأنماط. ولكن ، نقترح عليك الالتزام ببعد التحديد المحدد (الطول والعرض) حتى نهاية البرنامج التعليمي.

الرسوم المتحركة

باختصار ، الرسوم المتحركة هي عرض للأجسام المتحركة. يتم تعريف كل حركة في إطار زمني. لذلك ، عندما نعمل على الرسوم المتحركة ، فإننا نتعامل في الغالب مع زمن. نأخذ في الاعتبار مسائل مثل:

• متى يبدأ الكائن في الحركة?
• كم من الوقت يستغرق الكائن للانتقال من نقطة إلى أخرى?
• متى وكيف ينبغي أن يبقى الكائن في نقطة معينة?

في CSS3 الرسوم المتحركة ، و زمن يمكن تعريفها مع keyframe بناء الجملة. ولكن ، قبل الانتقال إلى هذا القسم ، دعونا أولاً نحدد موضع بدء نص التحديد.

لقد خططنا أن يبدأ النص من اليمين ثم ينتقل إلى اليمين. لذلك ، سنقوم أولاً بوضعه على اليمين باستخدام خاصية CSS3 Transformation.

 .marquee p convert: translateX (100٪)؛ 

تذكر 100٪ التي حددناها لعنصر الفقرة لدينا كان مساويا لوالده عرض. لذلك ، سيتم تطبيق نفس الشيء هنا أيضًا ؛ سيكون عنصر الفقرة مترجم إلى اليمين ل 100٪ وهو في هذا المثال يساوي 500px.

إطارات مفتاحية

ال keyframe قد يكون بناء الجملة محيرًا بعض الشيء لبعض الناس ، لذا أنشأنا هنا دليلًا مرئيًا بسيطًا لمساعدتك في فهم ما يحدث بسهولة في keyframe بناء الجملة.

انقر هنا لرؤية النسخة الأكبر.

الرسوم المتحركة كلها ستستمر 20 ثانية وينقسم إلى تسلسلين دائم 10 ثواني كل.

في التسلسل الأول ، سينزلق النص الأول على الفور من اليمين وسيظل مرئيًا للحظات للسماح للمستخدم بقراءة النص ، بينما سيبقى النص الثاني مخفيًا. في التسلسل الثاني ، سينزلق أول نص مستطيل إلى اليسار ، وينزلق النص الثاني مباشرةً من اليمين.

وهنا جميع رموز الإطار الرئيسي التي نحتاج إلى تطبيقها لتشغيل الرسوم المتحركة.

 @ keyframes left-one 0٪ convert: translateX (100٪)؛  10٪ convert: translateX (0)؛  40٪ convert: translateX (0)؛  50٪ convert: translateX (-100٪)؛  100٪ convert: translateX (-100٪)؛ keyframes left-two 0٪ convert: translateX (100٪)؛  50٪ convert: translateX (100٪)؛  60٪ convert: translateX (0)؛  90٪ convert: translateX (0)؛  100٪ convert: translateX (-100٪)؛ 

ال اليسار واحد ستحدد إطارات مفتاحية التسلسل الأول للرسوم المتحركة ، بينما غادر اثنان ستحدد إطارات مفتاحية التسلسل الثاني.

تطبيق الرسوم المتحركة على العناصر

لكي تعمل الرسوم المتحركة ، لا تنسَ تطبيق الرسوم المتحركة على العنصر. يتم تطبيق التسلسل الأول على النص الأول أو في هذه الحالة يتم تطبيق الفقرة الأولى ويتم تطبيق التسلسل الثاني على الفقرة الثانية أيضًا.

 .marquee p: nth-child (1) animation: left-one 20s eas لانهائي؛ . marquee p: nth-child (2) animation: left-two 20s eas لانهائية؛ 

لقد انتهينا من الرسوم المتحركة لدينا. دعنا نرى النتائج على المتصفح.

• عرض
• تحميل المصدر

علاوة

يمكننا أيضًا تحديد نص التحديد لنقله من أعلى إلى أسفل أو العكس ، تمامًا كما فعلنا في منشورنا السابق. إليك كيفية القيام بذلك ؛ استبدال رموز الرسوم المتحركة أعلاه لدينا مع هذا واحد أدناه ل حرك النص لأسفل:

 .marquee p convert: translateY (-100٪)؛  @ keyframes down-one 0٪ convert: translateY (-100٪)؛  10٪ convert: translateY (0)؛  40٪ convert: translateY (0)؛  50٪ convert: translateY (100٪)؛  100٪ convert: translateY (100٪)؛ keyframes down-two 0٪ convert: translateY (-100٪)؛  50٪ convert: translateY (-100٪)؛  60٪ convert: translateY (0)؛  90٪ convert: translateY (0)؛  100٪ convert: translateY (100٪)؛ 

لاحظ أننا غيرنا X-محور إلى Y-محور والوجه كل ترجمة القيمة السلبية للإيجابية والعكس صحيح.

نحن ايضا لدينا إعادة تسمية الرسوم المتحركة إلى أسفل واحد و أسفل اثنين, لذلك نحن بحاجة إلى إعادة تطبيق اسم الرسوم المتحركة في عنصر الفقرة أيضًا.

 .marquee p: nth-child (1) animation: down-one 20s تخفيف لانهائية ؛ . marquee p: nth-child (2) animation: down-two 20s eas لانهائية؛ 

أو غير ذلك ، إذا كنت تريد تحريكه عكس ذلك ؛ من الأسفل إلى الأعلى. إليك جميع الرموز التي تحتاجها للتطبيق:

 .marquee.up p convert: translateY (100٪)؛  .marquee.up p: nth-child (1) animation: up-one 20s eas لانهائية؛  .marquee.up p: nth-child (2) animation: up-two 20s eas لانهائية؛  @ keyframes up-one 0٪ convert: translateY (100٪)؛  10٪ convert: translateY (0)؛  40٪ convert: translateY (0)؛  50٪ convert: translateY (-100٪)؛  100٪ convert: translateY (-100٪)؛ keyframes up-two 0٪ convert: translateY (100٪)؛  50٪ convert: translateY (100٪)؛  60٪ convert: translateY (0)؛  90٪ convert: translateY (0)؛  100٪ convert: translateY (-100٪)؛ 

• عرض
• تحميل المصدر

استنتاج

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

أخيرًا ، نحن ندرك أن هذه المقالة قد تكون غامرة بعض الشيء لبعض الناس ، لذلك إذا كان لديك أي أسئلة بخصوص هذه المقالة ، فلا تتردد في نشرها في قسم التعليقات أدناه.