How to use JavaScript to achieve text scrolling effect?-JS Tutorial-php.cn

How to use JavaScript to achieve text scrolling effect?

WBOY

Release： 2023-10-16 08:53:07

Original

1766 people have browsed it

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

How to use JavaScript to achieve text scrolling effect?

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>

Copy after login

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%);
    }
}

Copy after login

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

Copy after login

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!