Logo v2.3.1
Image Description

No Results

  • Get Support
  • Preview Demo
Logo v2.3.1
  • Docs
  • Snippets
  • Documentation
  • Introduction
  • Getting started
  • Getting Started
  • Gulp
  • Customization
  • Credits
  • Changelog
  • Design & Graphics
  • Bootstrap Icons
  • Duotone Icons
  • Illustrations
  • Figma
  • Components
  • Accordion
  • Alerts
  • Avatars
  • Badge
  • Banners
  • Breadcrumb
  • Buttons
  • Cards
  • Collapse
  • Column Divider
  • Devices
  • Divider
  • Dropdowns
  • List Group
  • Lists
  • Modal
  • Offcanvas
  • Pagination
  • Popovers
  • Progress
  • Shapes
  • Spinners
  • Steps
  • Tab
  • Tables
  • Toasts
  • Tooltips
  • Typography
  • Navbars
  • Navbar
  • Navs
  • Mega Menu
  • Scrollspy
  • Basic forms
  • Basic Forms
  • Checks & Switches
  • Input Group
  • Media
  • Fullscreen Lightbox
  • Swiper Touch Slider
  • Others
  • Sticky Block
  • Countdown
  • Sorting (Shuffle.js)
  • Go To
  • Show Animation
  • Typedjs
  • Utilities
  • Backgrounds
  • Borders
  • Colors
  • Lines
  • Links
  • Position
  • Rotations
  • Shadows
  • Sizing
  • Spacing
  • Z-index

Typedjs

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

Typedjs documentation

How to use

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 following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
        
      

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

        
          <script>
            (function() {
              // INITIALIZATION OF TEXT ANIMATION (TYPING)
              // =======================================================
              const typed = HSCore.components.HSTyped.init('.js-text-animation')
            })()
          </script>
        
      

Example

  • Preview
  • HTML

Your company will look

              
                <p>
                  Your company will look
                  <span class="js-text-animation text-primary fw-bold"
                      data-hs-typed-options='{
                        "strings": ["more professional.", "perfect in every way.", "astonishing."],
                        "typeSpeed": 60,
                        "loop": true,
                        "backSpeed": 25,
                        "backDelay": 1500
                      }'></span>
                </p>