Make words pulsate jQuery

Question

http://codepen.io/anon/pen/ZGBEyo

I have a difficult task as you saw in the title of the question.

I'm doing a plugin that makes the words move in the screen, increase in size with a sharpen effect, and decrease in size with a blur effect, and the most difficult — one respect other if they have the same name, you may ask: what do you mean?

They have this totally random behavior to grow and stay focus, get smaller and become blurred, however I need make two words with the same name never become clear at same time.

My plugin works like this:

<span class="word" data-float="true" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>

If data-float is true, the word is authorised to use the plugin
data-range-x = the maximum x range that can move
data-range-y = the maximum y range that can move
data-top = the top initial position
data-left = the left initial position
data-size = the size of the word

So, is possible to make them respect each other, if they have the same name?

Working plugin it three love words:

+ function($) {

  var Float = function(element) {
    this.element = element;
    this.wrapper;
    this.settings = {
      rangeX : element.data('range-x') || 100,
      rangeY : element.data('range-y') || 100,
      speed  : element.data('speed')   || 5000,
      top    : element.data('top')     || 0,
      left   : element.data('left')    || 0,
      size   : element.data('size')    || 20
    };
  };

  Float.prototype.init = function() {
    this.setPosition();
    this.setSize();
    this.setWrapper();
    this.andWalk();

  };

  Float.prototype.setPosition = function() {
    this.element
      .css('top', this.settings.top)
      .css('left', this.settings.left); 
  };
  
  Float.prototype.setSize = function() {
    this.element.css('font-size', this.settings.size + 'px');
    if (this.settings.size <= 20) this.setShadow();      
  };
  
  Float.prototype.setShadow = function() {
    console.log('test');
    this.element.css('color', 'transparent');          
  };

  Float.prototype.setWrapper = function() {
    this.wrapper = $('<div/>').css({
      'width': this.element.outerWidth(true),
      'height': this.element.outerHeight(true),
      'z-index': this.element.css('zIndex')
    });

    this.wrapper.css({
      'position': this.element.css('position'),
      'top': this.element.position().top,
      'left': this.element.position().left,
      'float': this.element.css('position') === 'absolute' ? 'none' : 'left'
    });

    this.element.wrap(this.wrapper).css({
      'position': 'absolute',
      'top': 0,
      'left': 0
    });
  };

  Float.prototype.andWalk = function() {
    var self = this;
    var newX = Math.floor(Math.random() * this.settings.rangeX) - this.settings.rangeX / 2;
    var newY = Math.floor(Math.random() * this.settings.rangeY) - this.settings.rangeY / 2 - 0;
    var newS = Math.floor(Math.random() * this.settings.speed)  + this.settings.speed  / 2;
    var newF;
    
    if (this.settings.size > 40) { newF = Math.floor(Math.random() * (70 - 15 + 1) + 15); } 
    else if (this.settings.size <= 25) { newF = Math.floor(Math.random() * (25 - 15 + 1) + 15); } 
    else { newF = Math.floor(Math.random() * (40 - 15 + 1) + 15); }

    this.element.animate({
      'fontSize': newF,
      'color': newF >= 25 ? '#FFFFFF' : 'transparent',
      'top': newY,
      'left': newX
    }, newS, function() {
      self.andWalk();
    });
  };

  $(window).on('load', function() {
    $('[data-float]').each(function() {
      var element = $(this).data('float') || false;

      if (element) {
        var float = new Float($(this));
        float.init();
      }
    });
  });
}(jQuery);

body {
  background: black;
  color: white;
}
.word {
  position: absolute;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.9);
}

<span class="word" data-float="true" data-index="1" data-range-x="100" data-range-y="100" data-top="500" data-left="50" data-size="25">Love</span>
<span class="word" data-float="true" data-index="2" data-range-x="100" data-range-y="100" data-top="90" data-left="290" data-size="40">Love</span>
<span class="word" data-float="true" data-index="3" data-range-x="100" data-range-y="100" data-top="500" data-left="290" data-size="70">Love</span>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Answer 1

You may want to leverage the animate.css library as it uses CSS3 transitions to animate elements with pulse, flip, zoom, rotate, roll, fade and other effects. Then you could use jquery or pure javascript to call these effects.

Here is a jsfiddle I made to demonstrate how you can call the effects from this library with jQuery http://jsfiddle.net/ashk3l/qxfj8L2d/

Essentially your HTML could look something like this:

<h1 class="your-element">Hello!</h1>

And your jQuery call could look something like this:

$(document).ready(function () {
    $('.your-element').addClass('animated pulse');
});