Hi,
Is there someone that can point me in the right direction in what code/scrupt I should look into in order to get a ‘rolling/slider’ function on the text in the announcement bar instead of a static message/bar?
Similar to the announcement bar in this store: https://uk.missoma.com/
I want to learn how to code it without an additional app, please.
Thank you!
Jesper
Hello @jesperahlbomUK ,
I have done similar effect for the Debut theme. By adding below CSS in your theme.css file you can get rollover effect.
.announcement-bar {
height: 50px;
overflow: hidden;
position: relative;
}
.announcement-bar p{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: example1 25s linear infinite;
-webkit-animation: example1 25s linear infinite;
animation: example1 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
0% {
-moz-transform: translateX(100%); /* Firefox bug fix */
-webkit-transform: translateX(100%); /* Firefox bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Firefox bug fix */
-webkit-transform: translateX(-100%); /* Firefox bug fix */
transform: translateX(-100%);
}
}
Note: You can set text speed accordingly as per your need (25 s) change it if you need.
Fyi: It will called marquee effect..
Thanks!
That works fine and thanks for the FYI so I can read up on it and understand the code behind better.
Do you know if it’s possible to repeat/loop the message as well?
Hi @jesperahlbomUK ,
By using custom section blocks (Adding blocks to a dynamic section). You need to first create a custom section with dynamic blocks & then add CSS accordingly. so multiple texts will be repeated like a slider.
For understanding example URL: https://lssrvn.com/advanced-shopify-building-dynamic-sections-on-custom-pages
Note: You need to do custom coding for that..
Thanks!
Challenge accepted 
thank you for this help and the start of a solution for me to keep working on!
How to apply this when you have no “theme.css” only theme.js (I have Maker theme)
I’m facing this too, I do not have a .css version. There’s only .js in minimal theme.
Hello,
Welcome to the shopify Community.
It seems that I need to enter into your store to do coding.
Would you please add me as a staff member so that I can enter into your store and can solve your problem.
Sure, but would it be possible to make the announcement bar as a rolling
one on a continuos loop?
yes
great, that is so assuring. Kindly send me a request, ill accept it right
away.
@adorna Please send me your website URL.
Hi @Hardik29418 Could you please help me add the code too? I would like to have the text within the announcement bar rolling. This is my website url: https://fairysuperfoods.com/
Please let me know if you can help me, so that I can send you an invite.
Sent via message, please check
@adorna Please check now.
Hey, thank you, but they appear as 3 separate lines. I was looking for a single-line, rolling bar on a continuous loop.
and its not rolling 
@adorna Please check in the live website. You can find that it is rolling after every 2 seconds.
Hi, it’s working. I’m getting the marquee effect.
However, if the sentence is long its breaking into 2 lines.
Is there a way to prevent that? Or can we make this a separate announcement bar above the header?
Like rn its a part of Search, Login and Cart banner right? Instead can we
push this as separate bar above this? Then the page will start with the announcement bar, then the Search-Login-Cart bar.
Please check now @adorna
