2 Demos of Creating animated text shadows by jQuery

The txtshadow plug-in

The txtshadow jQuery plug-in enables creating the animated and dynamic text shadows that move with the mouse pointer.

So, as the mouse is moved over or around the specified text the shadow will move accordingly. You may specify the blur and color of shadow in the options provided by the plug-in.

Demo1 Demo2
Developer’s page Download plug-in

The minified size of the JS file is only 1K.

Using the txtshadow plug-in

Download the plug-in from the above link and include the txtShadow.min.js file before the body closing tag:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>

<script src=”js/txtShadow/txtShadow.min.js”></script>

Create a text element like heading or paragraph etc. and style with CSS properties and refer its class in jQuery code to initiate the plug-in:

$(‘.shadow’).txtShadow();

See the demos below with options.

A demo of animated text shadow

See this example where the text shadow is created for paragraphs. Initially, a few CSS properties are used for the text and shadow is created with default options of the plug-in. Move the mouse over the text to see how interactive it is:

jQuery text shadow

See online demo and code

The markup:

                <h3>A demo of dynamic text-shadow</h3>

                <p class='shadow'>Move the mouse</p>

                <br><br>

                <p class="shadow">Around</p>

 

jQuery code:

$(function(){



                $('.shadow').txtShadow();

});

 

The CSS:

 

              <style>

                                body{

                                                text-align: center;

                                }

                                .shadow{

                                                position: relative;

                                                margin: 0;

                                                left: 50%;

            top: 70px;

                                                font-family:'Spirax';

                                    width: 333px;

                                    color: #004040;

                                    font-size: 75px;

                                    text-align: center;

                                    transition-duration: .7s;

                                }

                                .shadow:nth-of-type(2){ color: #f83;}                    

                </style>

 

A demo of using blur and color options

In this demo, the color and blur options are specified in the jQuery code section. The blur value is given in px while the color of the shadow is given a hexadecimal value.

jQuery text shadow blur

See online demo and code

The jQuery code:

       $('.shadow').txtShadow({

          blur: "5px",

          color: "#5E5EAE"

        });

 

Similarly, you may apply the text-shadow in any text element like h1, h2, paragraphs, span etc.