NPM说明文本动画 - 关键词逐个替换呈现

Javascript Animation for What NPM Is. NPM是Nodejs的包（模块）管理器。参考源： https://www.npmjs.com

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1592
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

var aps = Array.prototype.slice;

var segue = function(cb, repeat) {

// both `repeat` and `cb` are optional
    if (typeof cb === 'boolean') {
        repeat = cb;
    }
    cb = cb || function() {}; // default to no op
    repeat = repeat === true || false; // default to `false`

var i = -1;
    var queue = [];
    var running = false;
    var nextArgs = [];

return enqueue;

};

var malarkey = function(elem, opts) {

// defaults
    opts.loop = opts.loop || false;
    opts.typeSpeed = opts.typeSpeed || 50;
    opts.deleteSpeed = opts.deleteSpeed || 50;
    opts.pauseDelay = opts.pauseDelay || 2000;
    opts.postfix = opts.postfix || '';

// cache `postfix` length
    var postfixLen = opts.postfix.length;

// initialise the function `queue`
    var queue = segue(opts.loop);

/**
     * Check if `obj` is an integer.
     *
     * @param {Object} obj
     * @return {Boolean}
     * @api private
     */
    var isInteger = function(obj) {
        return parseInt(obj, 10) === obj;
    };

/**
     * Check if `str` ends with `suffix`.
     *
     * @param {String} str
     * @param {String} suffix
     * @return {Boolean}
     * @api private
     */
    var endsWith = function(str, suffix) {
        return str.indexOf(suffix, str.length - suffix.length) !== -1;
    };

/**
     * Types the `str` at the given `speed`.
     *
     * @param {String} str
     * @param {Number} speed Time in milliseconds to type a single character
     * @api public
     */
    var type = function(str, speed) {
        var done = this;
        var len = str.length;
        if (len === 0) {
            return done();
        }
        var t = function(i) {
            setTimeout(function() {
                elem.innerHTML += str[i];
                i += 1;
                if (i < len) {
                    t(i);
                } else {
                    done();
                }
            }, speed);
        };
        t(0);
    };

/**
     * Deletes `str` or `n` number of characters at the given `speed`.
     *
     * @param {String|Number} arg If `null` or `-1`, deletes entire contents of `elem`.
     * Else if number, deletes `arg` number of characters from `elem`. Else deletes
     * `arg` from `elem` if and only if the last string that was typed ends with `arg`.
     * @param {Number} speed Time in milliseconds to type a single character
     * @api public
     */
    var _delete = function(arg, speed) {
        var done = this;
        var curr = elem.innerHTML;
        var count = curr.length; // default to deleting entire contents of `elem`
        var d;
        if (typeof arg !== 'undefined' && arg !== null) {
            if (isInteger(arg)) {
                if (arg > -1) {
                    count = arg > count ? count : arg;
                }
            } else { // assumes `arg` is String
                // delete `arg` from `elem` if the last string typed ends with `arg`
                if (endsWith(curr, arg + opts.postfix)) {
                    count = arg.length + postfixLen;
                } else {
                    count = 0;
                }
            }
        }
        if (count === 0) {
            return done();
        }
        d = function(count) {
            setTimeout(function() {
                var curr = elem.innerHTML;
                if (count) {
                    elem.innerHTML = curr.substring(0, curr.length - 1); // drop last char
                    d(count - 1);
                } else {
                    done();
                }
            }, speed);
        };
        d(count);
    };

/**
     * Clears the contents of `elem`.
     *
     * @api public
     */
    var clear = function() {
        elem.innerHTML = '';
        this();
    };

/**
     * Do nothing for `delay`.
     *
     * @param {Number} delay Time in milliseconds
     * @api public
     */
    var pause = function(delay) {
        var done = this;
        setTimeout(function() {
            done();
        }, delay);
    };

/**
     * Invokes the given `fn`, passing in `elem` as the first argument.
     *
     * @param {Function} fn
     * @api public
     */
    var call = function(fn) {
        var done = this;
        var cb = function() {
            done();
        };
        fn.call(cb, elem);
    };

// expose public API
    this.type = function(str, speed) {
        queue(type, str + opts.postfix, speed || opts.typeSpeed);
        return this;
    };
    this.delete = function(arg, speed) {
        queue(_delete, arg, speed || opts.deleteSpeed);
        return this;
    };
    this.clear = function() {
        queue(clear);
        return this;
    };
    this.pause = function(delay) {
        queue(pause, delay || opts.pauseDelay);
        return this;
    };
    this.call = function(fn) {
        queue(call, fn);
        return this;
    };
};

var what_npm_is_for = function() {
    var el = document.querySelector('#what-npm-is-for');
    if (!el) return;
    var initialText = el.textContent;
    var pause = 800
    var opts = {
        speed: 40,
        loop: false,
        postfix: ''
    };

var typist = new malarkey(el, opts)

typist
        .pause(1000).delete(initialText.length)
        .type('browsers').pause(pause).delete(8)
        .type('mobile').pause(pause).delete(6)
        .type('angular').pause(pause).delete(7)
        .type('bower').pause(pause).delete(5)
        .type('jquery').pause(pause).delete(6)
        .type('nodebots').pause(pause).delete(8)
        .type('gulp').pause(pause).delete(4)
        .type('browserify').pause(pause).delete(10)
        .type('grunt').pause(pause).delete(5)
        .type('tessel').pause(pause).delete(6)
        .type('io.js').pause(pause).delete(5)
        .type('javascript.').pause(1200)
        .call(function() {
            $(el).addClass("disabled")
        });
}

$(what_npm_is_for);

编译

CSS

HTML

Javascript Animation for What NPM Is. NPM是Nodejs的包（模块）管理器。参考源： https://www.npmjs.com

编辑器支持Emmet

快捷键

Javascript Animation for What NPM Is. NPM是Nodejs的包（模块）管理器。 参考源： https://www.npmjs.com

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

HTML5 Three.js 3D版本的黎明破晓动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Javascript Animation for What NPM Is. NPM是Nodejs的包（模块）管理器。参考源： https://www.npmjs.com