HTML, CSS 및 JavaScript로 스크롤링 텍스트 만들기

JavaScript

25년 이상 웹 애플리케이션을 구축해온 저처럼 HTML, CSS, JavaScript를 사용하는 것은 두 번째 본능이 되었습니다.

이 글에서는 이러한 도구를 사용하여 스크롤링 텍스트를 만드는 몇 가지 간단한 방법을 보여드리겠습니다. 여기에는 일반 HTML, HTML과 CSS, 마지막으로 HTML + CSS + JS를 사용한 스크롤링 텍스트 코딩을 위한 5가지 방법이 포함됩니다.

1. 일반 HTML 스크롤링 텍스트

텍스트 주위에 태그를 추가하여 스크롤 효과를 생성합니다. 이 태그는 몇 가지 흥미로운 매개변수를 제공합니다. 그 중에서:

direction — 왼쪽, 오른쪽, 위 또는 아래
scrollamount — 스크롤 텍스트의 속도
loop — 스크롤이 몇 번 반복되어야 하는지

참고: 이것은 더 이상 사용되지 않는 HTML 태그이므로 현대 웹 프로젝트에서 사용할 때는 자제할 것을 권장합니다.

2. CSS로 애니메이션 스크롤링 텍스트

스크롤이라는 CSS 애니메이션을 정의하여 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. 캔버스 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() 컨텍스트 메서드를 사용하여 텍스트의 화면 크기를 얻습니다. 이를 통해 텍스트 위치를 재설정하여 끝 위치에 도달했을 때 매끄러운 스크롤링 텍스트를 만들 수 있습니다.