Vue realizes marquee/text scrolling effect

Implement marquee/text scrolling effects in Vue, you can use CSS animations or third-party libraries. This article introduces how to use CSS animation: create scrolling text and wrap text with

. Define CSS animations and set overflow: hidden, width, and animation. Define keyframes, set transform at the beginning and end of the animation: translateX(). Adjust animation properties such as duration, scroll speed, and direction.

Vue realizes marquee/text scrolling effect

How to achieve it?

Implement marquee/text scrolling effects in Vue, you can use CSS animations or third-party libraries. This article will introduce how to use CSS animation.

Steps detailed explanation:

1. Create scrolling text: In a Vue template, wrap the text that needs to be scrolled, for example: <div class="marquee"><p>{{ text }}</p></div> .
2. Define CSS animation: In the <style></style> tag, define CSS animation, for example:

 <code class="css">.marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }</code>

• overflow: hidden hides text beyond the container part.
• width: 100% Set the container width to equal text width.
• animation defines the animation name, duration, number of repetitions, and playback mode.
• @keyframes defines the animation keyframe, 0% means when the animation starts and 100% means when the animation ends.

3. Adjust animation properties: Adjust animation properties as needed, such as duration, scroll speed, or direction.

Example:

 <code class="vue"><template> <div class="marquee"><p>{{ text }}</p></div> </template> <script> export default { data() { return { text: &#39;这是一条跑马灯&#39; }; } }; </script> <style> .marquee { overflow: hidden; width: 100%; white-space: nowrap; animation: marquee 10s infinite linear; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style></code>

Notice:

• The scrolling speed can be controlled by adjusting the animation duration.
• The scrolling direction can be controlled by changing the symbol of the value in transform: translateX() , such as transform: translateX(100%) to scroll the text to the right.
• The scroll distance can be controlled by adjusting the container width so that the container width is smaller than the text width.

The above is the detailed content of Vue realizes marquee/text scrolling effect. For more information, please follow other related articles on the PHP Chinese website!