Typed.js

Decorate your website with Typed.js is a library that types, allowing to showcase more texts in a sentence.

Official documentation

For more detailed information and examples, see the official documentation: Typed.js .

How to use?

Wrap any block in a parent element with an ID or class and add the same ID in the JS INIT function of the plugin.

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

                
                  <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>
                
              

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

                
                  <script>
                    $(document).on('ready', function () {
                      // initialization of text animation (typing)
                      var typed = new Typed(".u-text-animation.u-text-animation--typing", {
                        strings: ["more professional.", "perfect in every way.", "astonishing."],
                        typeSpeed: 60,
                        loop: true,
                        backSpeed: 25,
                        backDelay: 1500
                      });
                    });
                  </script>
                
              

Basic example

Your company will look

                      
                        <p>
                          Your company will look
                          <strong class="u-text-animation u-text-animation--typing"></strong>
                        </p>
                      
                    

Example #1

Your company will look
Attract more visitors, and win more business with Front template.

                      
                        <p>
                          Your company will look
                          <span class="text-primary">
                            <strong class="u-text-animation-v1 u-text-animation-v1--typing"></strong>
                          </span>
                          <br>
                          Attract more visitors, and win more business with Front template.
                        </p>
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of text animation (typing)
                            var typed = new Typed(".u-text-animation-v1.u-text-animation-v1--typing", {
                              strings: ["more professional.", "perfect in every way.", "astonishing."],
                              typeSpeed: 60,
                              loop: true,
                              backSpeed: 25,
                              backDelay: 1500
                            });
                          });
                        </script>
                      
                    

Example #2

We help

                      
                        <div class="bg-primary p-3">
                          <h2 class="text-white font-weight-normal">
                            We help<br>
                            <span class="text-warning">
                              <span class="u-text-animation-v2 u-text-animation-v2--typing"></span>
                            </span>
                          </h2>
                        </div>
                      
                    
                      
                        <!-- JS Implementing Plugins -->
                        <script src="../../assets/vendor/typed.js/lib/typed.min.js"></script>

                        <!-- JS Plugins Init. -->
                        <script>
                          $(document).on('ready', function () {
                            // initialization of text animation (typing)
                            var typed = new Typed(".u-text-animation-v2.u-text-animation-v2--typing", {
                              strings: ["building brands.", "dealing with complexity.", "win more business."],
                              typeSpeed: 60,
                              loop: true,
                              backSpeed: 25,
                              backDelay: 1500
                            });
                          });
                        </script>
                      
                    

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-target="".

Attribute Description

data-target

Checkboxes to which toggle is applied (this may not be necessarily an ID, it can be a class for a particular group of checkboxes).

data-slaves

Must specify the buttons that's used in each separate section.
Contact Us