إنشاء تأثيرات متتالية بسهولة مع CascadeJS

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

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

هذه المكتبة لديها لا التبعيات. يتم تشغيله على JavaScript الكلاسيكية. يمكنك تثبيته من خلال npm أو Bower أو عن طريق تنزيل نسخة مباشرة من GitHub.

للحصول على عمل CascadeJS ، عليك تحتاج ملفين: ملف CSS وملف JavaScript. كلاهما يأتي معبأة إصدارات مصغرة لتوفير عدد قليل من كيلوبايت على حجم الصفحة.

يحصل تقسيم كل عنصر من عناصر Cascade إلى أجزاء منفصلة والتي تحريك بشكل فردي عبر عناصر. هؤلاء هم وأضاف بشكل حيوي, لذلك لا تحتاج إلى تغيير أي شيء في HTML الخاص بك.

ولكن ، سوف تحتاج إلى انشاء تدفق() وظيفة في ملفك ، بعد استهداف أي عنصر تريد تحريكه.

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

هنا أ مقتطف من الفانيلا جافا سكريبت من العرض التوضيحي للموقع الرئيسي:

يمكنك تمرير تدفق() عنصر مع لا معلمات, أو يمكنك ذلك تكوين كل منهم نفسك. تستغرق ثمانية المعلمات الاختيارية لتحرير نمط الرسوم المتحركة وتوقيتها ومدتها وفئات CSS الاختيارية.

CascadeJS لديه وظيفة أخرى تسمى شظية() مما يتيح لك تقسيم الحروف (أو العناصر) في حاويات منفصلة ، دون تنشيطها. يمكنك استخدام هذه الوظيفة ل لون وإعادة تصفيف النص على الصفحة من خلال استهداف كل حرف على حدة في كلمة واحدة. رائع جدا ، أليس كذلك?

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