لا تحتاج إلى JavaScript لإنشاء تأثير الآلة الكاتبة الكلاسيكية. تعرف على كيفية القيام بذلك باستخدام CSS فقط باستخدام وظيفة الخطوات ().

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

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

ما هو تأثير الآلة الكاتبة؟

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

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

كيف تعمل وظيفة خطوات CSS()

تقدم الوظائف في CSS مستوى من المرونة كان من الصعب تحقيقه في السابق باستخدام الأنماط الثابتة وحدها. ال خطوات() الوظيفة هي وظيفة شائعة تُستخدم في الرسوم المتحركة لـ CSS. فهو يجعل الرسوم المتحركة تبدو وكأنها تتقدم في خطوات متميزة ومنفصلة بدلاً من الانتقال بسلاسة.

instagram viewer

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

animation-timing-function: steps(n, direction)

في كتلة التعليمات البرمجية أعلاه، خطوات() تحتوي الدالة على معلمتين هما: ن و اتجاه. ال اتجاه يمكن أن تكون المعلمة إما يبدأ أو نهاية.

وضع اتجاه ل يبدأ يضمن اكتمال الخطوة الأولى بمجرد بدء الرسوم المتحركة. حيث أن ضبط اتجاه ل نهاية سيتم تشغيل الخطوة الأخيرة مع انتهاء الرسوم المتحركة. ولتوضيح أهمية خطوات() الدالة، قم بإلقاء نظرة على كود HTML التالي:

<divclass="container">
<div>div>
div>

تحدد كتلة التعليمات البرمجية أعلاه أ حاوية div مع div طفل. إذا كنت تريد أن ينزلق القسم الفرعي عبر الشاشة، فيمكنك استخدام الرسوم المتحركة لـ CSS مثل هذا:

.container {
background-color: blue;
}
div:not(.container) {
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
}
@keyframes movebox {
 100% {
transform: translateX(100vw);
 }
}

تستخدم كتلة التعليمات البرمجية أعلاه قاعدة @keyframes لتحديد الرسوم المتحركة اسم الشيئ com.movebox. يتم بعد ذلك تطبيق هذه الرسوم المتحركة على القسم الفرعي، مما يؤدي إلى تحركه بسلاسة عبر الشاشة في حلقة لا نهائية.

عبر جيفي

إذا كنت لا تحب الرسوم المتحركة السلسة وترغب في تحقيق تأثير "متقطع"، فيمكنك الاستفادة من خطوات() وظيفة مثل هذا:

div:not(.container){
background-color: red;
width: 88px;
height: 88px;
animation: movebox 4sinfinite;
animation-timing-function: steps(10, end);
}

كما ترون في صورة GIF أدناه، تتضمن خطوات() ستعمل الدالة ذات قيمة المعلمة 10 على تحريك div الفرعي في خطوات بدلاً من الرسوم المتحركة السلسة. كلما زاد عدد الخطوات، كلما بدا الرسم المتحرك أقل تقلبا.

عبر جيفي

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

خلق تأثير الآلة الكاتبة

الآن بعد أن فهمت كيف خطوات() تعمل الوظيفة، فقد حان الوقت لوضع كل ما تعلمته موضع التنفيذ. أنشئ مجلدًا جديدًا، ثم أعطه اسمًا مناسبًا. في هذا المجلد، قم بإضافة Index.htm ملف للترميز و style.css ملف للتصميم.

في ال Index.htm الملف، أضف الكود المعياري التالي:

html>
<htmllang="en">
<head>
<metacharset="UTF-8" />
<metaname="viewport"content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
<linkrel="stylesheet"href="style.css" />
head>
<body>
<divclass="container">
<divclass="text">
 Lorem ipsum dolor sit amet consectetur 
 adipisicing elit. Reiciendis, tempore! 
div>
div>
body>
html>

تحدد كتلة التعليمات البرمجية أعلاه الترميز لـ a موقع HTML بسيط. هناك حاوية div الذي يحمل div آخر يحتوي على بعض النصوص الوهمية.

تحريك النص

افتح ال style.css ملف وتعيين عرض حاوية div لعرض محتوياته.

.container{
width: fit-content;
}

التالي باستخدام @keyframes القاعدة، حدد رسمًا متحركًا يتحكم في كيفية تقدم الرسم المتحرك بمرور الوقت. اضبط العرض على "0%" عند 0%. في 100%، اضبط العرض على "100%" كما يلي:

@keyframes type-text {
 0% {
width: 0%;
 }
 100% {
width: 100%;
 }
}

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

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

.text {
overflow: hidden;
white-space: nowrap;
font-family: "CourierNew", Courier, monospace;
border-right: solid 10pxgreen;
font-size: 23px;
animation: type-textforwards 4s;
animation-timing-function: steps(40);
}

عند تشغيل الكود في المتصفح، هذا ما يجب أن تراه:

عبر جيفي

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

جلب المؤشر إلى الحياة

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

@keyframes cursor-blink {
 0% {
border-color: transparent;
 }
 100% {
border-color: green;
 }
}

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

.text{
/* Other style rules*/
animation: type-textforwards 4s,
cursor-blink.6sinfinite;
}

الآن عند تشغيل التعليمات البرمجية، يجب أن تشاهد مؤشر وامض.

عبر جيفي

قوة وظائف CSS

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

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