< >

typ_writing.php


Quell Code


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example - Type out all strings</title>
</head>
<body>

  <div id="typewriter"></div>

  <script>
  ! function(e, t) {
    "object" == typeof exports && "object" == typeof module ? module.exports = t() : "function" == typeof define && define.amd ? define("Typewriter", [], t) : "object" == typeof exports ? exports.Typewriter = t() : e.Typewriter = t()
}("undefined" != typeof self ? self : this, (function() {
    return function(e) {
        var t = {};

        function n(r) {
            if (t[r]) return t[r].exports;
            var o = t[r] = {
                i: r,
                l: !1,
                exports: {}
            };
            return e[r].call(o.exports, o, o.exports, n), o.l = !0, o.exports
        }
        return n.m = e, n.c = t, n.d = function(e, t, r) {
            n.o(e, t) || Object.defineProperty(e, t, {
                enumerable: !0,
                get: r
            })
        }, n.r = function(e) {
            "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
                value: "Module"
            }), Object.defineProperty(e, "__esModule", {
                value: !0
            })
        }, n.t = function(e, t) {
            if (1 & t && (e = n(e)), 8 & t) return e;
            if (4 & t && "object" == typeof e && e && e.__esModule) return e;
            var r = Object.create(null);
            if (n.r(r), Object.defineProperty(r, "default", {
                    enumerable: !0,
                    value: e
                }), 2 & t && "string" != typeof e)
                for (var o in e) n.d(r, o, function(t) {
                    return e[t]
                }.bind(null, o));
            return r
        }, n.n = function(e) {
            var t = e && e.__esModule ? function() {
                return e.default
            } : function() {
                return e
            };
            return n.d(t, "a", t), t
        }, n.o = function(e, t) {
            return Object.prototype.hasOwnProperty.call(e, t)
        }, n.p = "", n(n.s = 3)
    }([, function(e, t, n) {
        (function(t) {
            for (var r = n(11), o = "undefined" == typeof window ? t : window, i = ["moz", "webkit"], a = "AnimationFrame", s = o["request" + a], u = o["cancel" + a] || o["cancelRequest" + a], c = 0; !s && c < i.length; c++) s = o[i[c] + "Request" + a], u = o[i[c] + "Cancel" + a] || o[i[c] + "CancelRequest" + a];
            if (!s || !u) {
                var l = 0,
                    p = 0,
                    d = [];
                s = function(e) {
                    if (0 === d.length) {
                        var t = r(),
                            n = Math.max(0, 1e3 / 60 - (t - l));
                        l = n + t, setTimeout((function() {
                            var e = d.slice(0);
                            d.length = 0;
                            for (var t = 0; t < e.length; t++)
                                if (!e[t].cancelled) try {
                                    e[t].callback(l)
                                } catch (e) {
                                    setTimeout((function() {
                                        throw e
                                    }), 0)
                                }
                        }), Math.round(n))
                    }
                    return d.push({
                        handle: ++p,
                        callback: e,
                        cancelled: !1
                    }), p
                }, u = function(e) {
                    for (var t = 0; t < d.length; t++) d[t].handle === e && (d[t].cancelled = !0)
                }
            }
            e.exports = function(e) {
                return s.call(o, e)
            }, e.exports.cancel = function() {
                u.apply(o, arguments)
            }, e.exports.polyfill = function(e) {
                e || (e = o), e.requestAnimationFrame = s, e.cancelAnimationFrame = u
            }
        }).call(this, n(4))
    }, , function(e, t, n) {
        "use strict";
        n.r(t), n.d(t, "default", (function() {
            return C
        }));
        var r = n(1),
            o = n.n(r),
            i = function(e) {
                return new RegExp(/<[a-z][\s\S]*>/i).test(e)
            },
            a = function(e) {
                var t = document.createElement("div");
                return t.innerHTML = e, t.childNodes
            },
            s = function(e, t) {
                return Math.floor(Math.random() * (t - e + 1)) + e
            },
            u = function(e) {
                var t = document.createElement("style");
                t.appendChild(document.createTextNode(e)), document.head.appendChild(t)
            },
            c = "TYPE_CHARACTER",
            l = "REMOVE_CHARACTER",
            p = "REMOVE_ALL",
            d = "REMOVE_LAST_VISIBLE_NODE",
            f = "PAUSE_FOR",
            v = "CALL_FUNCTION",
            h = "ADD_HTML_TAG_ELEMENT",
            m = "CHANGE_DELETE_SPEED",
            y = "CHANGE_DELAY",
            g = "CHANGE_CURSOR",
            w = "PASTE_STRING",
            E = "HTML_TAG",
            T = "TEXT_NODE";

        function b(e, t) {
            var n = Object.keys(e);
            if (Object.getOwnPropertySymbols) {
                var r = Object.getOwnPropertySymbols(e);
                t && (r = r.filter((function(t) {
                    return Object.getOwnPropertyDescriptor(e, t).enumerable
                }))), n.push.apply(n, r)
            }
            return n
        }

        function A(e) {
            for (var t = 1; t < arguments.length; t++) {
                var n = null != arguments[t] ? arguments[t] : {};
                t % 2 ? b(Object(n), !0).forEach((function(t) {
                    O(e, t, n[t])
                })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(n)) : b(Object(n)).forEach((function(t) {
                    Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(n, t))
                }))
            }
            return e
        }

        function S(e) {
            return function(e) {
                if (Array.isArray(e)) {
                    for (var t = 0, n = new Array(e.length); t < e.length; t++) n[t] = e[t];
                    return n
                }
            }(e) || function(e) {
                if (Symbol.iterator in Object(e) || "[object Arguments]" === Object.prototype.toString.call(e)) return Array.from(e)
            }(e) || function() {
                throw new TypeError("Invalid attempt to spread non-iterable instance")
            }()
        }

        function _(e, t) {
            for (var n = 0; n < t.length; n++) {
                var r = t[n];
                r.enumerable = r.enumerable || !1, r.configurable = !0, "value" in r && (r.writable = !0), Object.defineProperty(e, r.key, r)
            }
        }

        function O(e, t, n) {
            return t in e ? Object.defineProperty(e, t, {
                value: n,
                enumerable: !0,
                configurable: !0,
                writable: !0
            }) : e[t] = n, e
        }
        var C = function() {
            function e(t, n) {
                var u = this;
                if (function(e, t) {
                        if (!(e instanceof t)) throw new TypeError("Cannot call a class as a function")
                    }(this, e), O(this, "state", {
                        cursorAnimation: null,
                        lastFrameTime: null,
                        pauseUntil: null,
                        eventQueue: [],
                        eventLoop: null,
                        eventLoopPaused: !1,
                        reverseCalledEvents: [],
                        calledEvents: [],
                        visibleNodes: [],
                        initialOptions: null,
                        elements: {
                            container: null,
                            wrapper: document.createElement("span"),
                            cursor: document.createElement("span")
                        }
                    }), O(this, "options", {
                        strings: null,
                        cursor: "|",
                        delay: "natural",
                        deleteSpeed: "natural",
                        loop: !1,
                        autoStart: !1,
                        devMode: !1,
                        skipAddStyles: !1,
                        wrapperClassName: "Typewriter__wrapper",
                        cursorClassName: "Typewriter__cursor",
                        stringSplitter: null
                    }), O(this, "setupWrapperElement", (function() {
                        u.state.elements.wrapper.className = u.options.wrapperClassName, u.state.elements.cursor.className = u.options.cursorClassName, u.state.elements.cursor.innerHTML = u.options.cursor, u.state.elements.container.innerHTML = "", u.state.elements.container.appendChild(u.state.elements.wrapper), u.state.elements.container.appendChild(u.state.elements.cursor)
                    })), O(this, "start", (function() {
                        return u.state.eventLoopPaused = !1, u.runEventLoop(), u
                    })), O(this, "pause", (function() {
                        return u.state.eventLoopPaused = !0, u
                    })), O(this, "stop", (function() {
                        return u.state.eventLoop && (Object(r.cancel)(u.state.eventLoop), u.state.eventLoop = null), u
                    })), O(this, "pauseFor", (function(e) {
                        return u.addEventToQueue(f, {
                            ms: e
                        }), u
                    })), O(this, "typeOutAllStrings", (function() {
                        return "string" == typeof u.options.strings ? (u.typeString(u.options.strings).pauseFor(1500), u) : (u.options.strings.forEach((function(e) {
                            u.typeString(e).pauseFor(1500).deleteAll()
                        })), u)
                    })), O(this, "typeString", (function(e) {
                        var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
                        if (i(e)) return u.typeOutHTMLString(e, t);
                        if (e) {
                            var n = u.options || {},
                                r = n.stringSplitter,
                                o = "function" == typeof r ? r(e) : e.split("");
                            u.typeCharacters(o, t)
                        }
                        return u
                    })), O(this, "pasteString", (function(e) {
                        var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
                        return i(e) ? u.typeOutHTMLString(e, t, !0) : (e && u.addEventToQueue(w, {
                            character: e,
                            node: t
                        }), u)
                    })), O(this, "typeOutHTMLString", (function(e) {
                        var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null,
                            n = arguments.length > 2 ? arguments[2] : void 0,
                            r = a(e);
                        if (r.length > 0)
                            for (var o = 0; o < r.length; o++) {
                                var i = r[o],
                                    s = i.innerHTML;
                                i && 3 !== i.nodeType ? (i.innerHTML = "", u.addEventToQueue(h, {
                                    node: i,
                                    parentNode: t
                                }), n ? u.pasteString(s, i) : u.typeString(s, i)) : i.textContent && (n ? u.pasteString(i.textContent, t) : u.typeString(i.textContent, t))
                            }
                        return u
                    })), O(this, "deleteAll", (function() {
                        var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "natural";
                        return u.addEventToQueue(p, {
                            speed: e
                        }), u
                    })), O(this, "changeDeleteSpeed", (function(e) {
                        if (!e) throw new Error("Must provide new delete speed");
                        return u.addEventToQueue(m, {
                            speed: e
                        }), u
                    })), O(this, "changeDelay", (function(e) {
                        if (!e) throw new Error("Must provide new delay");
                        return u.addEventToQueue(y, {
                            delay: e
                        }), u
                    })), O(this, "changeCursor", (function(e) {
                        if (!e) throw new Error("Must provide new cursor");
                        return u.addEventToQueue(g, {
                            cursor: e
                        }), u
                    })), O(this, "deleteChars", (function(e) {
                        if (!e) throw new Error("Must provide amount of characters to delete");
                        for (var t = 0; t < e; t++) u.addEventToQueue(l);
                        return u
                    })), O(this, "callFunction", (function(e, t) {
                        if (!e || "function" != typeof e) throw new Error("Callbak must be a function");
                        return u.addEventToQueue(v, {
                            cb: e,
                            thisArg: t
                        }), u
                    })), O(this, "typeCharacters", (function(e) {
                        var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : null;
                        if (!e || !Array.isArray(e)) throw new Error("Characters must be an array");
                        return e.forEach((function(e) {
                            u.addEventToQueue(c, {
                                character: e,
                                node: t
                            })
                        })), u
                    })), O(this, "removeCharacters", (function(e) {
                        if (!e || !Array.isArray(e)) throw new Error("Characters must be an array");
                        return e.forEach((function() {
                            u.addEventToQueue(l)
                        })), u
                    })), O(this, "addEventToQueue", (function(e, t) {
                        var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2];
                        return u.addEventToStateProperty(e, t, n, "eventQueue")
                    })), O(this, "addReverseCalledEvent", (function(e, t) {
                        var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
                            r = u.options.loop;
                        return r ? u.addEventToStateProperty(e, t, n, "reverseCalledEvents") : u
                    })), O(this, "addEventToStateProperty", (function(e, t) {
                        var n = arguments.length > 2 && void 0 !== arguments[2] && arguments[2],
                            r = arguments.length > 3 ? arguments[3] : void 0,
                            o = {
                                eventName: e,
                                eventArgs: t || {}
                            };
                        return u.state[r] = n ? [o].concat(S(u.state[r])) : [].concat(S(u.state[r]), [o]), u
                    })), O(this, "runEventLoop", (function() {
                        u.state.lastFrameTime || (u.state.lastFrameTime = Date.now());
                        var e = Date.now(),
                            t = e - u.state.lastFrameTime;
                        if (!u.state.eventQueue.length) {
                            if (!u.options.loop) return;
                            u.state.eventQueue = S(u.state.calledEvents), u.state.calledEvents = [], u.options = A({}, u.state.initialOptions)
                        }
                        if (u.state.eventLoop = o()(u.runEventLoop), !u.state.eventLoopPaused) {
                            if (u.state.pauseUntil) {
                                if (e < u.state.pauseUntil) return;
                                u.state.pauseUntil = null
                            }
                            var n = S(u.state.eventQueue),
                                r = n.shift(),
                                i = 0;
                            if (!(t <= (i = r.eventName === d || r.eventName === l ? "natural" === u.options.deleteSpeed ? s(40, 80) : u.options.deleteSpeed : "natural" === u.options.delay ? s(120, 160) : u.options.delay))) {
                                var a = r.eventName,
                                    b = r.eventArgs;
                                switch (u.logInDevMode({
                                    currentEvent: r,
                                    state: u.state,
                                    delay: i
                                }), a) {
                                    case w:
                                    case c:
                                        var _ = b.character,
                                            O = b.node,
                                            C = document.createTextNode(_);
                                        O ? O.appendChild(C) : u.state.elements.wrapper.appendChild(C), u.state.visibleNodes = [].concat(S(u.state.visibleNodes), [{
                                            type: T,
                                            node: C
                                        }]);
                                        break;
                                    case l:
                                        n.unshift({
                                            eventName: d,
                                            eventArgs: {
                                                removingCharacterNode: !0
                                            }
                                        });
                                        break;
                                    case f:
                                        var N = r.eventArgs.ms;
                                        u.state.pauseUntil = Date.now() + parseInt(N);
                                        break;
                                    case v:
                                        var L = r.eventArgs,
                                            M = L.cb,
                                            D = L.thisArg;
                                        M.call(D, {
                                            elements: u.state.elements
                                        });
                                        break;
                                    case h:
                                        var j = r.eventArgs,
                                            P = j.node,
                                            x = j.parentNode;
                                        x ? x.appendChild(P) : u.state.elements.wrapper.appendChild(P), u.state.visibleNodes = [].concat(S(u.state.visibleNodes), [{
                                            type: E,
                                            node: P,
                                            parentNode: x || u.state.elements.wrapper
                                        }]);
                                        break;
                                    case p:
                                        var k = u.state.visibleNodes,
                                            Q = b.speed,
                                            R = [];
                                        Q && R.push({
                                            eventName: m,
                                            eventArgs: {
                                                speed: Q,
                                                temp: !0
                                            }
                                        });
                                        for (var H = 0, F = k.length; H < F; H++) R.push({
                                            eventName: d,
                                            eventArgs: {
                                                removingCharacterNode: !1
                                            }
                                        });
                                        Q && R.push({
                                            eventName: m,
                                            eventArgs: {
                                                speed: u.options.deleteSpeed,
                                                temp: !0
                                            }
                                        }), n.unshift.apply(n, R);
                                        break;
                                    case d:
                                        var I = r.eventArgs.removingCharacterNode;
                                        if (u.state.visibleNodes.length) {
                                            var U = u.state.visibleNodes.pop(),
                                                q = U.type,
                                                G = U.node;
                                            G.parentNode.removeChild(G), q === E && I && n.unshift({
                                                eventName: d,
                                                eventArgs: {}
                                            })
                                        }
                                        break;
                                    case m:
                                        u.options.deleteSpeed = r.eventArgs.speed;
                                        break;
                                    case y:
                                        u.options.delay = r.eventArgs.delay;
                                        break;
                                    case g:
                                        u.options.cursor = r.eventArgs.cursor, u.state.elements.cursor.innerHTML = r.eventArgs.cursor
                                }
                                u.options.loop && (r.eventName === d || r.eventArgs && r.eventArgs.temp || (u.state.calledEvents = [].concat(S(u.state.calledEvents), [r]))), u.state.eventQueue = n, u.state.lastFrameTime = e
                            }
                        }
                    })), !t) throw new Error("No container element was provided");
                if ("string" == typeof t) {
                    var b = document.querySelector(t);
                    if (!b) throw new Error("Could not find container element");
                    this.state.elements.container = b
                } else this.state.elements.container = t;
                n && (this.options = A({}, this.options, {}, n)), this.state.initialOptions = A({}, this.options), this.init()
            }
            var t, n, b;
            return t = e, (n = [{
                key: "init",
                value: function() {
                    this.setupWrapperElement(), this.addEventToQueue(g, {
                        cursor: this.options.cursor
                    }, !0), this.addEventToQueue(p, null, !0), !window || window.___TYPEWRITER_JS_STYLES_ADDED___ || this.options.skipAddStyles || (u(".Typewriter__cursor{-webkit-animation:Typewriter-cursor 1s infinite;animation:Typewriter-cursor 1s infinite;margin-left:1px}@-webkit-keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}@keyframes Typewriter-cursor{0%{opacity:0}50%{opacity:1}100%{opacity:0}}"), window.___TYPEWRITER_JS_STYLES_ADDED___ = !0), !0 === this.options.autoStart && this.options.strings && this.typeOutAllStrings().start()
                }
            }, {
                key: "logInDevMode",
                value: function(e) {
                    this.options.devMode && console.log(e)
                }
            }]) && _(t.prototype, n), b && _(t, b), e
        }()
    }, function(e, t) {
        var n;
        n = function() {
            return this
        }();
        try {
            n = n || new Function("return this")()
        } catch (e) {
            "object" == typeof window && (n = window)
        }
        e.exports = n
    }, , , , , , , function(e, t, n) {
        (function(t) {
            (function() {
                var n, r, o, i, a, s;
                "undefined" != typeof performance && null !== performance && performance.now ? e.exports = function() {
                    return performance.now()
                } : null != t && t.hrtime ? (e.exports = function() {
                    return (n() - a) / 1e6
                }, r = t.hrtime, i = (n = function() {
                    var e;
                    return 1e9 * (e = r())[0] + e[1]
                })(), s = 1e9 * t.uptime(), a = i - s) : Date.now ? (e.exports = function() {
                    return Date.now() - o
                }, o = Date.now()) : (e.exports = function() {
                    return (new Date).getTime() - o
                }, o = (new Date).getTime())
            }).call(this)
        }).call(this, n(12))
    }, function(e, t) {
        var n, r, o = e.exports = {};

        function i() {
            throw new Error("setTimeout has not been defined")
        }

        function a() {
            throw new Error("clearTimeout has not been defined")
        }

        function s(e) {
            if (n === setTimeout) return setTimeout(e, 0);
            if ((n === i || !n) && setTimeout) return n = setTimeout, setTimeout(e, 0);
            try {
                return n(e, 0)
            } catch (t) {
                try {
                    return n.call(null, e, 0)
                } catch (t) {
                    return n.call(this, e, 0)
                }
            }
        }! function() {
            try {
                n = "function" == typeof setTimeout ? setTimeout : i
            } catch (e) {
                n = i
            }
            try {
                r = "function" == typeof clearTimeout ? clearTimeout : a
            } catch (e) {
                r = a
            }
        }();
        var u, c = [],
            l = !1,
            p = -1;

        function d() {
            l && u && (l = !1, u.length ? c = u.concat(c) : p = -1, c.length && f())
        }

        function f() {
            if (!l) {
                var e = s(d);
                l = !0;
                for (var t = c.length; t;) {
                    for (u = c, c = []; ++p < t;) u && u[p].run();
                    p = -1, t = c.length
                }
                u = null, l = !1,
                    function(e) {
                        if (r === clearTimeout) return clearTimeout(e);
                        if ((r === a || !r) && clearTimeout) return r = clearTimeout, clearTimeout(e);
                        try {
                            r(e)
                        } catch (t) {
                            try {
                                return r.call(null, e)
                            } catch (t) {
                                return r.call(this, e)
                            }
                        }
                    }(e)
            }
        }

        function v(e, t) {
            this.fun = e, this.array = t
        }

        function h() {}
        o.nextTick = function(e) {
            var t = new Array(arguments.length - 1);
            if (arguments.length > 1)
                for (var n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
            c.push(new v(e, t)), 1 !== c.length || l || s(f)
        }, v.prototype.run = function() {
            this.fun.apply(null, this.array)
        }, o.title = "browser", o.browser = !0, o.env = {}, o.argv = [], o.version = "", o.versions = {}, o.on = h, o.addListener = h, o.once = h, o.off = h, o.removeListener = h, o.removeAllListeners = h, o.emit = h, o.prependListener = h, o.prependOnceListener = h, o.listeners = function(e) {
            return []
        }, o.binding = function(e) {
            throw new Error("process.binding is not supported")
        }, o.cwd = function() {
            return "/"
        }, o.chdir = function(e) {
            throw new Error("process.chdir is not supported")
        }, o.umask = function() {
            return 0
        }
    }]).default
}));
  </script>
  <script>
    const instance = new Typewriter('#typewriter', {
      strings: ['Hello', 'World'],
      autoStart: true,
    });
  </script>


  <div id="typewriter1"></div>
  <script>
    const typewriter = new Typewriter('#typewriter1');

    typewriter.typeString('Hello World!')
      .callFunction(() => {
        console.log('String typed out!');
      })
      .pauseFor(2500)
      .deleteAll()
      .callFunction(() => {
        console.log('All strings were deleted');
      })
      .start();
  </script>
  <div id="typewriter3"></div>
  <script>
    const typewriter1 = new Typewriter('#typewriter3', {
      loop: true,
    });

    typewriter1.typeString('Hello World!')
      .pauseFor(2500)
      .deleteAll()
      .typeString('Strings can be removed')
      .pauseFor(2500)
      .deleteChars(7)
      .typeString('<strong>altered!<strong>')
      .pauseFor(2500)
      .start();
  </script>
  
  <div id="typewriter4"></div>
  <script>
    const typewriter2 = new Typewriter('#typewriter4', {
      loop: true,
    });

    typewriter2.typeString('Hello World!')
        .pauseFor(2500)
        .deleteAll()
        .pauseFor(500)
        .changeCursor('$')
        .typeString('This is a new cursor')
        .pauseFor(2500)
        .start();
  </script>

  <div id="typewriter5"></div>
  <script>
    const typewriter3 = new Typewriter('#typewriter5', {
      loop: true
    });

    typewriter3.typeString('<strong>Human: </strong>')
      .typeString('Hello how are you?')
      .pauseFor(2500)
      .typeString('<br/>')
      .typeString('<strong>Bot: </strong>')
      .typeString('I am fine thanks, how are you?')
      .pauseFor(2500)
      .typeString('<br/>')
      .typeString('<strong>Human: </strong> ')
      .typeString('I am great!')
      .pauseFor(2500)
      .start();
  </script>
  
  <div id="typewriter6"></div>
  <script>
    const instance4 = new Typewriter('#typewriter6', {
      loop: true,
    });

    instance4.typeString('Hello world!')
      .pauseFor(1000)
      .deleteAll(15)
      .typeString('Another message here...')
      .pauseFor(1000)
      .start();
  </script>


  <div id="typewriter7"></div>
  <script>
    const instance8 = new Typewriter('#typewriter7', {
      strings: ['Hello', 'World'],
      autoStart: true,
      loop: true,
    });
  </script>


  <div id="typewriter8"></div>
  <script>
    const instance9 = new Typewriter('#typewriter8', {
      strings: ['<span class="wrapper"><span class="span-1">Hello</span>, <span class="span-2">How</span> <span class="span-3">are</span> <span class="span-4">you</span>?</span>', '<span class="wrapper"><strong>Test</strong></span>'],
      autoStart: true,
      loop: true,
    });
  </script>


  <div id="typewriter9"></div>
  <script>
    const instancea = new Typewriter('#typewriter9', {
      strings: ['Hello', '<strong>World</strong>'],
      autoStart: true,
      loop: true,
    });
  </script>










</body>
</html>