How can I create a scrolling announcement bar with two messages?

Shopify Discussion
1

Hello,

I would like to create a scrolling announcement bar with 2 differents messages, and change the colour of the background and the font !

I also want add my logo between the message like this : https://miliamatcha.com/

Theme : Prestige

Thanks a lot

2

You can easily add this using code (I don’t think Shopify has any section that provides that to you natively.) Please use this as an example starting point: https://codepen.io/willarch/pen/xxMzYag

You can duplicate your theme and add this piece of code on theme.liquid right below the tag for experimenting it.
Let me know if that helps or you require further clarification.
Thanks.

3

Here is code you can add in HTML Section


        

            Your first message here
            
            Your second message here

Then ADD CSS

.marquee {
    width: 100%;
    overflow: hidden;
    background-color: lightpink;
}

.track {
    white-space: nowrap;
    display: flex;
    animation: marquee 10s linear infinite;
}

.content {
    padding: 10px 20px;
    color: #000; /* Change the font color if needed */
    font-size: 20px;
}

.logo {
    height: 50px; /* Adjust the size of your logo */
    padding: 10px;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

ADD JS SCRIPT

document.addEventListener('DOMContentLoaded', function() {
    const track = document.querySelector('.track');
    const trackWidth = track.offsetWidth;
    const viewportWidth = window.innerWidth;
    const totalWidth = trackWidth + viewportWidth;
    const animationDuration = totalWidth / 100; // Adjust the speed here

    track.style.animationDuration = `${animationDuration}s`;
});
4

Hey,

Thanks for your message but it doesn’t work like nothing change…