> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/triumph/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/triumph/template/sections/scrolling-text.md).

# Scrolling text

Displays continuously moving text in a marquee-style layout.

*Shared Settings*:

* [<mark style="color:$primary;">First marquee options / Second marquee option</mark>](#first-marquee-option-second-marquee-option)
* [<mark style="color:$primary;">Section layout</mark>](/triumph/template/shared-settings/section-layout.md)
* [<mark style="color:$primary;">Section mobile layout</mark>](/triumph/template/shared-settings/section-mobile-layout.md)
* [<mark style="color:$primary;">Divider line</mark>](/triumph/template/shared-settings/divider-line.md)
* [<mark style="color:$primary;">Background</mark>](/triumph/template/shared-settings/section-background.md)
* [<mark style="color:$primary;">First marquee colors / Second marquee colors</mark>](#first-marquee-colors-second-marquee-colors)

*Shared Blocks:*

* [<mark style="color:$primary;">Text</mark>](/triumph/template/sections/scrolling-text/text.md)
* [<mark style="color:$primary;">Icon</mark>](/triumph/template/sections/scrolling-text/icon.md)
* [<mark style="color:$primary;">Image</mark>](/triumph/template/sections/scrolling-text/image.md)

***

**Speed**\
Controls how fast the text scrolls across the screen (10-100).

**Underline links on hover**\
Adds an underline effect when hovering over links inside the scrolling text.

**Add duplicate marquee**\
Displays a second scrolling marquee for a layered visual effect.

**Intersection position**\
Controls where the two marquees overlap horizontally (0-100%):

* **0%** - Places a second advertisement below the main one.
* **50%** - Displays the intersection in the center.
* **100%** - Sets on the top.

***

#### First marquee option / Second marquee option

**Rotation angle**\
Tilts the marquee for a more dynamic appearance (-15 - 15 deg).

**Reverse direction**\
Changes the scrolling direction when activated.

**Vertical padding**\
Controls the spacing inside the marquee above and below the content (10-100 px).

**Gap**\
Sets the spacing between content in the marquee (20-200).

***

#### First marquee colors / Second marquee colors

**Text color**\
Controls the color of the scrolling text.

**Text color on hover**\
Changes the text color when hovered.

**Background**\
Choose the background style for the marquee.

* **None** – No background applied.
* **Color** – Set a solid background color. Use the '**Background color**' and '**Background on hover**'.
* **Gradient** – Apply a gradient background. Use the '**Background gradient**' and '**Bradient on hover**'.

**Change background on hover**\
Enables a different background color when hovering.

***

{% tabs %}
{% tab title="Desktop" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FZwEYh7kjCiMy4f9VxVEd%2Fscrolling%20text_desktop.png?alt=media&amp;token=2d5d68a9-6035-4918-a9ca-68287b9fb90d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Mobile" %}

<figure><img src="https://4126621502-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkpREZeVZogNLjx09og4O%2Fuploads%2FDTL9MwZj8Lt3zqnI1BkZ%2Fscrolling%20text_mobile.png?alt=media&amp;token=4a352707-64c8-4e0e-8bbc-36734b1e1e72" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}