├── LICENSE ├── README.md ├── Rakefile ├── bower.json ├── index.html ├── jquery.pulsate.js └── jquery.pulsate.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Kilian Valkhof 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jquery.pulsate 2 | ============== 3 | 4 | Adds a pulsating effect to elements. It started out as an experiment with 5 | outline-offset by [Kilian Valkhof](http://kilianvalkhof.com/). By animating it you can create 6 | a pulsating effect that's useful for focussing attention to a certain part of your webpage 7 | in a subtle way. 8 | 9 | See the [examples](http://kilianvalkhof.com/jquerypulsate/). 10 | 11 | ## Installation 12 | 13 | $ bower install jquery.pulsate 14 | 15 | ## Example 16 | ```js 17 | $(element).pulsate({ 18 | color: $(this).css("background-color"), // set the color of the pulse 19 | reach: 20, // how far the pulse goes in px 20 | speed: 1000, // how long one pulse takes in ms 21 | pause: 0, // how long the pause between pulses is in ms 22 | glow: true, // if the glow should be shown too 23 | repeat: true, // will repeat forever if true, if given a number will repeat for that many times 24 | onHover: false // if true only pulsate if user hovers over the element 25 | }); 26 | ``` 27 | 28 | ## License 29 | 30 | Dual licensed under the MIT and GPL licenses. 31 | 32 | -------------------------------------------------------------------------------- /Rakefile: -------------------------------------------------------------------------------- 1 | require 'rubygems' 2 | 3 | desc 'Packages Grafico' 4 | task :package => [:require_compiler] do 5 | sources = ['pulsate'] 6 | packaged = File.join(File.dirname(__FILE__), 'jquery.pulsate.min.js') 7 | unpackagedsize = 0 8 | 9 | file = File.join(File.dirname(__FILE__), "jquery.pulsate.js") 10 | unpackagedsize += File.size(file) 11 | contents = File.read(file) 12 | 13 | File.open(packaged, "w") do |f| 14 | f.write Closure::Compiler.new.compile(contents) 15 | end 16 | end 17 | 18 | task :require_compiler do 19 | begin 20 | require 'closure-compiler' 21 | rescue LoadError 22 | puts "Install closure-compiler:" 23 | puts "sudo gem install closure-compiler --source http://gemcutter.org" 24 | abort 25 | end 26 | end 27 | 28 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jquery.pulsate", 3 | "version": "1.0.0", 4 | "main": ["./jquery.pulsate.js"], 5 | "dependencies": { 6 | "jquery": ">=1.8.2" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery.pulsate.js 6 | 7 | 35 | 36 | 37 | 48 | 49 | 50 |

jQuery.pulsate();

51 |

jQuery.pulsate.js adds a pulsating effect to elements.
Useful for drawing the users attention.

52 |

About

53 |

jQuery.pulsate started out as an experiment with outline-offset by Kilian Valkhof. By animating it you can create a pulsating effect that's useful for focussing attention to a certain part of your webpage in a subtle way.

54 |

Usage

55 |

Simple example:

56 | 
$(element).pulsate();
57 | 58 |

Custom options (defaults are shown)

59 | 
$(element).pulsate({
60 |   color: $(this).css("background-color"), // set the color of the pulse
61 |   reach: 20,                              // how far the pulse goes in px
62 |   speed: 1000,                            // how long one pulse takes in ms
63 |   pause: 0,                               // how long the pause between pulses is in ms
64 |   glow: true,                             // if the glow should be shown too
65 |   repeat: true,                           // will repeat forever if true, if given a number will repeat for that many times
66 |   onHover: false                          // if true only pulsate if user hovers over the element
67 | });
68 |

Works in Chrome, Safari and Firefox. Prettiest in Firefox since it supports Outline-radius

69 | 70 |

Download

71 | 75 |

Requires, obviously, jQuery ♥

76 |

Git repo hosted at Github.com/Kilian/jQuery.pulsate. Contributions welcome!

77 | 78 | 79 |

Demos

80 | 81 |
$(".pulse2").pulsate({color:"#09f"})
82 |
$(".pulse3").pulsate({reach:100})
83 |
$(".pulse4").pulsate({speed:2500})
84 |
$(".pulse5").pulsate({pause:1000})
85 |
$(".pulse6").pulsate({onHover:true})
86 |

License

87 |

Dual licensed under the MIT and GPL licenses.

88 | 89 |

~ Kilian

90 | 91 | 92 | -------------------------------------------------------------------------------- /jquery.pulsate.js: -------------------------------------------------------------------------------- 1 | (function( $ ){ 2 | var methods = { 3 | init: function(options) { 4 | var settings = { 5 | color: $(this).css("background-color"), 6 | reach: 20, 7 | speed: 1000, 8 | pause: 0, 9 | glow: true, 10 | repeat: true, 11 | onHover: false 12 | }; 13 | $(this).css({ 14 | "-moz-outline-radius": $(this).css("border-top-left-radius"), 15 | "-webkit-outline-radius": $(this).css("border-top-left-radius"), 16 | "outline-radius": $(this).css("border-top-left-radius") 17 | }); 18 | 19 | if (options) { 20 | $.extend(settings, options); 21 | } 22 | settings.color = $("
").css("background-color"); 23 | if(settings.repeat !== true && !isNaN(settings.repeat) && settings.repeat > 0) { 24 | settings.repeat -=1; 25 | } 26 | 27 | return this.each(function() { 28 | if(settings.onHover) { 29 | $(this).bind("mouseover", function () {pulse(settings, this, 0);}) 30 | .bind("mouseout", function (){$(this).pulsate("destroy");}); 31 | } else { 32 | pulse(settings, this, 0); 33 | } 34 | }); 35 | }, 36 | destroy: function() { 37 | return this.each(function() { 38 | clearTimeout(this.timer); 39 | $(this).css("outline",0); 40 | }); 41 | } 42 | }; 43 | 44 | var pulse = function(options, el, count) { 45 | var reach = options.reach, 46 | count = count>reach ? 0 : count, 47 | opacity = (reach-count)/reach, 48 | colorarr = options.color.split(","), 49 | color = "rgba(" + colorarr[0].split("(")[1] + "," + colorarr[1] + "," + colorarr[2].split(")")[0] + "," + opacity + ")", 50 | cssObj = { 51 | "outline": "2px solid " + color 52 | }; 53 | if(options.glow) { 54 | cssObj["box-shadow"] = "0px 0px " + parseInt((count/1.5)) + "px " + color; 55 | } 56 | cssObj["outline-offset"] = count + "px"; 57 | 58 | $(el).css(cssObj); 59 | 60 | var innerfunc = function () { 61 | if(count>=reach && !options.repeat) { 62 | $(el).pulsate("destroy"); 63 | return false; 64 | } else if(count>=reach && options.repeat !== true && !isNaN(options.repeat) && options.repeat > 0) { 65 | options.repeat = options.repeat-1; 66 | } else if(options.pause && count>=reach) { 67 | pause(options, el, count+1); 68 | return false; 69 | } 70 | pulse(options, el, count+1); 71 | }; 72 | 73 | if(el.timer){ 74 | clearTimeout(el.timer); 75 | } 76 | el.timer = setTimeout(innerfunc, options.speed/reach); 77 | }; 78 | 79 | var pause = function (options, el, count) { 80 | innerfunc = function () { 81 | pulse(options, el, count); 82 | }; 83 | el.timer = setTimeout(innerfunc, options.pause); 84 | }; 85 | 86 | $.fn.pulsate = function( method ) { 87 | // Method calling logic 88 | if ( methods[method] ) { 89 | return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); 90 | } else if ( typeof method === 'object' || ! method ) { 91 | return methods.init.apply( this, arguments ); 92 | } else { 93 | $.error( 'Method ' + method + ' does not exist on jQuery.pulsate' ); 94 | } 95 | 96 | }; 97 | })( jQuery ); 98 | -------------------------------------------------------------------------------- /jquery.pulsate.min.js: -------------------------------------------------------------------------------- 1 | (function(c){var k={init:function(a){var b={color:c(this).css("background-color"),reach:20,speed:1E3,pause:0,glow:!0,repeat:!0,onHover:!1};c(this).css({"-moz-outline-radius":c(this).css("border-top-left-radius"),"-webkit-outline-radius":c(this).css("border-top-left-radius"),"outline-radius":c(this).css("border-top-left-radius")});a&&c.extend(b,a);b.color=c("
").css("background-color");!0!==b.repeat&&!isNaN(b.repeat)&&0e?0:d;var h=(e-d)/e,f=a.color.split(","),h="rgba("+f[0].split("(")[1]+","+f[1]+","+f[2].split(")")[0]+","+h+")",f={outline:"2px solid "+h};a.glow&&(f["box-shadow"]="0px 0px "+parseInt(d/1.5)+"px "+h);f["outline-offset"]=d+"px";c(b).css(f);b.timer&& 3 | clearTimeout(b.timer);b.timer=setTimeout(function(){if(d>=e&&!a.repeat)return c(b).pulsate("destroy"),!1;if(d>=e&&!0!==a.repeat&&!isNaN(a.repeat)&&0=e)return l(a,b,d+1),!1;g(a,b,d+1)},a.speed/e)},l=function(a,b,c){innerfunc=function(){g(a,b,c)};b.timer=setTimeout(innerfunc,a.pause)};c.fn.pulsate=function(a){if(k[a])return k[a].apply(this,Array.prototype.slice.call(arguments,1));if("object"!==typeof a&&a)c.error("Method "+a+" does not exist on jQuery.pulsate"); 4 | else return k.init.apply(this,arguments)}})(jQuery); 5 | --------------------------------------------------------------------------------