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

Solved
jahlbom
Excursionist
37 2 12

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

0 Likes
paramSoft
Shopify Partner
1458 238 654

Please add me as a staff member

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
maulikp
Excursionist
26 5 12

This is an 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!
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on patelmaulik965.mp@gmail.com regarding any help
jahlbom
Excursionist
37 2 12

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?

 

Screenshot 2021-02-12 at 11.44.33.png

0 Likes
maulikp
Excursionist
26 5 12

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!

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on patelmaulik965.mp@gmail.com regarding any help
0 Likes
jahlbom
Excursionist
37 2 12

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