彩色文字跳动输出特效

原生函数

/**
* @ Param _this : JS对象
* @ Param freeze : 出现之后不再闪动消失的部分
* @ Param con : 一直保持闪动的正文
*/
function ContTransition(_this, freeze = '', con = '') {
      if (!(freeze && con)) return false;
      let content = [con].map(function (v) {
          return v + '';
        }),a = 2,g = 1,s = 5,d = 75,
        b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)',
        ],
        c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g,
        };
      (function auto() {
        let t = content[c.skillI];
        c.step
          ? c.step--
          : ((c.step = g),
            c.prefixP < freeze.length
              ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++)
              : 'forward' === c.direction
              ? c.skillP < t.length
                ? ((c.text += t[c.skillP]), c.skillP++)
                : c.delay
                ? c.delay--
                : ((c.direction = 'backward'), (c.delay = a))
              : c.skillP > 0
              ? ((c.text = c.text.slice(0, -1)), c.skillP--)
              : ((c.skillI = (c.skillI + 1) % content.length),
                (c.direction = 'forward'))),
          (_this.textContent = c.text),
          _this.appendChild(
            (function (iv) {
              for (
                var n = document.createDocumentFragment(), i = 0;
                iv > i;
                i++
              ) {
                var l = document.createElement('span');
                (l.textContent = String.fromCharCode(94 * Math.random() + 33)),
                  (l.style.color = b[Math.floor(Math.random() * b.length)]),
                  n.appendChild(l);
              }
              return n;
            })(
              c.prefixP < freeze.length
                ? Math.min(s, s + c.prefixP)
                : Math.min(s, t.length - c.skillP)
            )
          ),
          setTimeout(auto, d);
      })();
    }

JQ扩展方法

/**
* @ Param freeze : 出现之后不再闪动消失的部分
* @ Param con : 一直保持闪动的正文
*/
$.fn.ContTransition = function (freeze = '', con = '') {
  if (!(freeze && con)) return false;
  _this = this[0];
  let content = [con].map(function (v) {
      return v + '';
    }),a = 2,g = 1,s = 5,d = 75,
    b = ['rgb(110,64,170)','rgb(150,61,179)','rgb(191,60,175)','rgb(228,65,157)','rgb(254,75,131)','rgb(255,94,99)','rgb(255,120,71)','rgb(251,150,51)','rgb(226,183,47)','rgb(198,214,60)','rgb(175,240,91)','rgb(127,246,88)','rgb(82,246,103)','rgb(48,239,130)','rgb(29,223,163)','rgb(26,199,194)','rgb(35,171,216)','rgb(54,140,225)','rgb(76,110,219)','rgb(96,84,200)',
    ],
    c = {text: '',prefixP: -s,skillI: 0,skillP: 0,direction: 'forward',delay: a,step: g,
    };
  (function auto() {
    let t = content[c.skillI];
    c.step
      ? c.step--
      : ((c.step = g),
        c.prefixP < freeze.length
          ? (c.prefixP >= 0 && (c.text += freeze[c.prefixP]), c.prefixP++)
          : 'forward' === c.direction
          ? c.skillP < t.length
            ? ((c.text += t[c.skillP]), c.skillP++)
            : c.delay
            ? c.delay--
            : ((c.direction = 'backward'), (c.delay = a))
          : c.skillP > 0
          ? ((c.text = c.text.slice(0, -1)), c.skillP--)
          : ((c.skillI = (c.skillI + 1) % content.length),
            (c.direction = 'forward'))),
      (_this.textContent = c.text),
      _this.appendChild(
        (function (iv) {
          for (
            var n = document.createDocumentFragment(), i = 0;
            iv > i;
            i++
          ) {
            var l = document.createElement('span');
            (l.textContent = String.fromCharCode(94 * Math.random() + 33)),
              (l.style.color = b[Math.floor(Math.random() * b.length)]),
              n.appendChild(l);
          }
          return n;
        })(
          c.prefixP < freeze.length
            ? Math.min(s, s + c.prefixP)
            : Math.min(s, t.length - c.skillP)
        )
      ),
      setTimeout(auto, d);
  })();
};

• 原文链接 : https://iizny.com/1084/