Animated Text Particle
A Gantry5 particle for radical web typography. See how Animated Text can be designed beautifully on Demo Page.
# Animated Text Package contents
| Files | Description |
|---|---|
| jlanimatedtext.yaml | Contains the Animated Text particle settings. |
| jlanimatedtext.html.twig | The Twig file to pull information, settings. |
| headlines.css | Contains the Animated Text CSS. |
| headlines.js | Contains the Animated Text JavaScript |
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Go to Template/Theme Settings > select the Layout to add Animated Text particle (i.e: Home) -> Layout tab -> Drag and drop the Animated Text Particle from Particles panel (left corner) to the section you want to display the text.
Settings
| Settings | Description |
|---|---|
| Before Text | Customize the before Text |
| Items | List text items to animate. You can add new items to the collection using the plus + icon |
| After Text | Customize the after text. |
| Animated Style Settings | Common settings for Animated Style |
| Style | Choose one of the styles to present your text effect. |
| CSS Classes | CSS class name for the particle. |
Items You can add new items to the collection using the plus + icon
| Settings | Description |
|---|---|
| Title | Insert the title text to animate.(i.e: Animated Text) |
Style Tab
Title Settings Common settings for Title
| Settings | Description |
|---|---|
| Style | Heading styles differ in font-size but may also come with a predefined color, size and font. |
| Color | Customize the headline color. |
| Font Size | Customize the headline text font size. |
| Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| HTML Element | Choose one of the elements to fit your semantic structure. |
Item Settings Common settings for Items
| Settings | Description |
|---|---|
| Text Color | Customize the Animated Text color. |
| Text Font Size | Customize the Animated Text font size. |
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings
Comments