Cursor.js


Light weight Javascript library for text writing effect.

Documentation


Include Javascript file through


    <script src="https://cdn.jsdelivr.net/gh/khushit-shah/Cursor.js@latest/cursor.v1.0.0.min.js" type="text/javascript"></script>
    

and then, Just use cursor-animate in your HTML tag to get beautiful Animation. e.g.

 <p cursor-animate>I Love <span style="color:red">GitHub</span></p>
    
Output

I Love GitHub.

Attributes


  • Cursor-Animate

    Usage:

    To Give Natural Typing Animation..


    Example

     <p cursor-animate>I Love <span style="color:red">GitHub</span></p>
                      

    Output

    I Love GitHub.

  • Cursor-after & cursor-before

    Usage:

    To Animate Other Element After the Animation of curent Element is over.And not to animate the element which contains cursor-before until the animation of previous element is over.


    Example

     <p cursor-animate cursor-after="#id1">I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
                        

    Output

    I Love GitHub.

    Cursor.js

  • Cursor-loop

    Usage:

    To animate the element over and over again..


    Example

     <p cursor-animate cursor-loop >I Love <span style="color:red">GitHub</span></p>
                        

    Output

    I Love GitHub.

  • cursor-loop-reverse

    Usage:

    Gives cool writing and erasing animation..


    Example

     <p cursor-animate cursor-loop-reverse >I Love <span style="color:red">GitHub</span></p>
    
                        

    Output

    I Love GitHub.

  • cursor-speed

    Usage:

    Defines the average speed of animation.. which varies a little bit to give real typing effect.


    Example

     <p cursor-animate cursor-speed="4" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
     <p cursor-animate cursor-speed="5" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
     <p cursor-animate cursor-speed="6" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
                        

    Output

    I Love GitHub.

    I Love GitHub.

    I Love GitHub.

  • cursor-speed-fixed

    Usage:

    Defines the fixed speed of animation.


    Example

     <p cursor-animate cursor-speed="7" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
     <p cursor-animate cursor-speed="8" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
     <p cursor-animate cursor-speed="9" >I Love <span style="color:red">GitHub</span></p>
     <p cursor-animate cursor-before id="id1">Cursor.js</p>
                        

    Output

    I Love GitHub.

    I Love GitHub.

    I Love GitHub.

  • cursor-replace-next

    Usage:

    To animate other text after one text is over.Just look at exmple


    Example

     <p cursor-animate cursor-replace-next="Cursor.js,made with love,by,Khushit Shah.">I Love <span style="color:red">GitHub</span></p>                    

    Output

    I Love GitHub.