typify.js/index.html at main · devsk18/typify.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>typify.js | Auto Typing Animation Library</title>
    <meta name="description" content="typify.js is a powerful and lightweight auto typing animation library that makes it easy to create dynamic text animations on your website. Enhance your user experience with typewriter-like effects.">
    <meta name="keywords" content="Typify.js, typify, typify.js, typify js, auto typing animation, typewriter effect, JavaScript library, text animation, typewriting, dynamic text effects">

    <link rel="apple-touch-icon" sizes="180x180" href="./assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="./assets/img/favicon/site.webmanifest">

    <link rel="stylesheet" href="./assets/css/style.css">
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-B62FZPV1Q8"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-B62FZPV1Q8');
    </script>

</head>

<body>
    <header>
        <nav>
            <div class="logo">
                <a href="/">
                    <img src="./assets/img/logo.png" alt="">
                </a>
            </div>
            <div class="nav-links">
                <a href="#docs">Docs</a>
                <a href="#examples">Examples</a>
                <a href="./dist/typify.min.js" download>Download</a>
            </div>
        </nav>
    </header>

    <section id="home">
        <div class="wrap">
            <div class="container">
                <div id="typify-text"></div>
            </div>
        </div>
    </section>

    <section id="docs">
        <div class="wrap">
            <h1 style="font-size: 2rem;">typify.js <span style="font-size: 1.2rem;"> - Auto Typing Animation Library</span></h1>
            <p>
              <strong>typify.js</strong> is a powerful and lightweight auto typing animation library that makes it easy to create dynamic text animations on your website. Enhance your user experience with typewriter-like effects.
            </p>

            <h2>Installation</h2>
            <h3>Using CDN</h3>
            <p>
              To use typify.js directly in the browser, include the following script tag in the <code>&lt;head&gt;</code> or
              <code>&lt;body&gt;</code> section of your HTML file:
            </p>
            <pre><code>&lt;script src="https://unpkg.com/typify.js@1.1.9/dist/typify.min.js"&gt;&lt;/script&gt;</code></pre>

            <!-- <h3>Using npm</h3>
            <p>
              To use typify.js as an ESModule, install it via npm:
            </p>
            <pre><code>npm install typify.js</code></pre> -->

            <h3>Download</h3>
            <p>
              To setup typify.js locally: <a href="./dist/typify.min.js" download>download</a>
            </p>

            <h2>Usage</h2>
            <p>
              To create a typewriter effect for an HTML element, call the <strong>Typify</strong> function with the required
              CSS selector and configuration options.
            </p>
  <pre><code>&lt;h1 id="typify-text"&gt;&lt;/h1&gt;</code></pre>
  <pre><code>const typingText = Typify('#typify-text', {
  text: ['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!'],
  delay: 100,
  loop: true,
  cursor: true,
  stringDelay: 1000
});</code></pre>

  <h2>Options</h2>
  <p>
    The <strong>Typify</strong> function accepts the following options as the second argument:
  </p>
  <ul>
    <li><strong>text</strong> (required): An array of strings to be typed and erased in sequence.</li>
    <li><strong>delay</strong> (optional): The delay in milliseconds between typing each character (default: 100ms).</li>
    <li><strong>loop</strong> (optional): Whether to loop through the 'text' array continuously or stop after one iteration (default: true).</li>
    <li><strong>cursor</strong> (optional): Whether to display the cursor (default: true).</li>
    <li><strong>stringDelay</strong> (optional): Time in milliseconds to pause before typing each string (default: 1000ms).</li>
  </ul>


          </div>
    </section>

    <section id="examples">
        <div class="wrap">
            <h2><u>Examples</u></h2>
  <h3>Using in browser</h3>
  <p>
    The following example demonstrates how to use typify.js in browser.
  </p>
  <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;title&gt;Typify Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;h1 id="typify-text"&gt;&lt;/h1&gt;
  &lt;script src="./typify.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    const typingText = Typify('#typify-text', {
      text: ['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!'],
      delay: 100,
      loop: true,
      cursor: true,
      stringDelay: 1000
    });
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>

  <!-- <h3>Using as a React Component</h3>
  <p>
    The following example demonstrates how to use typify.js as an React Component.
  </p>
  <pre><code>import React from 'react';
import Typify from 'typify.js';

function App() {
  return (
    &lt;div className="App"&gt;
      &lt;Typify
        text={['Hello!', 'Welcome to Typify Library!', 'Enjoy the typing effect!']}
        stringDelay={2000}
        loop={true}
        cursor={true}
      /&gt;
    &lt;/div&gt;
  );
}

export default App;</code></pre> -->
        </div>
    </section>

    <section id="licence">
      <div class="wrap">
          <h2><u>Licence</u></h2>
          <p><a href="https://github.com/devsk18/typify.js/blob/main/LICENSE">MIT</a></p>
      </div>
    </section>

    <section id="issues">
      <div class="wrap">
          <h2><u>Issues</u></h2>
          <p>Kindly report the issues <a href="https://github.com/devsk18/typify.js/issues">here</a>.</p>
      </div>
    </section>

    <!-- <section id="contribution">
      <div class="wrap">
          <h2><u>Contribution</u></h2>
          <p>Feel free to contribute to typify.js</p>
          <p>Things to consider while contributing :</p>
          <ul>
            <li>Create a new branch with</li>
          </ul>
      </div>
    </section> -->

    <section id="support">
      <div class="wrap">
          <h2><u>Support</u></h2>
          <a href="https://www.buymeacoffee.com/samkthampan" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-red.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
      </div>
    </section>


    <script src="./dist/typify.min.js"></script>
    <script>

        Typify('#typify-text', {
            text: ['Hello Folks!', 'Welcome to typify.js Library!', 'Enjoy the typing effect!'],
            delay: 100, // Time delay between each character (in milliseconds)
            stringDelay: 1000, // Time delay between each string (in milliseconds)
            loop: true, // Set to false if you don't want the text to loop
            cursor: true, // Set cursor option to true to show the cursor
        });


    </script>

</body>
</html>