How to use JavaScript to achieve the left and right scrolling effect of fonts

With the continuous development of society, front-end development technology has become increasingly mature. Among them, JavaScript, as one of the most important Web front-end development languages, has rich scalability and operability. In actual development, we can use JavaScript to achieve various dynamic effects, such as left and right scrolling effects of fonts. This article will introduce in detail how to use JavaScript to achieve the left and right scrolling effect of fonts.

1. HTML structure

First, we need to create a container in html to display the font we want to scroll. The html structure is as follows:

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

In this structure, we use two elements: div container and span text. Among them, the div container is used to limit the scrolling range of the text, and the span text is the text content to be scrolled.

2. CSS Style

Next, we need to use CSS style to modify the above html structure to give it a scrolling effect. The CSS style is as follows:

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

We use the overflow: hidden attribute to hide content beyond the scope of the container. In this way, we can put all the text content to be scrolled into the container. At the same time, we use the white-space: nowrap attribute to prevent the text content from wrapping. margin-rightThe attribute is used to control the scrolling speed. The larger the value, the slower the scrolling, and vice versa.

The most important thing is that we use the animation property in CSS3 to set the text scrolling animation. @keyframesThe keyword is used to declare the key frames of the animation, that is, the beginning and end of the scrolling effect. In the textScroll animation, we set the initial state to 0%, and the final state to -100%, that is, the text rolls out of the container.

3. JavaScript interaction

Through the above CSS style settings, we have completed the layout of the scrolling effect, but in fact, the scrolling effect is a rendering effect of the browser and is not directly implemented by JavaScript. In order to control this scrolling effect, we also need a certain degree of JavaScript interaction. Next, we will use JavaScript to start and stop text scrolling.

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

We use the document.getElementById method to get the text element to be scrolled, and get the text animation by getting the animation attribute of the text element. Then, you can stop the text scrolling effect by setting the animation property of the element to none. Finally, we use the setTimeout method to asynchronously restore text scrolling, that is, restore the initial animation settings.

Through the above JavaScript interaction, we have completed the realization of the text scrolling effect.

4. Summary

So far, we have successfully implemented JavaScript to achieve the left and right scrolling effect of fonts. The scrolling effect of text can be set through CSS styles, and the start and stop of text scrolling can be controlled through JavaScript interaction, which has certain practicality and reference value. I hope this article can be helpful to developers who are new to JavaScript and continue to support the growth of front-end development technology.

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