How to add a scrolling marquee effect to Rich Text on my Refresh website?

[sundayflea]

Hi, 

I'd like to add a scrolling effect to the Rich Text section on my website (as well as the announcement bar) similar to the website below:

https://www.sukamii.com/

My current site:

[BSS-Commerce]

Hi @sundayflea 

Since you did not mention your store link in the topic, we will only guide you in a general way on our store.

1. Please Go to store => right click => inspect

2. Get the class corresponding to where you want the animation, like position 3 in the image below, pay attention to the tag that contains text.

3. After getting the class of the tag you want to have the animation text in, replace your class with our announcement-bar__message class.

.announcement-bar__message{
    animation: news 15s infinite linear;
}

@keyframes news {
      0% {
          transform: translateX(1016px); /*increase and decrease to adjust the right appearance position accordingly*/
      }

      100% {
          transform: translateX(-1016px);increase and decrease to adjust the left appearance position accordingly
      }
}

4. Then go to your Admin Store => Online Store => Themes => Edit Code => search base.css and add that code at the end of base.css file. 

Finally, save your code and check the result. If it doesn't work, please provide your store link so we can check it.

I hope that this can help you solve the issue.

[benllih]

If you need a simple text scroller section, there's a free download here. Think you just have to enter your email. Worked for me!
https://hotboxsolutions.com/shopify-tutorial/free-text-scroller-section