إنشاء نص متحرك بواسطة HTML، CSS، و JavaScript

JavaScript

عندما تكون قد بنيت تطبيقات الويب لأكثر من 25 عامًا، كما فعلت، يصبح استخدام HTML و CSS و JavaScript أمرًا طبيعيًا.

في هذه المقالة، سأريك بعض الطرق البسيطة لإنشاء نص متحرك باستخدام هذه الأدوات، بما في ذلك خمسة طرق مختلفة لترميز النص المتحرك باستخدام HTML بسيط، HTML و CSS، وأخيرًا، HTML + CSS + JS.

١. نص متحرك بواسطة HTML بسيط

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

الاتجاه — يمكن أن يكون يسارًا، أو يمينًا، أو أعلى، أو أسفل
سرعة التمرير — سرعة نص التمرير
تكرار — كم مرة يجب أن يتكرر التمرير

ملاحظة: هذا وسم HTML مهجور، لذا أنصح بالتقشف في استخدامه لمشاريع الويب الحديثة.

٢. نص متحرك مع CSS

حدد تأثير CSS يُسمى scroll يُحرك خاصية translateX.

CSS

@keyframes scroll {

 0% { transform: translateX(100%); }

 100% { transform: translateX(-100%); }

}

Then apply that animation to your text element:

HTML

<div class="scrolling-text">Scrolling Text</div>

By adding this CSS:

Plain Text

.scrolling-text {

width: 100%;

overflow: hidden;

white-space: nowrap;

box-sizing: border-box;

animation: scroll 10s linear infinite;

}

Changing from translateX to translateY will give you a vertical scrolling text. Switching 0% and 100% around will give you the reverse scrolling text direction. And in the .scrolling-text CSS class, if you change the 10s duration of the animation, you change the speed of the scrolling text.

٣. HTML + CSS + JavaScript لنص متحرك

كود HTML:

HTML

<div class="scrolling-text">

Scrolling Text Scrolling Text Scrolling Text

</div>

كود CSS:

CSS

.scrolling-text {

width: 30vw;

white-space: nowrap;

overflow: hidden;

box-sizing: border-box;

font-size:clamp(16px,50dvh,220px);

white-space:nowrap;

margin: 0 auto;

}

JavaScript code:

JavaScript

const container = document.querySelector('.scrolling-text');

let scrollAmount = 0;

​

setInterval(() => {

 scrollAmount += 10;

 container.scrollLeft = scrollAmount;

 if (scrollAmount >= container.scrollWidth) {

  scrollAmount = 0;

 }

}, 20);

This is my most “unelegant” solution for making scrolling text. Basically, it’s cramming text in a container with a scroll and changing the scrolling of the container programmatically. When the scroll amount goes over the container amount, it resets.

٤. تمرير النص باستخدام jQuery

CSS

$(document).ready(

 function loop() {

  $('.scrolling-text').css({scrollLeft:0});

  $('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);

 }

);

Use the animate() jQuery function to animate the scrollLeft property, and this will create a scrolling text effect.

في رأيي، jQuery زائدة قليلا في هذا الوضع، ولا تجدر الاستخدام إلا إذا كنت قد استخدمت بالفعل jQuery في مشروعك.

بالطبع، animate() يمكن أيضًا استخدامه لتحريك خصائص translateX أو translateY كما هو موضح أعلاه.

5. تمرير النص بواسطة Canvas HTML5

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

يعتمد الكود HTML على الشكل التالي:

HTML

<canvas id="scrollingCanvas" width="300" height="50"></canvas>

And the JS is where the magic happens:

JavaScript

const canvas = document.getElementById('scrollingCanvas');

const ctx = canvas.getContext('2d');

const text = "Scrolling Text Example";

let x = canvas.width;

​

function draw() {

 ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

 ctx.font = '20px Arial';

 ctx.fillStyle = 'black';

 ctx.fillText(text, x, 30);

 x -= 2; // Adjust speed of scrolling here

 if (x < -ctx.measureText(text).width) {

  x = canvas.width; // Reset position when text is out of view

 }

 requestAnimationFrame(draw);

}

​
draw();

Using a loop with requestAnimationFrame() calling the function draw() is actually the way HTML5 games implement their graphics drawing. This is a cool way to create smooth-scrolling text.

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