Когда вы занимаетесь созданием веб-приложений более 25 лет, как я, использование HTML, CSS и JavaScript становится привычным делом.
В этой статье я покажу вам несколько простых способов создания прокручиваемого текста с использованием этих инструментов, включая пять различных методов кодирования прокручиваемого текста с обычным HTML, HTML и CSS, а также HTML + CSS + JS.
1. Прокручиваемый текст с помощью обычного HTML
Просто добавьте тег вокруг текста, чтобы создать эффект прокрутки. Этот тег предлагает несколько интересных параметров, среди которых:
- direction — может быть left, right, up или down
- scrollamount — скорость прокрутки текста
- loop — сколько раз должна повторяться прокрутка
ПРИМЕЧАНИЕ: Это устаревший HTML-тег, поэтому я бы рекомендовал осторожность при его использовании в современных веб-проектах.
2. Анимированный прокручиваемый текст с помощью CSS
Определите CSS-анимацию под названием scroll, анимирующую свойство translateX.
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
<div class="scrolling-text">Scrolling Text</div>
.scrolling-text {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: scroll 10s linear infinite;
}
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-код:
<div class="scrolling-text">
Scrolling Text Scrolling Text Scrolling Text
</div>
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);
4. Прокрутка текста с помощью jQuery
$(document).ready(
function loop() {
$('.scrolling-text').css({scrollLeft:0});
$('.scrolling-text').animate({ scrollLeft: "+=1000" }, 10000, 'linear', loop);
}
);
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-код простой:
<canvas id="scrollingCanvas" width="300" height="50"></canvas>
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() 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(). Это позволяет создать плавную прокрутку текста путем сброса позиции текста, когда он достигает конечной позиции.
Бонус: Несколько идей для прокручиваемого текста
LED Прокручиваемый текст GIF
Узнайте больше об этом по этой ссылке.
Генератор прокручиваемого текста Star Wars Opening Crawl
Узнайте больше об этом по этой ссылке.
Прокручиваемый текст рынка акций
Узнайте больше здесь.
Погодный прокручиваемый текст
Узнайте больше об этом здесь.
Эти были созданы с помощью генератора прокручиваемого текста gif и видео на PSDDude.
Заключение
Теперь вы знаете, как сделать прокручиваемый текст с использованием HTML, CSS и/или JavaScript.
Для чего вы будете использовать это? Оставьте мне комментарий, чтобы я это знал. Также, если вы считаете, что я упустил важный метод создания прокручиваемого текста, поделитесь своими мыслями по этому поводу.
Source:
https://dzone.com/articles/scrolling-text-html-css-javascript