jQuery Burn - Text Flame Like Effect Plugin
File Size: | 16.6 KB |
---|---|
Views Total: | 2393 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
jQuery Burn is a text effect plugin using text-shadow, animated by repeatedly changing their horizontal offsets, which allows you to add flame-like effect to text on your web page.
How to use it:
1. Include jQuery script and jquery.burn.js on the webpage.
<script src="jquery.min.js"></script> <script src="js/jquery.burn.js"></script>
2. The markup
<h1 class="burning">jQuerySciript.Net</h1>
3. The required CSS.
.burning{ color: white; /* A light text makes a nice bright flame source */ background: black; /* A dark background gives some contrast */ letter-spacing: 3em; /* Big text shows off the effect best */ font-weight: bold; }
3. The JavaScript to enable the effect.
$(document).ready(function() { $('.burning').burn(); });
4. The default settings of the effect.
$('.burning').burn({ a: .3, k: .05, w: 10, wind: 1, strength: 1, diffusion: 1, flames: [{ x: 0, hsla: [58, 96, 89, 1], y: 0, blur: .1 }, { x: 0, hsla: [51, 98, 76, 1], y: .02, blur: .15 }, { x: 0, hsla: [36, 100, 60, 1], y: .04, blur: .2 }, { x: 0, hsla: [28, 91, 49, 1], y: .08, blur: .25 }, { x: 0, hsla: [19, 94, 41, 1], y: .15, blur: .3 }, { x: 0, hsla: [15, 75, 34, 1], y: .2, blur: .4 }, { x: 0, hsla: [14, 66, 16, 1], y: .5, blur: .5 }] });
This awesome jQuery plugin is developed by Sinetheta. For more Advanced Usages, please check the demo page or visit the official website.
- Prev: None
- Next: WideText - Responsive Text Resize Plugin