יצירת טקסט נגלל עם HTML, CSS ו-JavaScript

JavaScript

כאשר בניתם אפליקציות אינטרנט למעלה מ-25 שנה, כמו שעשיתי, שימוש ב-HTML, CSS, ו-JavaScript הפך להיות דבר שני טבעי.

במאמר זה, אספק כמה דרכים פשוטות ליצירת טקסט גולל באמצעות כלים אלו, כולל חמישה שיטות שונות לקידוד טקסט גולל עם HTML פשוט, HTML ו-CSS, ולבסוף, HTML + CSS + JS.

1. טקסט גולל עם HTML פשוט

פשוט הוסיפו תגית סביב הטקסט כדי ליצור אפקט גילוי. תגית זו מציעה מספר פרמטרים מעניינים, בהם:

כיוון — יכול להיות שמאל, ימין, למעלה, או למטה
מהירותגלילה — מהירות הגלילה של הטקסט
לולאה — כמה פעמים יש לחזור על הגלילה

הערה: זו תגית HTML שהושלמה, לכן אני ממליץ על הזהירות בשימוש בה לפרויקטי אינטרנט מודרניים.

2. טקסט גולל אנימציה עם 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.

3. 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.

4. גלילת טקסט עם 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() בקשת. זה מאפשר יצירת טקסט גולל ללא פסק באמצעות איפוס מיקום הטקסט כאשר הוא מגיע למיקום הסופי.