Home >Web Front-end >JS Tutorial >How to use JavaScript to achieve text scrolling effect?

How to use JavaScript to achieve text scrolling effect?

WBOYOriginal: 2023-10-16 08:53:071781browse

如何使用 JavaScript 实现文字滚动效果？

The text scrolling effect is a common dynamic effect in web pages. Through the scrolling display of text, it can attract the user's attention and increase the vitality of the page. The following will introduce in detail how to use JavaScript to achieve text scrolling effect, with code examples attached.

Create HTML structure

First, create a container in the HTML page to wrap the scrolling text. The code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>文字滚动效果</title>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">这是一段滚动的文字。</div>
    </div>

    <script src="scroll.js"></script>
</body>
</html>

Writing CSS styles

Next, we need to add styles to the container and text to show the scrolling effect. The code is as follows:

#scroll-container {
    overflow: hidden;
    height: 30px;
    width: 200px;
}

#scroll-text {
    white-space: nowrap;
    animation: scroll 5s linear infinite;
}

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

In the above code, we set a fixed height and width for the container and use overflow: hidden to hide the overflow text. For scrolling text, we used white-space: nowrap to prohibit text wrapping, and defined an animation named scroll to achieve the scrolling effect of text.

Write JavaScript code

Finally, we need to use JavaScript to dynamically generate scrolling text. We use a timer to change the scrolling text content every once in a while. The code is as follows:

var scrollText = document.getElementById('scroll-text');
var texts = ['这是一段滚动的文字。', '这是第二段滚动的文字。', '这是第三段滚动的文字。'];
var index = 0;

setInterval(function() {
    scrollText.textContent = texts[index];
    index = (index + 1) % texts.length;
}, 3000);

In the above code, we first obtain the element node scrollText of the scrolling text, and then define an array texts to store multiple scrolling text contents. Use a timer to change the content of the scrolling text every three seconds to achieve the effect of text scrolling.

Through the above steps, we have completed the process of using JavaScript to achieve the text scrolling effect. You can adjust the style of the container and text according to your needs, and you can also modify the time interval of the timer and the content of the scrolling text as needed.

I hope the above code examples will be helpful to you and can successfully achieve the text scrolling effect. I wish you success!

The above is the detailed content of How to use JavaScript to achieve text scrolling effect?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html overflow

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use JavaScript to achieve dynamic flashing effect of page title?Next article：How to use JavaScript to achieve dynamic flashing effect of page title?

See more

How to use JavaScript to achieve text scrolling effect?

Related articles