How do I get a sliding announcement bar? (without app)

[jahlbom]

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

[paramSoft]

Please add me as a staff member

[maulikp · Accepted solution]

Hello @jahlbom ,

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!

[jahlbom]

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?

[maulikp]

Hi @jahlbom ,

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!

[jahlbom]

Challenge accepted thank you for this help and the start of a solution for me to keep working on!