5 رسوم متحركة SVG لإضفاء الحيوية على تصميم الويب الخاص بك

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

العمل مع رسومات موجهة قابلة للتحجيم

SVG هو تنسيق ملف يستخدم خطوطًا ، وليس وحدات بكسل ، لتخزين الصور وعرضها. كما يوحي اسمها ، يمكن توسيع نطاق الرسومات المتجهة القابلة للتطوير دون فقدان الجودة.

بالإضافة إلى كونها رائعة لتغيير الحجم ، يمكنك أيضًا استخدام كود SVG داخل HTML ، وسوف يعمل مثل أي عنصر آخر. هذا يعني أنه يمكنك استخدام قواعد CSS, كود جافا سكريبتوالأهم من ذلك ، الرسوم المتحركة باستخدام SVGs لموقعك على الويب.

يمكنك إنشاء ملفات SVG باستخدام برامج مثل Adobe Illustrator ومواقع إلكترونية مثل SVGator ، ولكن يمكنك أيضًا إنشاؤها يدويًا. تنسيق SVG هو لغة XML للنص العادي ويبدو قليلاً مثل HTML.

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

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

ل (فار أنا = 0; أنا  menuItems [i] .addEventListener ('انقر'، buttonClick) ؛
}

بمجرد النقر فوق الزر ، تقوم وظيفة تسمى buttonClick () بتنفيذ العديد من الإجراءات. يبدأ بتغيير لون خلفية الصفحة:

وثيقة.body.style.backgroundColor = `#${هذه.getAttribute ('data-background')}`;

بعد ذلك ، يضيف فئة CSS إلى الزر الذي تم الضغط عليه ، مما يؤدي إلى تشغيل رسم متحرك وتغيير لون خلفية الزر.

menuItemActive.classList.remove ('menu__item - نشط');
this.classList.add ('menu__item - نشط');
menuItemActive.classList.add ('menu__item - تحريك');
this.classList.add ('menu__item - تحريك');
menuItemActive = هذه;

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

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

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

.path-1 {
 السكتة الدماغية dasharray: 1850 2000 ؛
 اندفاعة السكتة الدماغية: 1851 ؛
 الانتقال: 5s خطي ؛
}

تضيف وظيفة JS فئة CSS فريدة إلى كل قسم من النص باستخدام فئة CSS أصل واحد لتقليل كثافة الشفرة بشكل أكبر.

$(وظيفة() {
وظيفةالرسوم المتحركة() {
 $('#حاوية') .addClass ('زعنفة');
 }
setTimeout (AnimationStart، 250) ؛
});

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

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

تضمين التغريدة رسم {
 0% {
 السكتة الدماغية dasharray: 140540 ؛
 إزاحة السكتة الدماغية: -474 ؛
 عرض السكتة الدماغية: 8 بكسل ؛
 }
100% {
 السكتة الدماغية dasharray: 760 ؛
 إزاحة اندفاعة السكتة الدماغية: 0 ؛
 عرض السكتة الدماغية: 2 بكسل ؛
 }
}

يتم تطبيق إطارات المفاتيح هذه فقط على مخطط زر شكل SVG عندما يحرك المستخدم المؤشر فوق الزر. يستخدم: hover فئة زائفة CSS لتحقيق ذلك ، تشغيل قاعدة تضيف الإطارات الرئيسية للرسوم المتحركة إلى الزر.

المجمع .svg:يحوم.شكل {
-webkit- الرسوم المتحركة: 0.5 ثانيةرسمخطيإلى الأمام;
الرسوم المتحركة: 0.5 ثانيةرسمخطيإلى الأمام;
}

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

مع وجود العديد من التقنيات المثيرة للاهتمام تحت الغطاء ، من الصعب تحديد ما يجب مناقشته عند النظر إلى مثال ساعة SVG هذا.

للبدء ، يستخدم الدالة Date () لجمع التاريخ والوقت الحاليين. باستخدام هذه القيمة ، تقوم دالات getHours () و getMinutes () و getSeconds () بتقسيم البيانات إلى أجزائها ذات الصلة. ثم يحسب الرمز موضع كل يد على مدار الساعة.

فار التاريخ = الجديدتاريخ();
فار ساعات زاوية = 360 * date.getHours () / 12 + date.getMinutes () / 2;
فار minAngle = 360 * date.getMinutes () / 60;
فار secAngle = 360 * date.getSeconds () / 60;

من خلال تخزين كل من العقارب في مصفوفة ، يمكن تعيين مواضعها بسهولة بالغة في كل مرة يتم فيها تشغيل الكود.

اليدين [0] .setAttribute ('من عند'، شيفتر (زاوية ثانية)) ؛
اليدين [0] .setAttribute ('ل'، شيفتر (زاوية ثانية + 360)) ؛
اليدين [1] .setAttribute ('من عند'، شيفتر (زاوية دقيقة)) ؛
اليدين [1] .setAttribute ('ل'، شيفتر (زاوية دقيقة + 360)) ؛
اليدين [2] .setAttribute ('من عند'، شيفتر (زاوية الساعات)) ؛
اليدين [2] .setAttribute ('ل'، شيفتر (HoursAngle + 360)) ؛

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

توفر رسوم SVG المتحركة التي تعتمد على CSS طريقة رائعة لجعل أي شكل يبدو مذهلاً.

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

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

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

مساحة التطبيق $: 6ت.
عرض التطبيق $: 50ت.
ارتفاع التطبيق $: 90ت.
#برنامج {
 العرض: عرض التطبيق $ ؛
 الارتفاع: ارتفاع التطبيق دولار ؛
 المساحة المتروكة: $ app-padding ؛
 الخلفية: أبيض ؛
 ظل الصندوق: 002rem rgba(أسود، 0.1);
}

يمكنك استخدام هذا المثال في أي نموذج ويب ، وإشراك المستخدمين بشكل لم يسبق له مثيل.

إنشاء رسوم SVG المتحركة الخاصة بك باستخدام HTML و JS و CSS

يمكن أن يكون إنشاء رسوم متحركة SVG من البداية عملية صعبة عند البدء لأول مرة. ستمنحك هذه الأمثلة السبق الذي تحتاجه لإنشاء رسوم متحركة SVG تجعل موقع الويب الخاص بك يلمع.

9 حيل متقدمة لاستعلام الوسائط في CSS يجب أن تعرفها

اقرأ التالي

نبذة عن الكاتب