Auto-scroll text section
How to create an auto-scroll text section
  • Add a Custom Content section, then add a Custom HTML block.
  • Copy this HTML code into the Custom HTML block.
<div class="sf__custom-html-block1" style="--speed: 22s;">
<div class="m-scroll">
<div class="m-scroll__title">
<div>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
<span class="sf__text-scroll px-12">TEXT 1</span>
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
</div>
</div>
</div>
</div>
  • Change the text content (TEXT 1, TEXT 2) into the text you want to show
Change the speed if you need by editing the code: find the text code style="--speed: 22s;" change change "22s" into any amount of time you need
Copy link