Typed.js

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

Typed.js #1

HTML:

            
              <!-- Hero Section -->
              <div class="position-relative gradient-overlay-half-dark-v2 bg-img-hero" style="background-image: url(../assets/img/1920x800/img7.jpg);">
                <div class="d-lg-flex align-items-lg-center height-100vh--lg">
                  <div class="container text-center space-2 space-0--lg">
                    <h2 class="display-3 font-size-48--md-down text-white mb-4">
                      <strong class="u-text-animation-v1 u-text-animation-v1--typing"></strong>
                      for everyone
                    </h2>
                  </div>
                </div>
              </div>
              <!-- End Hero Section -->
            
          

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: ["Build", "Design", "Code"],
                    typeSpeed: 130,
                    loop: true,
                    backSpeed: 50,
                    backDelay: 3000
                  });
                });
              </script>
            
          

Typed.js #2

HTML:

            
              <!-- Hero Section -->
              <div class="bg-img-hero-center" style="background-image: url(../assets/img/1920x800/img6.jpg);">
                <div class="container space-2 space-4-top--lg space-3-bottom--lg">
                  <div class="w-md-75">
                    <!-- Title -->
                    <div class="mb-7">
                      <span class="d-block text-white text-uppercase mb-2">Make difference</span>
                      <h2 class="display-2 font-size-48--md-down text-white">
                        We are
                        <strong class="u-text-animation-v2 u-text-animation-v2--typing"></strong>
                      </h2>
                    </div>
                    <!-- End Title -->
                  </div>

                  <div class="w-md-75 w-lg-50">
                    <!-- Input -->
                    <form class="js-validate js-form-message">
                      <div class="js-focus-state input-group input-group-lg form form--lg form--white-brd">
                        <input type="email" class="form-control form__input" name="email" required
                               placeholder="Enter your email address"
                               aria-label="Enter your email address">
                        <span class="input-group-append form__append">
                          <button type="submit" class="btn btn-primary">Get Started</button>
                        </span>
                      </div>
                    </form>
                    <!-- End Input -->
                  </div>
                </div>
              </div>
              <!-- End Hero Section -->
            
          

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: ["creative", "funny", "Space"],
                    typeSpeed: 130,
                    loop: true,
                    backSpeed: 50,
                    backDelay: 3000
                  });
                });
              </script>