پیمایش متن با استفاده از HTML – انجمن DEV

هنگامی که شما بیش از 25 سال است که مانند من برنامه های کاربردی وب می سازید، استفاده از HTML، CSS و جاوا اسکریپت به طبیعت دوم تبدیل می شود. در این مقاله، چند راه ساده برای ایجاد متن پیمایشی با استفاده از این ابزارها را به شما نشان خواهم داد.

نوشته پیمایش متن با استفاده از HTML اولین بار در کدنویسی دوست پدیدار شد.

من 5 روش مختلف برای کدنویسی متن اسکرول با HTML ساده، HTML و CSS و در نهایت HTML + CSS + JS به شما نشان خواهم داد.

به سادگی یک برچسب در اطراف متن اضافه کنید تا یک افکت اسکرول ایجاد کنید. این تگ چند پارامتر جالب ارائه می دهد که از جمله آنها:

• جهت – می تواند: چپ، راست، بالا یا پایین باشد
• scrollaunt – سرعت اسکرول متن
• حلقه – چند بار باید پیمایش تکرار شود

توجه: این یک تگ HTML منسوخ شده است، بنابراین توصیه می کنم در استفاده از آن برای پروژه های وب مدرن خودداری کنید.

یک انیمیشن CSS به نام اسکرول تعریف کنید که انیمیشن را متحرک می کند translateX دارایی

@keyframes scroll {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
}

سپس آن انیمیشن را روی عنصر متن خود اعمال کنید:

 class="scrolling-text">Scrolling Text

با افزودن این CSS:

.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}

در حال تغییر از translateX به translateY به شما یک متن پیمایش عمودی می دهد. جابه‌جایی 0% و 100% به شما جهت متن پیمایش معکوس را می‌دهد. و در .scrolling-text کلاس CSS اگر مدت 10 ثانیه انیمیشن را تغییر دهید، سرعت اسکرول متن را تغییر می دهید.

کد HTML:

 class="scrolling-text">
Scrolling Text Scrolling Text Scrolling Text

کد 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;
}

کد جاوا اسکریپت:

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

setInterval(() => {
 scrollAmount += 10;
 container.scrollLeft = scrollAmount;
 if (scrollAmount >= container.scrollWidth) {
  scrollAmount = 0;
 }
}, 20);

این “بی‌ظرافت”ترین راه حل من برای ساخت متن پیمایشی است. اساساً یک متن را در یک ظرف با اسکرول فشرده می کند و اسکرول ظرف را به صورت برنامه ای تغییر می دهد. هنگامی که مقدار اسکرول از مقدار ظرف عبور می کند، بازنشانی می شود.

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

استفاده کنید animate() تابع jQuery برای متحرک سازی scrollLeft ویژگی و این یک افکت متنی اسکرول ایجاد می کند.

به نظر من jQuery در این شرایط کمی بیش از حد است، و تنها زمانی منطقی است که قبلاً از jQuery در پروژه خود استفاده کرده باشید.

البته، animate() همچنین می تواند برای متحرک سازی استفاده شود translateX یا translateY خواص همانطور که در بالا مشاهده شد.

این روش مورد علاقه من است. به خصوص به این دلیل که بسیار منعطف است و امکانات بسیار زیادی را ارائه می دهد، مانند صادرات متن پیمایشی به عنوان GIF یا حتی ویدیو. با رفتن به قسمت می توانید این را در عمل مشاهده کنید متن پیمایش ژنراتور در PSDDude که در آن می توانید تصاویر و ویدیوهای متن پیمایش سفارشی خود را ایجاد کنید.

کد HTML مستقیماً به جلو است:

 id="scrollingCanvas" width="300" height="50">

و JS جایی است که جادو اتفاق می افتد:

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();

استفاده از حلقه با requestAnimationFrame() فراخوانی تابع draw() در واقع راهی است که بازی های HTML5 طراحی گرافیکی خود را پیاده سازی می کنند. این یک روش جالب برای ایجاد متن پیمایشی صاف است.

اندازه متن را با استفاده از measureText() روش زمینه این امکان ایجاد یک متن پیمایشی بدون درز را با تنظیم مجدد موقعیت متن هنگامی که به موقعیت پایانی رسید، می دهد.

GIF متن پیمایش LED:

مولد متن پیمایشی در باز کردن جنگ ستارگان:
https://www.youtube.com/watch?v=RkRJeGlwCQI

متن اسکرول بورس:

متن پیمایش آب و هوا:

اینها با پیمایش متن gif و تولید کننده ویدیو در PSDDude ایجاد شدند.

اکنون می دانید که چگونه با استفاده از HTML، CSS و/یا جاوا اسکریپت متن پیمایشی بسازید.

برای چه چیزی از این استفاده خواهید کرد؟

برای من کامنت بگذارید تا بدانم. همچنین، اگر احساس می‌کنید روش مهمی را برای ایجاد متن پیمایشی از دست داده‌ام، نظرات خود را در مورد آن به من بگویید.