Gradient Text Effect In jQuery - Gradient.Text.js
File Size: | 12.6 KB |
---|---|
Views Total: | 3262 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Gradient.Text.js lightweight jQuery text colorizer which lets you create gradient/rainbow text using CSS linear-gradient
function. Ideal for creating an online gradient text generator for generating compelling, impressive titles, text logos, etc.
See Also:
How to use it:
1. Load the latest version of jQuery JavaScript library in your html document.
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
2. Download and load the main JavaScript file jquery.gradient.text.js
after jQuery.
<script src="jquery.gradient.text.js"></script>
3. Add the CSS class 'gradient-text' to your text and specify two or more colors in the data-gradient-text-range
attribute as this:
<span class="gradient-text" data-gradient-text-range="FF0000, AA1100,FF7700,FF4400,FFDD00,FFBB11,00FF00,55AA00,0000FF,000055,8A2BE2,310062,C77DF3,4B0082"> Gradient Text </span>
4. Possible plugin options to customize the gradient text effec.
{ // uses HEX color hexMode: true, // range color range: null, // tilt range or angle positionOrAngle: "to bottom right", // percentage ranges percentages: false, percentagesArray: false };
5. You can also pass the options via HTML data
attributes as follows:
<span class="gradient-text" data-gradient-text-range="FF0000, AA1100,FF7700,FF4400,FFDD00,FFBB11,00FF00,55AA00,0000FF,000055,8A2BE2,310062,C77DF3,4B0082" data-gradient-text-position="to top right" data-gradient-text-deg="200deg" data-gradient-text-percentages=".3, .5"> Gradient Text </span>
This awesome jQuery plugin is developed by matgargano. For more Advanced Usages, please check the demo page or visit the official website.