javascript - 让文字脉动——变大变尖，变小变模糊，移动

Question

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

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

我正在做一个插件，可以让文字在屏幕上移动(为此我使用 jqfloat.js)，通过锐化效果增大尺寸，通过模糊效果减小尺寸。

我已经搜索了很多，但没有找到这样的东西，所以我正在构建一个。

如你所见in the CodePen ，我可以让它们移动并变得模糊，我现在很难做剩下的事情。

我应该如何处理这个任务？是否有我没有找到的插件可以帮助我解决这个问题？

在CodePen中...第1-145行之间是jqFloat插件，其余是我的代码。

/*
 * jqFloat.js - jQuery plugin
 * A Floating Effect with jQuery!
 *
 * Name:			jqFloat.js
 * Author:		Kenny Ooi - http://www.inwebson.com
 * Date:			December 6, 2012
 * Version:		1.1
 * Example:		http://www.inwebson.com/demo/jqfloat/
 *
 */

(function($) {

  //plugin methods
  var methods = {

    init: function(options) { //object initialize
      //console.log('init');
      return this.each(function() {
        //define element data
        $(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
        $(this).data('jDefined', true);

        //create wrapper
        var wrapper = $('<div/>').css({
          'width': $(this).outerWidth(true),
          'height': $(this).outerHeight(true),
          'z-index': $(this).css('zIndex')
        });

        //alert($(this).position().top);
        if ($(this).css('position') == 'absolute')
          wrapper.css({
            'position': 'absolute',
            'top': $(this).position().top,
            'left': $(this).position().left
          });
        else
          wrapper.css({
            'float': $(this).css('float'),
            'position': 'relative'
          });

        //check for margin auto solution
        if (($(this).css('marginLeft') == '0px' || $(this).css('marginLeft') == 'auto') && $(this).position().left > 0 && $(this).css('position') != 'absolute') {
          wrapper.css({
            'marginLeft': $(this).position().left
          });
        }


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

        //call play method
        //methods.play.apply($(this));
      });
    },
    update: function(options) {
      $(this).data('jSetting', $.extend({}, $.fn.jqFloat.defaults, options));
    },
    play: function() { //start floating
      if (!$(this).data('jFloating')) {
        //console.log('play');
        $(this).data('jFloating', true);
        //floating(this);
      }
      floating(this);
    },
    stop: function() { //stop floating
      //console.log('stop');
      this.data('jFloating', false);
    }
  }

  //private methods
  var floating = function(obj) {
    //generate random position
    var setting = $(obj).data('jSetting');
    var newX = Math.floor(Math.random() * setting.width) - setting.width / 2;
    var newY = Math.floor(Math.random() * setting.height) - setting.height / 2 - setting.minHeight;
    var spd = Math.floor(Math.random() * setting.speed) + setting.speed / 2;

    //inifnity loop XD	
    $(obj).stop().animate({
      'top': newY,
      'left': newX
    }, spd, function() {

      if ($(this).data('jFloating'))
        floating(this);
      else
        $(this).animate({
          'top': 0,
          'left': 0
        }, spd / 2);
    });
  }

  $.fn.jqFloat = function(method, options) {

    var element = $(this);

    if (methods[method]) {

      if (element.data('jDefined')) {
        //reset settings
        if (options && typeof options === 'object')
          methods.update.apply(this, Array.prototype.slice.call(arguments, 1));
      } else
        methods.init.apply(this, Array.prototype.slice.call(arguments, 1));

      methods[method].apply(this);

    } else if (typeof method === 'object' || !method) {
      if (element.data('jDefined')) {
        if (method)
          methods.update.apply(this, arguments);
      } else
        methods.init.apply(this, arguments);

      methods.play.apply(this);
    } else
      $.error('Method ' + method + ' does not exist!');

    return this;
  }

  $.fn.jqFloat.defaults = {
    width: 100,
    height: 100,
    speed: 1000,
    minHeight: 0
  }

})(jQuery);



+ function($) {
  'use strict';

  var Animate = function(element) {
    this.element = element;
    this.topPosition = element.data('position')[0];
    this.leftPosition = element.data('position')[1];
    this.fontSize = element.data('size') + 'px' || '20px';
    this.shadow = element.data('shadow') || false;

    this.setPosition();
    this.setSize();
    this.startFloat();
    this.startPulsete();
  };

  Animate.prototype.setSize = function() {

    this.element.css('fontSize', this.fontSize);
  };

  Animate.prototype.setPosition = function() {
    this.element.css('top', this.topPosition);
    this.element.css('left', this.leftPosition);
  };

  Animate.prototype.setBeyond = function() {
    this.element.css('z-index', '99999')
  };

  Animate.prototype.startFloat = function() {
    this.element.jqFloat({
      width: 50,
      height: 50,
      speed: 5000
    });
  };

  Animate.prototype.startPulsete = function() {
    this.element.css('color', 'transparent');
    this.element.css('textShadow', '0 0 5px rgba(255, 255, 255, 0.9)');
  };

  $(window).on('load', function() {
    $('[data-ride="animate"]').each(function() {
      var element = $(this);
      var animation = new Animate(element);
    });

  });

}(jQuery);

body {
  background: black;
}
ul {
  list-style: none;
}
li {
  position: absolute;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<ul>
  <li data-ride="animate" data-size="40" data-position="[50, 50]">ONE</li>
  <li data-ride="animate" data-size="25" data-position="[250, 580]">TWO</li>
  <li data-ride="animate" data-size="75" data-position="[150, 800]">Three</li>
  <li data-ride="animate" data-size="20" data-position="[50, 235]">Four</li>
</ul>

Answer 1

您已经让 float 部分正常工作了。所以这一切都归结为更改模糊或 textShadow 属性。首先，准备一个数组来保存不同的模糊半径值，例如

var blurRadiusA = ['0px','5px','10px','15px','20px' ];

然后，在您的私有(private) floating 函数的末尾，有

var randomIndex = Math.floor(Math.random()*blurRadiusA.length);
$(obj).css('textShadow', '0 0 '+blurRadiusA[randomIndex]+' rgba(255, 255, 255, 0.9)');

请注意，这将在每个 animate 间隔内随机更改“模糊度”。如果您希望在模糊之间平滑过渡，那就另当别论了。

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

更新

为了平稳过渡，应该采取稍微不同的方法。添加新的私有(private)方法

    var pulsating = function(obj, radius, direction, currentInterval) {
        //direction is simply to either increment/decrement
        radius += direction;
        if(radius == 20){
            direction = -1;
        }
        else if(radius == 0){
            direction = 1;
        }

        $(obj).css({
            'textShadow': '0 0 '+radius+'px rgba(255, 255, 255, 0.9)'
        });
        if(typeof currentInterval !== 'undefined'){
            clearInterval(currentInterval);
        }
        currentInterval = setInterval(function() {
            pulsating(obj, radius, direction, currentInterval);
        }, 250);
    }

这基本上以过渡(非随机)方式在每个时间间隔更新元素 textShadow。

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