10 مذهلة نص متحرك CSS & JavaScript مقتطفات كود

يمكنك إنشاء بعض تأثيرات النص المبهرة باستخدام CSS الأساسي وبضعة أسطر من JavaScript. تتراوح هذه التأثيرات من الرسوم المتحركة لعرض النص إلى التدوير ثلاثي الأبعاد أو أي شيء آخر يمكنك تخيله.

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

قد تعجبك أيضًا أدوات الرسوم المتحركة CSS هذه.

1. عنوان الرسوم المتحركة

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

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

2. التحطم

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

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

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

3. رسائل ملتوية

قام المطور Mamun Khandaker بتجميع هذه المجموعة من الرسوم المتحركة الملتوية للأحرف. كل نمط من أنماط الرسوم المتحركة له اسم مختلف ويمكنك تصفحهم جميعًا في هذا القلم الواحد.

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

4. الأبجدية بكسل

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

يستخدم Noto Serif كقاعدة خط ويحول الحروف إلى عناصر قابلة للطرق داخل عنصر لوحة الرسم. JavaScript يقسم الحروف إلى نقاط أصغر وهذه تشكل أساس الرسوم المتحركة.

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

5. كتابة الرف الدائري

يشتهر هذا التأثير بشعبية كبيرة في المحافظ الصغيرة ومواقع الوكالات. غالبًا ما تظهر الرسوم المتحركة للنص المكتوب في رأس الموقع وهي تحاكي مظهر شخص يكتب في معالج النصوص.

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

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

6. تايجر تايجر

استعارة كلمات من قصيدة ويليام بليك "The Tyger" ، هذه الرسوم المتحركة الفريدة من نوعها لجوزيف مارتوتشي تجذب انتباهك حقًا.

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

7. التقط SVG

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

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

8. قوس الرسوم المتحركة

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

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

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

9. غير قابلة للكسر كيمي شميت

تم استعارة تأثير الشعار الجميل هذا من سلسلة Netflix "Unbreakable Kimmie Schmidt". يتم إنشاء كل شيء باستخدام CSS بما في ذلك أنماط النص والرسوم المتحركة المخصصة.

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

إنه مثال آخر على مقدار ما يمكن أن يفعله CSS3 إذا كنت تعرف كيفية استخدامه.

10. تعبئة نص SVG

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

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

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