اجعل نصك متحركًا مع هذه التأثيرات المبهرة

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

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

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

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

تحطيم نص الرسوم المتحركة بواسطة أرسين زبيدنياكوف

ما عليك سوى إلقاء نظرة على الرسوم المتحركة للنص المحطم بواسطة Arsen Zbidniakov. أليست رائعة؟ الحل لا يربك الزائرين بالكثير من الإجراءات والديناميكيات غير الضرورية ولا يثقل كاهل نظامك. إنها تعمل فقط ، وتترك الجميع في حالة "نجاح باهر".

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

الرسوم المتحركة للنص بواسطة Szenia Zadvornykh

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

محرف الرسوم المتحركة وتجربة أخرى بواسطة آرا

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

في المثال الأول ، يتكون النص من قطع صغيرة تشكل ببطء ولكن بثبات نفقًا ثلاثي الأبعاد من الجسيمات.

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

رسوم GSAP Text Animation بواسطة Nate Wiley

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

طباعة حركة CSS: نص متفجر بواسطة Dudley Storey

على عكس الأمثلة السابقة حيث تقف التقنيات المتطورة وراء جمال الحلول ، هنا تدير الحركة القائمة على CSS العرض. ينفذ Dudley Storey الرسوم المتحركة للإطار الرئيسي لـ CSS ، والانتقالات ، و JavaScript ، و SVG ، وقليلًا من سحر Adobe Illustrator. تتحطم الكلمة قليلاً ثم تنقسم إلى أجزاء متعددة الأضلاع بحيث لا يزال بإمكانك قراءتها. إذا كنت ترغب في إضافة وحشية أنيقة لطباعتك ، فإن هذا التأثير هو بالتأكيد نقطة انطلاق.

العديد من الرموز ثلاثية الأبعاد باستخدام Three.js بواسطة Yasunobu Ikeda

بينما يقوم Nate Wiley بتفجير النص بعيدًا ، فإن Yasunobu Ikeda ، على العكس من ذلك ، يفرض الجسيمات المنتشرة بشكل فوضوية في جميع أنحاء الشاشة لتشكيل نص. هنا الجسيمات ليست أكثر من أيقونات صغيرة. يستخدم المؤلف Three.js لإعادة إنشاء هذه الرسوم المتحركة ثلاثية الأبعاد الرائعة.

مسار SVG نص متحرك بواسطة Tamino Martinius

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

لمزيد من الاستخدام العملي

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

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

فكر - قم بإنشاء دورة بواسطة Mikael Ainalem

يعرض قلم Mikael Ainalem رسمًا متحركًا دائريًا حيث يتم تمييز الكلمات بالتناوب. إنها طريقة ممتازة لتوجيه المستخدمين من كلمة إلى أخرى.

تم الضغط عليه من قبل Tryggvi Gylfason

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

ضباب حركة النص التمرير مع TweenMax بواسطة Ignacio Correia

يوفر Ignacio Correia النص بتأثير ضبابية الحركة. عندما تتحرك لأسفل بوتيرة سريعة ، يتحول النص إلى بقعة بيضاء تقريبًا. كلما أبطأت ، تصبح الكلمات أقل غموضًا.

حالة لاستخدام الرسوم المتحركة في الطباعة

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

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