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

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

1. تحويل عنصر على Hover

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

بافتراض أن لديك زرًا:

<زر>
 انقر فوق لي
زر>

لقد قمت بتصميم نص المستند بالإضافة إلى الزر:

/ * محاذاة الزر إلى منتصف الصفحة * /
جسم {
عرض: ثني;
ارتفاع: 100ه;
محاذاة العناصر: مركز;
تبرير المحتوى: مركز;
لون الخلفية: أسود;
}
/ * أنماط الزر * /
زر {
حشوة: 1م 2م;
خلفية: أزرق;
حدود: 0; 
لون: أبيض;
نصف قطر الحد: 0.25rem;
المؤشر: المؤشر;
حجم الخط: 2rem;
انتقال: تحول 500آنسة;
}
/ * حالات التحويم * /
زر:يحوم,
زر:ركز {
تحول: ترجم(0.75rem) 500آنسة;
}
instagram viewer

مع الكتلة الأخيرة ، تقوم بتعيين حالات التمرير والتركيز على الزر. في كلتا الحالتين ، تقوم بترجمة الزر على طول المحور ص بمقدار 0.75 ريم. سيبدو الزر كما يلي:

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

2. التصريح عن إطارات رئيسية متعددة بإعلان واحد

هناك نمط شائع آخر في الرسوم المتحركة لـ CSS وهو التكرار على نفس القيمة عدة مرات. يمكن أن يكون هذا لونًا أو حجمًا أو اتجاهًا معينًا. يمكنك تحقيق هذا باستخدام الرسوم المتحركة CSS keyframe بالتصريح عن عدة إطارات رئيسية بإعلان واحد.

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

أولاً ، تريد تحريك الزر فقط عند النقر فوقه. لذلك عليك إنشاء ملف script.js ملف ، يمكنك من خلاله الوصول إلى الزر وتبديل فصل دراسي على الزر عند النقر فوقه:

مقدار ثابت زر = وثيقة.querySelector ("زر")
button.addEventListener ("انقر"، (هـ) => {
 button.classList.toggle ('وقت الاحتفال')
})

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

ال وقت الاحتفال الفصل ينشط الرسوم المتحركة بعنوان حزب:

.وقت الاحتفال {
الرسوم المتحركة: حزب 2000آنسةلانهائي;
}

بالنسبة إلى الرسوم المتحركة ، تريد أن تبدأ باللون الأحمر والانتقال إلى اللون الأصفر بنسبة 25٪. ثم تعود إلى اللون الأحمر بنسبة 50٪ قبل أن تعود إلى اللون الأصفر بنسبة 75٪. أخيرًا ، عند نسبة 100٪ ، ستستقر على اللون الأزرق الداكن:

تضمين التغريدة حزب {
 0%, 50% {
لون الخلفية: أحمر;
 } 
 25%, 75% {
لون الخلفية: أصفر;
 }
 100% {
لون الخلفية: هسل(200, 72%, 35%);
 }
}

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

3. استخدامproperty لتحريك الخصائص المخصصة

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

ابدأ بتغيير لون خلفية الزر إلى تدرج خطي:

زر {
 // آخرCSS
خلفية: الخطي التدرج(90درجة, أزرق, أخضر);
 // آخرCSS
}

ها هو الناتج:

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

ال @ملكية يسمح لك التوجيه بتسجيل خصائص مخصصة. عندما تستخدم ملفات @ملكية، يجب عليك تزويده بثلاث قيم ، وهي بناء الجملة, يرث، و القيمة البدائية:

@ملكية --لون-1 {
بناء الجملة: "<لون>";
يرث: حقيقي;
القيمة البدائية: أحمر;
}
@ملكية --لون-2 {
بناء الجملة: "<لون>";
يرث: حقيقي;
القيمة البدائية: أزرق;
}

الأول هو خاصية البداية بينما الثاني هو خاصية الوجهة. الآن ، بدلاً من نقل صورة الخلفية (التي لا يمكنك نقلها) ، يمكنك الانتقال من - اللون -1 ل - اللون -2 (خصائصك المخصصة) في ثانية واحدة:

زر {
انتقال: - اللون -1 1000آنسة, - اللون -2 1000آنسة;
}

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

4. استخدام تأخيرات الحركة السلبية

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

<شعبةفصل="النقاط">
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
<شعبةفصل="نقطة">شعبة>
شعبة>

إليك بعض التصميمات الأساسية لتحويل كل طفل شعبة في نقطة:

.dots {
عرض: ثني;
فجوة: .5rem;
الهامش السفلي: 20مقصف;
}
.نقطة {
عرض: 10مقصف;
ابعاد متزنة: 1;
لون الخلفية: أحمر;
نصف قطر الحد: 50%;
}

هنا نستخدم Flexbox لوضع النقاط في خط أفقي. للتعمق في Flexbox ، يمكنك التحقق من موقعنا البرنامج التعليمي CSS Flexbox.

داخل script.js، أضف الكود الذي يؤدي إلى تحريك النقاط. أنت تقوم بتبديل ملف الرقص فئة على النقاط:

button.addEventListener ("انقر"، (هـ) => {
 button.classList.toggle ('وقت الاحتفال')
// رمز جديد
 النقاط لكل ((نقطة) => {
 dot.classList.toggle ("الرقص")
 })
})

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

.نقطة.dance {
الرسوم المتحركة: يعلو 2000آنسةلانهائيالبديل;
}

بالنسبة إلى الرسوم المتحركة ، ما عليك سوى ترجمة النقاط -100 بكسل على طول المحور ص:

تضمين التغريدة يعلو {
 100% {
تحول: ترجم(-100 بكسل)
 }
}

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

.نقطة: nth-child (1) {
تأخير الرسوم المتحركة: 100آنسة;
}
.نقطة: nth-child (2) {
تأخير الرسوم المتحركة: 200آنسة;
}
.نقطة: nth-child (3) {
تأخير الرسوم المتحركة: 300آنسة;
}
.نقطة: nth-child (4) {
تأخير الرسوم المتحركة: 400آنسة;
}
/ * استمر في العمل حتى تصل إلى النقطة 15 * /

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

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

5. استخدم الحركة المخفضة لتمكين التفضيلات

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

لحسن الحظ ، يمكنك الاهتمام بهذا الأمر بسهولة عن طريق تغليف الرسوم المتحركة بداخل ملف بدون تفضيل استعلام وسائط مثل ذلك:

@وسائط(يفضل تقليل الحركة: بدون تفضيل) {
.نقطة.dance {
الرسوم المتحركة: يعلو 2000آنسةلانهائيالبديل;
 }
}

الآن إذا كنت تريد تمكين يفضل الحركة المنخفضة في متصفحك ، فلن يتم تشغيل الرسوم المتحركة.

تعرف على المزيد من نصائح وحيل CSS

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