The marquee tag was used (in older versions of HTML) to create an automatic scrolling effect for text or images. But HTML5 deprecated <marquee> tag as its function can be better handled by CSS animations. So, how can we create scrolling text in HTML without the marquee tag? The answer is simple, using CSS animations.

The marquee animation is useful to scroll the latest news/posts or updates on the webpage. It can also be used for advertisement purposes or where you wanted to integrated this animation. As you have seen in the above preview, a bar containing the boxes for text just like a news ticker. You can check it on the demo page to see the marquee animation.

The basic requirement of this little project is to move text from one side to another continuously. For this purpose, the CSS translate transformation property provides us an easy way to create a scrolling effect just like the marquee tag does. So, let’s get started with HTML to create a scrolling text effect.

HTML Structure for Scrolling Text

In HTML, create a div element with a class name "Marquee" and place your text wrapped with another div tag and define its class name "Marquee-tag". The basic HTML structure for the scrolling text is as follows:

1. <div class=“marquee-container”>
2. <div class=“Marquee”>
3. <div class=“Marquee-content”>
4. <div class=“Marquee-tag”>1</div>
5. <div class=“Marquee-tag”>2</div>
6. <div class=“Marquee-tag”>3</div>
7. <div class=“Marquee-tag”>1</div>
8. <div class=“Marquee-tag”>2</div>
9. <div class=“Marquee-tag”>3</div>
10. <div class=“Marquee-tag”>1</div>
11. <div class=“Marquee-tag”>2</div>
12. <div class=“Marquee-tag”>3</div>
13. <div class=“Marquee-tag”>1</div>
14. <div class=“Marquee-tag”>2</div>
15. <div class=“Marquee-tag”>3</div>
16. </div>
17. </div>
18. </div>

You can also place images inside the "Marquee-tag" div element. Likewise, you can add any HTML element that you want to scroll along with the text.

The CSS Styles

In the above HTML structure, we wrapped all marquee content into a container having a class “marquee-container”. So, style this container as follows:

1. .marquee–container{
2. max–width: 860px;
3. margin: 15px auto;
4. overflow: hidden;
5. }

Now, target the "Marquee" class and set its linear-gradient background. Define its width, padding, and margin property. Similarly, define the border-box value for the box-sizing property and align the text to the center. Here the important thing is display property that you need to display flexbox. The font-size, color, and font-weight can be defined according to your needs.

1. .Marquee {
2. background: –webkit–linear–gradient(225deg, #008ed9, #8b00db);
3. background: –moz–linear–gradient(225deg, #008ed9, #8b00db);
4. background: –o–linear–gradient(225deg, #008ed9, #8b00db);
5. background: –ms–linear–gradient(225deg, #008ed9, #8b00db);
6. background: linear–gradient(-135deg, #008ed9, #8b00db);
7. width: 100vw;
8. –webkit–box–sizing: border–box;
9. –moz–box–sizing: border–box;
10. box–sizing: border–box;
11. padding: 1em;
12. color: #fff;
13. font–weight: 200;
14. display: –webkit–box;
15. display: –moz–box;
16. display: –webkit–flex;
17. display: –ms–flexbox;
18. display: box;
19. display: flex;
20. –webkit–box–align: center;
21. –moz–box–align: center;
22. –o–box–align: center;
23. –ms–flex–align: center;
24. –webkit–align–items: center;
25. align–items: center;
26. overflow: hidden;
27. margin: 15px auto;
28. }

After that, define the CSS styles for the “Marquee-content” class that is the wrapper element of scrolling text/images. Display it as a box element and define marquee animation using CSS linear infinite running property. We’ll define the keyframes for this (marquee) animation in the last step.

1. .Marquee–content {
2. display: –webkit–box;
3. display: –moz–box;
4. display: –webkit–flex;
5. display: –ms–flexbox;
6. display: box;
7. display: flex;
8. –webkit–animation: marquee 10s linear infinite running;
9. –moz–animation: marquee 10s linear infinite running;
10. –o–animation: marquee 10s linear infinite running;
11. –ms–animation: marquee 10s linear infinite running;
12. animation: marquee 10s linear infinite running;
13. }

In order to pause the scrolling text on the hover event, use the animation-play-state with hover pseudo-selector.

1. .Marquee–content:hover {
2. –webkit–animation–play–state: paused;
3. –moz–animation–play–state: paused;
4. –o–animation–play–state: paused;
5. –ms–animation–play–state: paused;
6. animation–play–state: paused;
7. }

The "Marquee-tag" class contains the text or whatever you added in this div element. Set it width, margin, padding, and background property as described below:

1. .Marquee–tag {
2. width: 200px;
3. margin: 0 0.5em;
4. padding: 0.5em;
5. background: rgba(255,255,255,0.1);
6. display: –webkit–inline–box;
7. display: –moz–inline–box;
8. display: –webkit–inline–flex;
9. display: –ms–inline–flexbox;
10. display: inline–box;
11. display: inline–flex;
12. –webkit–box–align: center;
13. –moz–box–align: center;
14. –o–box–align: center;
15. –ms–flex–align: center;
16. –webkit–align–items: center;
17. align–items: center;
18. –webkit–box–pack: center;
19. –moz–box–pack: center;
20. –o–box–pack: center;
21. –ms–flex–pack: center;
22. –webkit–justify–content: center;
23. justify–content: center;
24. –webkit–transition: all 0.2s ease;
25. –moz–transition: all 0.2s ease;
26. –o–transition: all 0.2s ease;
27. –ms–transition: all 0.2s ease;
28. transition: all 0.2s ease;
29. }

You can also specify styles for marquee items on the hover event. Like, you can set a custom background color or transform it as follows:

1. .Marquee–tag:hover {
2. background: rgba(255,255,255,0.5);
3. –webkit–transform: scale(1.1);
4. –moz–transform: scale(1.1);
5. –o–transform: scale(1.1);
6. –ms–transform: scale(1.1);
7. transform: scale(1.1);
8. cursor: pointer;
9. }

Finally, add the following CSS3 animation keyframes for scrolling text that move the "Marquee-content" element from one side to another.

1. @-moz–keyframes marquee {
2. 0% {
3. –webkit–transform: translateX(0);
4. –moz–transform: translateX(0);
5. –o–transform: translateX(0);
6. –ms–transform: translateX(0);
7. transform: translateX(0);
8. }
9. 100% {
10. –webkit–transform: translate(-50%);
11. –moz–transform: translate(-50%);
12. –o–transform: translate(-50%);
13. –ms–transform: translate(-50%);
14. transform: translate(-50%);
15. }
16. }
17. @-webkit–keyframes marquee {
18. 0% {
19. –webkit–transform: translateX(0);
20. –moz–transform: translateX(0);
21. –o–transform: translateX(0);
22. –ms–transform: translateX(0);
23. transform: translateX(0);
24. }
25. 100% {
26. –webkit–transform: translate(-50%);
27. –moz–transform: translate(-50%);
28. –o–transform: translate(-50%);
29. –ms–transform: translate(-50%);
30. transform: translate(-50%);
31. }
32. }
33. @-o–keyframes marquee {
34. 0% {
35. –webkit–transform: translateX(0);
36. –moz–transform: translateX(0);
37. –o–transform: translateX(0);
38. –ms–transform: translateX(0);
39. transform: translateX(0);
40. }
41. 100% {
42. –webkit–transform: translate(-50%);
43. –moz–transform: translate(-50%);
44. –o–transform: translate(-50%);
45. –ms–transform: translate(-50%);
46. transform: translate(-50%);
47. }
48. }
49. @keyframes marquee {
50. 0% {
51. –webkit–transform: translateX(0);
52. –moz–transform: translateX(0);
53. –o–transform: translateX(0);
54. –ms–transform: translateX(0);
55. transform: translateX(0);
56. }
57. 100% {
58. –webkit–transform: translate(-50%);
59. –moz–transform: translate(-50%);
60. –o–transform: translate(-50%);
61. –ms–transform: translate(-50%);
62. transform: translate(-50%);
63. }
64. }