Animated Text Particle

  • Tony
  • 23 April 2017
  • No comments
  • Docs
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

Video Tutorial

Comments

Leave a Reply

You must be logged in to post a comment.