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.
1
<div class="sf__custom-html-block1" style="--speed: 22s;">
2
<div class="m-scroll">
3
<div class="m-scroll__title">
4
<div>
5
<span class="sf__text-scroll px-12">TEXT 1</span>
6
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
7
<span class="sf__text-scroll px-12">TEXT 1</span>
8
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
9
<span class="sf__text-scroll px-12">TEXT 1</span>
10
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
11
<span class="sf__text-scroll px-12">TEXT 1</span>
12
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
13
<span class="sf__text-scroll px-12">TEXT 1</span>
14
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
15
<span class="sf__text-scroll px-12">TEXT 1</span>
16
<span class="sf__text-stroke text-stroke-1 px-12">TEXT 2</span>
17
</div>
18
</div>
19
</div>
20
</div>
Copied!
  • 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