Shining Effect on Text with CSS3 and jQuery – shineText

A lightweight jQuery plugin to create a shining effect on text with CSS3. The plugin offers to shine any text on different JavaScript events (i.e click, hover, touch, etc.) with custom speed timing. You can also set up a custom CSS style class for shining text.

How to Create Text Shining Effect

1. To get started with shineText, load the jQuery and plugin assets into HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>

<!-- Shine Text CSS -->
<link rel="stylesheet" href="css/jquery.shining.min.css">

<!-- Shine Text Js -->
<script src="js/jquery.shining.js"></script>

2. After that, set a unique id to text that you want to shine.

<h1 id="myText"> CSS 3 SHINING TEXT </h1>

3. Finally initialize the plugin (with click, mouseenter, mouseleave or your desired event).

$("#text").click(function() { 

   $(this).shineText();

});

Advance Configuration Options for Shining Effect on Text

The following are some advanced configuration options to create/customize “Shining Effect on Text”.

$(this).shineText({
   speed: 200,
});

$(this).shineText({
   shineClass: "custom-class",
});

$(this).shineText({
   complete: function(){
   
      //do something
   }
});

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.