Shining Effect on Text with CSS3 and jQuery – shineText

A lightweight jQuery plugin to create 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 custom CSS style class for shining text.

Plugin Overview

Plugin: shineText
Author: Kostas Minaidis
Licence: MIT Licence
Published: April 30, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.10.2 or Latest version

File Type: zip archive (HTML, CSS & JavaScript)
Package Size: 5 KB

How to Use Text Shining Effect Plugin

1. To getting 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 advance configuration options to create / customize “Shining Effect on Text”.

speed

This option define the shine effect moving speed. Default: 50, Type: number

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

Define the CSS style class for the shining text. You can set your own CSS style with custom class through this option. Default: “shine”, Type: String

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

The callback function that will be execute after completion of shineText. Default: null, Type: function

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