JSFiddle - React, Tailwind, and code Playground

by phil_mcc

HTML

<body>
    <div id="container">
        <img id="circle" src="http://upload.wikimedia.org/wikipedia/commons/6/63/GenderCircle.png"
        />
         <img id="circle2" src="http://upload.wikimedia.org/wikipedia/commons/6/63/GenderCircle.png"
        />
    </div>
</body>

CSS

#circle {
    width: 20px;
    height: 20px;
    margin: 5px auto;
    position: relative;
    opacity: 0.5;
}
#circle2 {
    width: 20px;
    height: 20px;
    margin: 5px auto;
    position: relative;
    opacity: 0.5;
}
#container {
    position: relative;
    width: 1px;
    height: 1px;
    top: 100px;
    left: 100px;
}
body {
    background-color: #aaa;
}

JavaScript

/**
* The pulsating plugin will make an element on the page pulsate.
* Sample usage: 
* $("#circle").pulsate({
		growInPercent: 100,
		durationGetBigger: 500,
		durationGetSmaller: 100,
	    frequency: 3,
	    pause: 3000
	});	
*/
(function($) { 
	var PulsatingElement = {
			init: function( options, elem ) {
				// Mix in the passed-in options with the default options
				this.options = $.extend( {}, this.options, options );

				//save references to element
				this.elem  = elem;
				this.$elem = $(elem);

				this.setupHeightWidth();
				this.animate();
				
				//return copy for chaining
				return this;
			},
			//set default options
			options: {
				growInPercent: 20,
				durationGetBigger: 500,
				durationGetSmaller: 100,
			    frequency: 3,
			    pause: 3000
			},			
			setupHeightWidth: function () {
				this.originalHeight = this.$elem.height();				
				this.increasedHeight = Math.round(this.originalHeight * (1 + this.options.growInPercent / 100));
				
				if (this.originalHeight % 2 > 0) { // odd
			        // make sure increased size is odd too
					this.increasedHeight = Math.floor(this.increasedHeight / 2) * 2 + 1;
			    } else {
			    	this.increasedHeight = Math.floor(this.increasedHeight / 2) * 2
			    }
				
				this.originalWidth = this.$elem.width();
				this.increasedWidth = Math.round(this.originalWidth * (1 + this.options.growInPercent / 100));
			    if (this.originalWidth % 2 > 0) { // odd
			    	this.increasedWidth = Math.floor(this.increasedWidth / 2) * 2 + 1;
			    } else {
			    	this.increasedWidth = Math.floor(this.increasedWidth / 2) * 2;
			    }
			    this.newLeft = -Math.round((this.increasedWidth - this.originalWidth) / 2);
			    this.newTop = -Math.round((this.increasedHeight - this.originalHeight) / 2);
			},
			animate: function () {
				for (var i = 0; i < this.options.frequency; i++) {
			        this.getBigger(this.options.durationBigger);
			        this.getSmaller(this.options.durationSmaller);
			   ...