Moving Announcement Bar

[NathanKim]

Can someone show me how to add a moving announcement bar exactly like this website?

https://sonix.audio/

This is my website and you can see the static announcement bar: https://ariasound.co/

[NomtechSolution]

To add this you need to add marquee code in announcement bar

[NathanKim]

Can you give me the exact code?

[Akibhusen]

Here's a step-by-step guide to help you out:

- From your Shopify admin, go to "Online Store" and then click on "Themes."
- Find the "Motion with Installments" theme and click on the "Actions" button, then select "Edit code" from the dropdown menu.
- In the list of theme files on the left-hand side, locate and click on "theme.liquid" to open it.
- Scroll down the code until you find the <header> section, which represents the header of your website.
- In this section, you'll need to add the code for the announcement bar slider. You can use HTML, CSS, and JavaScript to achieve the desired effect. Here's an example of the code structure you can use:

<div id="announcement-slider">
  <ul>
    <li>Announcement 1</li>
    <li>Announcement 2</li>
    <li>Announcement 3</li>
  </ul>
</div>

<style>
#announcement-slider {
  overflow: hidden;
  white-space: nowrap;
}

#announcement-slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: marquee 15s linear infinite;
}

#announcement-slider li {
  display: inline-block;
  padding: 0 10px;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
</style>

-  Once you've added the code, click on the "Save" button to apply the changes.

[NathanKim]

This worked as a guide but as I do not know any code I don't know how to make it the way I want it to be. As given in the reference (https://sonix.audio/), I want the announcements to be evenly spaced from each other and move at a slower rate. Could you give me the exact code needed for this?

[Akibhusen]

Try the below one:

<div class="announcement__text">
  <ul>
    <li>Announcement 1</li>
    <li>Announcement 2</li>
    <li>Announcement 3</li>
  </ul>
</div>



<style>
.announcement__text {
  overflow: hidden;
  white-space: nowrap;
}

.announcement__text ul {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: marquee 50s linear infinite;
}

.announcement__text li {
  display: inline-block;
  padding: 0 10px;
  width:33.33%;
}

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

@media(max-width:991px){
  .announcement__text li{width:100%;}
  .announcement__text ul{animation: marquee 30s linear infinite;}
}

</style>