Typing effect

Getting Started

Add this JS CDN link to add cursor typing effect to your website

Place the <link> tag in the <head> for CSS, and the <script> tag for JavaScript before the closing </body>.

<link rel="stylesheet" href="https://ankitjha2603.github.io/typingEffect/typing.css">
<script src="https://ankitjha2603.github.io/typingEffect/typing.js"></script>

Classes and attrbutes

Add .typing class for typing effect to your website. Add all text in attribute text in the element

<p class="typing" text="This is typing effect, Created by javascript"></p>

Speed

You can change speed of cursor by attribute char_per_sec,its defines the typing speed of cursor in character per second

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" char_per_sec="1"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" char_per_sec="2"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" char_per_sec="4"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" char_per_sec="8"></p>

Pause

pauseTime attribute defines how long the cursor pauses after completing each word

pauseTime take how many seconds does the cursor pause after completing each word

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" pauseTime="0.5"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" pauseTime="2"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" pauseTime="5"></p>

Custom cursor

Cursor color

cursorColor attribute defines the color of cursor

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorColor="green"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorColor="red"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorColor="#FFD700"></p>

Cursor width

cursorColor attribute defines the width of cursor

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorWidth="1px"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorWidth="1.5px"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorWidth="2px"></p>

Cursor Type

cursorType attribute defines the type of cursor.

Their are two type of cursor

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorType="normal" cursorColor="green"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorType="underscore" cursorColor="red"></p>

Underscore Cursor height

underscore_cursor_height attribute defines the height of underscore cursor

<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorType="underscore" underscore_cursor_height="2px"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorType="underscore" underscore_cursor_height="3px"></p>
<p class="typing" text="Python, Javascript, Php, laravel, Typescript, Node.js" cursorType="underscore" underscore_cursor_height="4px"></p>