jquery输入框键入文字动画特效

这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时，通过jquery代码来制作文字的动画效果，非常炫酷。

使用方法

在页面中引入style.css和jquery文件。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="path/to/jquery.min.js" type="text/javascript"></script>
                

HTML结构

该输入框键入文字动画特效的基本HTML结果如下：

<form>
  <div class="input_wrap">
    <input type="text" placeholder="Please type" />
    <div class="after"></div>
  </div>
</form>
                

JavaScript

下面是该文字动画的jquery插件代码。

(function($) {
  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  $.fn.animChars = function(options) {
    var params = $.extend(
      {
        duration: 1,
        upperLimit: 150,
        sizeInterval: [15, 80]
      },
      options
    );
    $(this).keypress(function(e) {
      console.log(this.selectionStart)
      var rand = getRandomInt(1, 9);
      var randP = Math.floor(Math.random() * 10);
      randP < 5 ? (randP = rand) : (randP = rand - rand * 2);

      var c = String.fromCharCode(e.which);
      $(this).parent().append("<span class='cl" + rand + "'>" + c + "</span>");

      $(this)
        .parent()
        .find("span.cl" + rand + "")
        .css({
          left: getRandomInt(0, 90) + "%",
          "font-size": getRandomInt(
            params.sizeInterval[0],
            params.sizeInterval[1]
          )
        })
        .fadeIn(100, function() {
          $(this)
            .css({
              "margin-bottom": getRandomInt(
                params.upperLimit - params.upperLimit / 2
                  ? params.upperLimit / 2
                  : 0,
                params.upperLimit
              ),
              "margin-left": randP * 10
            })
            .fadeOut(params.duration * 1000, function() {
              $(this).remove();
            });
        });
    });
  };
})(jQuery);
                

最后在页面DOM元素加载完毕之后，通过下面的代码来初始化该文字动画插件。

$(document).ready(function() {
  $("input").animChars({
    duration: 0.8,
    upperLimit: 200,
    sizeInterval: [15, 80]
  });
});