打字文字效果

Html

Css




    
        demo1information
        demo2information
        demo3information
        demo4information
        demo5information
        demo6information
        demo7information
        demo8information

.wrap {
	max-width:600px;
	margin:150px auto;
}
.type-wrap {
	font-size:17px;
	margin:10px auto;
	padding:20px;
}
 /* code for animated blinking cursor */
        .typed-cursor{
            opacity: 1;
            font-weight: 100;
            -webkit-animation: blink 0.7s infinite;
            -moz-animation: blink 0.7s infinite;
            -ms-animation: blink 0.7s infinite;
            -o-animation: blink 0.7s infinite;
            animation: blink 0.7s infinite;
        }
        @-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
        }
        @-webkit-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-moz-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-ms-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        @-o-keyframes blink{
            0% { opacity:1; }
            50% { opacity:0; }
            100% { opacity:1; }
        }
        .typed-fade-out{
            opacity: 0;
            animation: 0;
            transition: opacity .25s;
        }

! function(window, document, $) {

"use strict";

var Typed = function(el, options) {
        var self = this;

// chosen element to manipulate text
        this.el = el;

// options
        this.options = {};
        Object.keys(defaults).forEach(function(key) {
            self.options[key] = defaults[key];
        });
        Object.keys(options).forEach(function(key) {
            self.options[key] = options[key];
        });

// attribute to type into
        this.isInput = this.el.tagName.toLowerCase() === 'input';
        this.attr = this.options.attr;

// show cursor
        this.showCursor = this.isInput ? false : this.options.showCursor;

// text content of element
        this.elContent = this.attr ? this.el.getAttribute(this.attr) : this.el.textContent;

// html or plain text
        this.contentType = this.options.contentType;

// typing speed
        this.typeSpeed = this.options.typeSpeed;

// add a delay before typing starts
        this.startDelay = this.options.startDelay;

// backspacing speed
        this.backSpeed = this.options.backSpeed;

// amount of time to wait before backspacing
        this.backDelay = this.options.backDelay;

// Fade out instead of backspace
        this.fadeOut = this.options.fadeOut;
        this.fadeOutClass = this.options.fadeOutClass;
        this.fadeOutDelay = this.options.fadeOutDelay;

// div containing strings
        if ($ && this.options.stringsElement instanceof $) {
            this.stringsElement = this.options.stringsElement[0]
        } else {
            this.stringsElement = this.options.stringsElement;
        }

// input strings of text
        this.strings = this.options.strings;

// character number position of current string
        this.strPos = 0;

// current array position
        this.arrayPos = 0;

// number to stop backspacing on.
        // default 0, can change depending on how many chars
        // you want to remove at the time
        this.stopNum = 0;

// Looping logic
        this.loop = this.options.loop;
        this.loopCount = this.options.loopCount;
        this.curLoop = 0;

// for stopping
        this.stop = false;

// custom cursor
        this.cursorChar = this.options.cursorChar;

// shuffle the strings
        this.shuffle = this.options.shuffle;
        // the order of strings
        this.sequence = [];

// All systems go!
        this.build();
    };

Typed.prototype = {

constructor: Typed,

init: function() {
            // begin the loop w/ first current string (global self.strings)
            // current string will be passed as an argument each time after this
            var self = this;
            self.timeout = setTimeout(function() {
                for (var i = 0; i < self.strings.length; ++i) self.sequence[i] = i;

// shuffle the array if true
                if (self.shuffle) self.sequence = self.shuffleArray(self.sequence);

var elContent;
                if (self.isInput) {
                    elContent = self.el.value;
                } else if (self.contentType === 'html') {
                    elContent = self.el.innerHTML;
                } else {
                    elContent = self.el.textContent;
                }
                // Start typing
                // Check if there is some text in the element, if yes start by backspacing the default message
                if (elContent.length == 0) {
                    self.typewrite(self.strings[self.sequence[self.arrayPos]], self.strPos);
                } else {
                    self.backspace(elContent, elContent.length);
                }
            }, self.startDelay);
        },

build: function() {
            var self = this;
            // Insert cursor
            if (this.showCursor === true) {
                this.cursor = document.createElement('span');
                this.cursor.className = 'typed-cursor';
                this.cursor.innerHTML = this.cursorChar;
                this.el.parentNode && this.el.parentNode.insertBefore(this.cursor, this.el.nextSibling);
            }
            if (this.stringsElement) {
                this.strings = [];
                this.stringsElement.style.display = 'none';
                var strings = Array.prototype.slice.apply(this.stringsElement.children);
                strings.forEach(function(stringElement) {
                    self.strings.push(stringElement.innerHTML);
                });
            }
            this.init();
        },

// pass current string state to each function, types 1 char per call
        typewrite: function(curString, curStrPos) {
            // exit when stopped
            if (this.stop === true) {
                return;
            }

if (this.fadeOut && this.el.classList.contains(this.fadeOutClass)) {
                this.el.classList.remove(this.fadeOutClass);
                this.cursor.classList.remove(this.fadeOutClass);
            }

// varying values for setTimeout during typing
            // can't be global since number changes each time loop is executed
            var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed;
            var self = this;

// ------------- optional ------------- //
            // backpaces a certain string faster
            // ------------------------------------ //
            // if (self.arrayPos == 1){
            //  self.backDelay = 50;
            // }
            // else{ self.backDelay = 500; }

// contain typing function in a timeout humanize'd delay
            self.timeout = setTimeout(function() {
                // check for an escape character before a pause value
                // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
                // single ^ are removed from string
                var charPause = 0;
                var substr = curString.substr(curStrPos);
                if (substr.charAt(0) === '^') {
                    var skip = 1; // skip atleast 1
                    if (/^\^\d+/.test(substr)) {
                        substr = /\d+/.exec(substr)[0];
                        skip += substr.length;
                        charPause = parseInt(substr);
                    }

// strip out the escape character and pause value so they're not printed
                    curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
                }

if (self.contentType === 'html') {
                    // skip over html tags while typing
                    var curChar = curString.substr(curStrPos).charAt(0);
                    if (curChar === '<' || curChar === '&') {
                        var tag = '';
                        var endTag = '';
                        if (curChar === '<') {
                            endTag = '>'
                        } else {
                            endTag = ';'
                        }
                        while (curString.substr(curStrPos + 1).charAt(0) !== endTag) {
                            tag += curString.substr(curStrPos).charAt(0);
                            curStrPos++;
                            if (curStrPos + 1 > curString.length) {
                                break;
                            }
                        }
                        curStrPos++;
                        tag += endTag;
                    }
                }

// timeout for any pause after a character
                self.timeout = setTimeout(function() {
                    if (curStrPos === curString.length) {
                        // fires callback function
                        self.options.onStringTyped(self.arrayPos);

// is this the final string
                        if (self.arrayPos === self.strings.length - 1) {
                            // animation that occurs on the last typed string
                            self.options.callback();

self.curLoop++;

// quit if we wont loop back
                            if (self.loop === false || self.curLoop === self.loopCount)
                                return;
                        }

self.timeout = setTimeout(function() {
                            self.backspace(curString, curStrPos);
                        }, self.backDelay);

} else {

/* call before functions if applicable */
                        if (curStrPos === 0) {
                            self.options.preStringTyped(self.arrayPos);
                        }

// start typing each new char into existing string
                        // curString: arg, self.el.html: original text inside element
                        var nextString = curString.substr(0, curStrPos + 1);
                        if (self.attr) {
                            self.el.setAttribute(self.attr, nextString);
                        } else {
                            if (self.isInput) {
                                self.el.value = nextString;
                            } else if (self.contentType === 'html') {
                                self.el.innerHTML = nextString;
                            } else {
                                self.el.textContent = nextString;
                            }
                        }

// add characters one by one
                        curStrPos++;
                        // loop the function
                        self.typewrite(curString, curStrPos);
                    }
                    // end of character pause
                }, charPause);

// humanized value for typing
            }, humanize);

backspace: function(curString, curStrPos) {
            var self = this;
            // exit when stopped
            if (this.stop === true) {
                return;
            }

if (this.fadeOut) {
                this.initFadeOut();
                return;
            }

// varying values for setTimeout during typing
            // can't be global since number changes each time loop is executed
            var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed;

self.timeout = setTimeout(function() {

// ----- this part is optional ----- //
                // check string array position
                // on the first string, only delete one word
                // the stopNum actually represents the amount of chars to
                // keep in the current string. In my case it's 14.
                // if (self.arrayPos == 1){
                //  self.stopNum = 14;
                // }
                //every other time, delete the whole typed string
                // else{
                //  self.stopNum = 0;
                // }

if (self.contentType === 'html') {
                    // skip over html tags while backspacing
                    if (curString.substr(curStrPos).charAt(0) === '>') {
                        var tag = '';
                        while (curString.substr(curStrPos - 1).charAt(0) !== '<') {
                            tag -= curString.substr(curStrPos).charAt(0);
                            curStrPos--;
                            if (curStrPos < 0) {
                                break;
                            }
                        }
                        curStrPos--;
                        tag += '<';
                    }
                }

// ----- continue important stuff ----- //
                // replace text with base text + typed characters
                var nextString = curString.substr(0, curStrPos);
                self.replaceText(nextString);

// if the number (id of character in current string) is
                // less than the stop number, keep going
                if (curStrPos > self.stopNum) {
                    // subtract characters one by one
                    curStrPos--;
                    // loop the function
                    self.backspace(curString, curStrPos);
                }
                // if the stop number has been reached, increase
                // array position to next string
                else if (curStrPos <= self.stopNum) {
                    self.arrayPos++;

if (self.arrayPos === self.strings.length) {
                        self.arrayPos = 0;

// Shuffle sequence again
                        if (self.shuffle) self.sequence = self.shuffleArray(self.sequence);

self.init();
                    } else
                        self.typewrite(self.strings[self.sequence[self.arrayPos]], curStrPos);
                }

// humanized value for typing
            }, humanize);

// Adds a CSS class to fade out current string
        initFadeOut: function() {
            self = this;
            this.el.className += ' ' + this.fadeOutClass;
            this.cursor.className += ' ' + this.fadeOutClass;
            return setTimeout(function() {
                self.arrayPos++;
                self.replaceText('');

// Resets current string if end of loop reached
                if (self.strings.length > self.arrayPos) {
                    self.typewrite(self.strings[self.sequence[self.arrayPos]], 0);
                } else {
                    self.typewrite(self.strings[0], 0);
                    self.arrayPos = 0;
                }
            }, self.fadeOutDelay);
        },

// Replaces current text in the HTML element
        replaceText: function(str) {
            if (this.attr) {
                this.el.setAttribute(this.attr, str);
            } else {
                if (this.isInput) {
                    this.el.value = str;
                } else if (this.contentType === 'html') {
                    this.el.innerHTML = str;
                } else {
                    this.el.textContent = str;
                }
            }
        },

// Shuffles the numbers in the given array.
        shuffleArray: function(array) {
            var tmp, current, top = array.length;
            if (top)
                while (--top) {
                    current = Math.floor(Math.random() * (top + 1));
                    tmp = array[current];
                    array[current] = array[top];
                    array[top] = tmp;
                }
            return array;
        },

// Start & Stop currently not working

// , stop: function() {
        //     var self = this;

//     self.stop = true;
        //     clearInterval(self.timeout);
        // }

// , start: function() {
        //     var self = this;
        //     if(self.stop === false)
        //        return;

//     this.stop = false;
        //     this.init();
        // }

// Reset and rebuild the element
        reset: function() {
            var self = this;
            clearInterval(self.timeout);
            var id = this.el.getAttribute('id');
            this.el.textContent = '';
            if (typeof this.cursor !== 'undefined' && typeof this.cursor.parentNode !== 'undefined') {
                this.cursor.parentNode.removeChild(this.cursor);
            }
            this.strPos = 0;
            this.arrayPos = 0;
            this.curLoop = 0;
            // Send the callback
            this.options.resetCallback();
        }

};

Typed.new = function(selector, option) {
        var elements = Array.prototype.slice.apply(document.querySelectorAll(selector));
        elements.forEach(function(element) {
            var instance = element._typed,
                options = typeof option == 'object' && option;
            if (instance) {
                instance.reset();
            }
            element._typed = instance = new Typed(element, options);
            if (typeof option == 'string') instance[option]();
        });
    };

if ($) {
        $.fn.typed = function(option) {
            return this.each(function() {
                var $this = $(this),
                    data = $this.data('typed'),
                    options = typeof option == 'object' && option;
                if (data) {
                    data.reset();
                }
                $this.data('typed', (data = new Typed(this, options)));
                if (typeof option == 'string') data[option]();
            });
        };
    }

window.Typed = Typed;

var defaults = {
        strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"],
        stringsElement: null,
        // typing speed
        typeSpeed: 0,
        // time before typing starts
        startDelay: 0,
        // backspacing speed
        backSpeed: 0,
        // shuffle the strings
        shuffle: false,
        // time before backspacing
        backDelay: 500,
        // Fade out instead of backspace
        fadeOut: false,
        fadeOutClass: 'typed-fade-out',
        fadeOutDelay: 500, // milliseconds
        // loop
        loop: false,
        // false = infinite
        loopCount: false,
        // show cursor
        showCursor: true,
        // character for cursor
        cursorChar: "|",
        // attribute to type (null == text)
        attr: null,
        // either html or text
        contentType: 'html',
        // call when done callback function
        callback: function() {},
        // starting callback function before each string
        preStringTyped: function() {},
        //callback for every typed string
        onStringTyped: function() {},
        // callback for reset
        resetCallback: function() {}
    };

}(window, document, window.jQuery);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.7.2

立即下载

打字文字效果



代码描述：采用 typed.js展示文字显示效果

采用 typed.js展示文字显示效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

哈哈镜

相关代码

打字文字效果

最新