إنشاء التحولات التدرج جميلة مع Granim.js

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

مع Granim.js, يمكنك بناء التحولات التدرج بالألوان الكاملة المخصصة تبدو سلسة وتنسجم بشكل جيد مع أي موقع ويب.

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

Granim هي مكتبة JS الوحيدة التي أعرفها معالجة التحولات التدرج. هذا سؤال لطالما تساءلت عنه ولم أجد إجابة رائعة عليه. جرانيم هو الحل الأمثل وهو بنيت على الفانيليا جافا سكريبت, بحيث يمكن تشغيله بجانب jQuery أو أي مكتبة JS أخرى.

مجرد ارمي granim.js ملف في صفحتك للبدء. يمكنك إما تنزيل نسخة من GitHub أو استضافة نسخة من CDN مباشر.

من هنا عينة رمز الأساسية من الريبو جيثب:

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

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

لاحظ هذا المثال يأخذ كثير من JS / CSS code لذلك ليس تنفيذ بسيط.

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

لا يزال يتم تحديث المكتبة بشكل متكرر حتى تتمكن من التحقق من علامة تبويب القضايا لمزيد من المعلومات.

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

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