Typed.js

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

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 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

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

Typed.js #1

HTML:

            
              <p>
                Your company will look
                <span class="text-primary">
                  <strong class="u-text-animation-v1 u-text-animation-v1--typing"></strong>
                </span>
                <br>
                Covert more visitors, and win more business with Front template.
              </p>
            
          

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/typedjs/typed.css">
            
          

JS library and initialization:

            
              <!-- 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>
            
          

Typed.js #1

HTML:

            
              <div class="bg-primary p-3">
                <h1 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>
                </h1>
              </div>
            
          

CSS library:

            
              <link rel="stylesheet" href="assets/vendor/typedjs/typed.css">
            
          

JS library and initialization:

            
              <!-- 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>