S5 Typed Text
This tutorial will explain how to install and configure the S5 Typed Text module.
The S5 Typed Text module allows you display up to 5 animated text lines per page. You can add HTML to each line too. The text can't be displayed on smaller screens such as mobile phones so some classes are included to hide the animation on mobile and instead show a static line of text. You can set the speed of typing, backspacing and even if you want it to loop the animation or not.
Note - Many of our club products contain specific styling for our extensions. These styles cannot be transferred from one product to another; they are integrated into the design. The same extension is used on all installations, the themes themselves contain the styling overrides. If a particular theme does not include unique styling for a particular extension, then the default style is used.
Be sure to read the tooltips and other descriptions in the backend of this extension. There are a lot of tips and further information found in these areas.
The first thing you'll need to do is install the module. Once you have it downloaded it just follow the below tutorial if you need help installing the module into Joomla. Because this is a module you will only need to follow steps 1 through 3 on the tutorial, and then continue with the rest of the tutorial on this page.
2. How to setup?
You can use any of the sample code below but basically the script works as follows. Anything inside the first DIV with the class "typed1" is what the script will use to output as typed text. Then the span with the id="typed1" on it is where the script will output these lines of text and animate them. Both the class and id of "typed1" are set in the plugin admin area. You can set them to whatever you want. Just be sure to change both typed1 to whatever you enter in the plugin admin. You can see in our second example we did "typed2". Again this is just what we made up and entered in the admin of the plugin.
3. Code Example
<div class="s5_typedstring s5_typedstring_desktop">
<span>We help you achieve the best outcome</span>
<span>We help you achieve the premier outcome</span>
<span>We help you achieve the most excellent outcome for your project</span>
<span id="typed1" class="s5_typedstring_desktop" style="white-space:pre;"></span>
<h1 class="s5_typedstring_mobile s5_pc_center">We help you achieve the<br> <span class="s5_highlight1">most excellent outcome</span> for your project</h1>
4. Lastly configure the other settings like how the text speed, looping, etc