With the Animated Headings and Animated Highlighting features, you can bring your pages to life and grab visitors' attention quickly. The new animations are an excellent way to engage users, and encourage them to explore the rest of your content.
- Please find here an example in use.
Animated Headings Text
Uncode includes several advanced animations for the Heading module. The new animation options include:
- Curtain for lines
- Single word curtain
- Single letter curtain
- Single word sliding
- Single word sliding reverse
- Typewriter
You can also customize these animations, using parameters such as Animation Speed, Animation Delay, and Animation Interval, screenshot . Some of these effects, such as Curtains for lines, work in a very advanced and responsive way. While a page is being loaded, the feature can make sense of how your text is wrapped on various lines according to the device being used, and apply the resulting animation for the best effect.
Animated Headings don't work
- Don't use HTML markup and symbols: please don't use any HTML markup and HTML symbols inside the Heading module. If you copied your text from a website, or from an application like Pages or Words, please remove the possible HTML extra codes, screenshot .
- Heading not visible or delayed animation: before starting the animation the script checks if the declared fonts are available, if you don't see your headings, it's due to a problem in loading the fonts. Please verify that the fonts are correctly declared in the Heading module Font Family option. Note also that Animated Headings do not work with gradient colors, please use a solid color. Keep in mind that this effect is not recommended with the column's Parallax animation because can make the JavaScript calculations heavy.
Animated Highlighting
To make your text animations even more stunning, we’ve also added an easy-to-use shortcode that can add an underlining or underscore effect to your headings. This effect can be either static or dynamic. What's more, you can customize the following settings for the animation:
- color: this option identifies the background color for the underline effect. You'll need to enter the desired color's ID code (this is not the hexadecimal color code, but the color ID found in the Theme Options). If you want to include an accent color, on the other hand, you can simply use the term accent.
- opacity: with this setting, you can determine the opacity value of your underlined text. It can be set anywhere between 0 to 1. For example, a value of 0.5 is equivalent to 50% opacity.
- height: this value identifies the dimensions of the underline effect, and can be set in pixels or as a percentage.
- animate: this option determines whether or not the animation effect will be applied.
- offset: finally, this lets you move the underline effect to the desired location.
Here are a few examples of shortcodes to add this new effect to your pages, screenshot :
[uncode_hl_text color="accent" opacity="1" height="25" animate="true" offset="0.1em"]Your text 1[/uncode_hl_text] [uncode_hl_text color="color-482803" opacity=".5" height="15px" animate="false" offset="0.0em"]Your text 2[/uncode_hl_text] [uncode_hl_text color="color-210407" opacity=".75" height="2px" animate="true" offset="0.2em"]Your text 3[/uncode_hl_text]
Note: Please note that the color IDs in these codes correspond to Uncode's demo content. If you’ve deleted Demo Contents Theme Options' colors, these codes will not work. Please also note that due to technical and performance limitations, when used in a Content Slider the animation effect is only applied to the first slide.
Comments
0 comments
Article is closed for comments.