javascript - 让文字脉动 jQuery

Question

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

正如您在问题标题中看到的那样，我有一项艰巨的任务。

我正在做一个插件，可以让文字在屏幕上移动，通过锐化效果增大尺寸，通过模糊效果减小尺寸，这是最困难的——如果它们有相同的名字，相互尊重，你可能会问:什么意思？

他们有这种完全随机的行为来增长和保持专注，变小和变得模糊，但是我需要让两个同名的词永远不会同时变得清晰。

我的插件是这样工作的:

<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

那么，如果他们有相同的名字，是否有可能让他们互相尊重？

Working plugin it 三个情话:

+ 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

您可能想利用 animate.css库，因为它使用 CSS3 过渡来为具有脉冲、翻转、缩放、旋转、滚动、淡入淡出和其他效果的元素设置动画。然后你可以使用 jquery 或纯 javascript 来调用这些效果。

这是我制作的一个 jsfiddle，用于演示如何使用 jQuery 从该库中调用效果 http://jsfiddle.net/ashk3l/qxfj8L2d/

基本上您的 HTML 看起来像这样:

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

你的 jQuery 调用看起来像这样:

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