Auto-scroll announcement bar
How to create an auto-scroll announcement bar
- In your theme editor, select Announcement bar and tick the box Show Announcement.
- Copy this HTML code into the Message
<div class="sf__scrolling-text text-base" data-outline-thickness="thin" data-s-dir="ltr" style="--speed: 15s;">
<div class="sf__scrolling-text-inner">
<p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
<p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
<p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
<p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
<p><em><b>ANNOUCEMENT 1</b><span class="custom" data-scale="large"></span><b>ANNOUCEMENT 2</b> <span class="custom" data-scale="large"></span><b>ANNOUCEMENT 3</b><span class="custom" data-scale="large"></span></em></p>
</div>
</div>
- Then, freely change the content inside the code (text Announcement)
To change the speed of the auto-scrolling section, you can edit the first code line, you can see the code style="--speed: 15s;" - then you can edit "15s" to any other amount of time you want.
Last modified 3mo ago