SelfType.js 自动打字动画库功能演示

SelfType.js是一个类似Slack和谷歌那样的打字动效库。

JavaScript

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

class SelfType {
    constructor(options) {
        this.getDOMNodes();
        this.loadOptions(options);
        this.setWord();

return this.returnPublicMethods();
    }

addHighlight() {
        var def_opt = this.default_options();
        var opt = this.options;

this.oldValue = this.text.style.color || def_opt.highlightColor;
        this.oldValueBg = this.text.style.backgroundColor || def_opt.highlightBg;

if (opt.highlightHideCursor === true && this.cursor) {
            this.cursor.style.display = 'none';
        }

this.text.style.backgroundColor = opt.highlightColor;
        if (this.darkColor(opt.highlightColor)) {
            this.text.style.color = def_opt.lightColor;
        }
    }

addLetter() {
        if (this.timeout !== undefined && this.timeout !== '') return;

var self = this;
        var char = this.word.substr(0, 1);

this.setupTimeout();

if (char === '^') char = this.waitPattern(char);
        if ((!this.options.ignoreDiacriticalSigns) && (char === '.' || char === ',')) {
            this.parsePauseCharacter(char);
        }

this.dirtyHack();
        this.parseTimeout();

setTimeout(function() {
            self.text.innerHTML += char;
            self.word = self.word.substr(1);
            self.scrollToBottom();
            self.resetTimeout();
            if (!self.word) {
                self.setDelay();
            }
        }, this.timeout);
    }

adjustCount() {
        if (this.options.repeat === true) {
            this.count = 1;
            return;
        }

if (this.count === undefined) {
            this.count = 0;
        }

this.count++;
    }

canGenerateNewWord() {
        if (this.options.repeat === true) return true;
        return (this.count || 0) < this.options.words.length;
    }

darkColor(color) {
        if (color.indexOf('#') === -1) return false;

var rgb = parseInt(color.substring(1), 16); // Strip the hash sign from the colour.
        var r = (rgb >> 16) & 0xff;
        var g = (rgb >> 8) & 0xff;
        var b = (rgb >> 0) & 0xff;

var med = Math.floor((r + g + b) / 3);

if (med > 255 / 2) return true;

return false;
    }

default_options() {
        return {
            default_speed: 5,
            highlightBg: 'transparent',
            highlightColor: 'rgba(0, 0, 0, .7)',
            lightColor: 'rgba(255, 255, 255, .9)',
            max_speed: 10,
            min_speed: 1,
        };
    }

delayHasPassed() {
        if (!this.timestamp) return true;

var prop = 'pause';
        var route = (!this.text.innerHTML) ? 'pauseStart' : 'pauseEnd';

if (this.options[route] !== undefined) {
            prop = route;
        }

return this.timestamp + this.options[prop] < Date.now();
    }

dirtyHack() {
        this.text.innerHTML += '<br/>';
        this.text.innerHTML = this.text.innerHTML.substr(0, this.text.innerHTML.length - 4);
    }

emptyTextHTML() {
        this.text.innerHTML = '';
    }

errors() {
        return {
            cursor: 'The element for the cursor could not be found! If you do not want to add one, you can ignore this message. Otherwise, make sure you included in your HTML a tag with the id attribute \'st-cursor\'.',
            text: 'The element where SelfType should be initialised could not be found! Are you sure you provided a HTML tag with the id attribute \'st-text\'?',
            words: ['Incorrect parameter set for words.'],
        }
    }

finishResetText() {
        this.emptyTextHTML();
        this.removeHighlight();
        this.setDelay(-(this.options.pause / 4));
        this.resetting_text = false;
    }

getAttrsDOMNode() {
        if (!this.text) return;

var options = {};

var attrs = this.text.attributes;
        for (var i = 0; i < attrs.length; i++) {
            if (attrs[i].nodeName.indexOf('data-') > -1) {
                var val = attrs[i].nodeValue;
                var parsed = parseInt(val);

options[attrs[i].nodeName.substr(5)] = (isNaN(parsed)) ? val : parsed;
            }
        }

var words = this.getDOMWords();
        if (words.length) options.words = words;

return options;
    }

getDOMNodes() {
        var cursor = document.getElementById('st-cursor');
        var text = document.getElementById('st-text');

if (text !== null) {
            this.text = text;
        } else {
            console.warn(this.errors().text);
        }

if (cursor !== null) {
            this.cursor = cursor;
        } else {
            console.warn(this.errors().cursor);
        }
    }

getDOMWords() {
        var result = [];
        var words = this.text.querySelectorAll('span');
        for (var i = 0; i < words.length; i++) {
            result.push(words[i].innerHTML);
            words[i].remove();
        }

this.emptyTextHTML();
        return result;
    }

getNextWord() {
        this.wordsIsValidArray({
            errprCheck: true
        });

if (this.pointerPosition === undefined) {
            this.resetPointer();
        }

var word = this.options.words[this.pointerPosition];
        this.movePointer(); // Move the pointer after we got the correct word.
        return word;
    }

getRandomWord() {
        this.wordsIsValidArray({
            errorCheck: true
        });

var random = Math.floor(Math.random() * this.options.words.length);
        var word = this.options.words[random];

if (this.pointerPosition === random && this.options.words.length > 1) {
            word = this.getRandomWord();
        } else {
            this.movePointer(random);
        }

return word;
    }

loadOptions(options) {
        this.options = this.options();
        this.parseConfigObject(options);
        if (this.options.searchDOM === true) {
            this.parseConfigObject(this.getAttrsDOMNode());
        }
    }

movePointer(position) {
        if (position !== undefined) {
            this.pointerPosition = position;
            return;
        }

if (this.pointerPosition < (this.options.words.length - 1)) {
            this.pointerPosition += 1;
        } else {
            this.resetPointer();
        }
    }

options() {
        return {
            appendPeriod: false,
            backspace: false,
            backspaceHighlight: true,
            highlightColor: '#289BCC',
            highlightHideCursor: true,
            ignoreDiacriticalSigns: false,
            keepWord: true,
            newLine: true,
            pause: 1000,
            repeat: false,
            randomize: false,
            searchDOM: true,
            speed: 5,
            words: ['awesome', 'amazing', 'the best language ever', 'pain', 'blood, sweat and tears', 'torture'],
        };
    };

parseConfigObject(options) {
        if (typeof options !== 'object') return;

for (var prop in options) {
            if (prop === 'speed') {
                options[prop] = this.parseSpeed(options[prop]);
            }

if (prop === 'words') {
                options[prop] = (this.wordsIsValidArray({
                    words: options[prop]
                })) ? options[prop] : this.options.words;
            }

this.options[prop] = options[prop];
        }
    }

parsePauseCharacter(char) {
        var log = Math.round(Math.log(this.options.speed + 1) * 10);
        var base = (char === '.') ? 6000 : 3200;
        this.next_pause = Math.round(base / (log - 6));
    }

parseSpeed(speed) {
        var opt = this.default_options();

if (typeof speed === 'string') {
            switch (speed) {
                case 'slow':
                    speed = 1;
                    break;

case 'fast':
                    speed = 7;
                    break;

case 'sonic':
                    speed = 10;
                    break;

case 'normal':
                default:
                    speed = opt.default_speed;
                    break;
            }
        } else if (typeof speed === 'number') {
            if (speed > opt.max_speed) {
                speed = opt.max_speed;
            }

if (speed < opt.min_speed) {
                speed = opt.min_speed;
            }
        } else {
            speed = opt.default_speed;
        }

return speed;
    }

parseTimeout() {
        this.timeout = parseInt(this.timeout);
        if (isNaN(this.timeout)) {
            this.timeout = 0;
        }
    }

pauseAnimation() {
        window.clearInterval(this.interval);
    }

playAnimation() {
        if (this.text === undefined || this.text === null) return;

var self = this;
        var opt = this.options;

if (this.interval) {
            this.pauseAnimation();
        }

self.interval = setInterval(function() {
            if (self.timestamp && !self.delayHasPassed()) return;

self.timestamp = undefined; // Removes the delay.

if (self.word) {
                self.addLetter();
            } else if (self.text.innerHTML && opt.keepWord === false) {
                opt.backspace === true ? self.removeLetter() : self.resetText(opt.backspaceHighlight);
            } else {
                self.setWord();
            }
        }, Math.round(250 / opt.speed));
    }

removeHighlight() {
        if (this.options.highlightHideCursor === true && this.cursor) {
            this.cursor.style.display = 'inline';
        }

this.text.style.backgroundColor = this.oldValueBg;
        this.text.style.color = this.oldValue;
    }

removeLetter() {
        var text = this.text.innerHTML;
        this.text.innerHTML = text.substr(0, text.length - 1);
        if (!this.text.innerHTML) {
            this.setDelay();
        }
    }

resetText(highlight) {
        if (this.resetting_text === true) {
            return;
        }

this.resetting_text = true;

var self = this;
        var opt = this.options;
        var timeout = 0;

if (highlight === true) {
            var pause = (opt.pauseEnd !== undefined) ? opt.pauseEnd : opt.pause;
            timeout = pause / 1.5;
            this.addHighlight();
        }

setTimeout(function() {
            self.finishResetText();
        }, timeout);
    }

resetPointer() {
        this.pointerPosition = 0;
    }

resetTimeout() {
        this.timeout = '';
    }

returnPublicMethods() {
        return {
            options: this.options,
            pause: this.pauseAnimation.bind(this),
            play: this.playAnimation.bind(this),
        };
    }

scrollToBottom() {
        this.text.parentNode.scrollTop = this.text.parentNode.scrollHeight;
    }

setDelay(len) {
        var offset = 0;

if (len !== undefined && !isNaN(len)) {
            offset = len;
        }

this.timestamp = Date.now() + offset;
    }

setWord() {
        var word = '';

if (this.canGenerateNewWord()) {
            word = (this.options.randomize === true) ? this.getRandomWord() : this.getNextWord();
        }

if (word !== '') {
            this.adjustCount();

if (this.options.appendPeriod === true) {
                word += '.';
            }

if (this.options.newLine === true && this.text.innerHTML) {
                this.text.innerHTML += '<br/>';
            }
        }

this.word = word;
        this.playAnimation();
    }

setupTimeout() {
        this.resetTimeout();

if (this.next_pause !== false && this.next_pause !== undefined) {
            this.timeout = this.next_pause;
            this.next_pause = false;
        }
    }

waitPattern(letter) {
        this.word = this.word.substr(1);

if (this.word.substr(0, 1) !== '^') {
            if (this.timeout === undefined || this.timeout !== '') {
                this.timeout = '';
            }

do {
                letter = this.word.substr(0, 1);
                this.timeout += letter;
                this.word = this.word.substr(1);
            } while (this.word.substr(0, 1).match(/[0-9]/));

return this.word.substr(0, 1);
        }

return letter;
    }

wordsIsValidArray(options) {
        var words = options.words || this.options.words;
        var is_valid = typeof words === 'object' && words !== null && words.length >= 1;

if (!is_valid && options.errorCheck === true) {
            this.options.words = this.errors().words;
        }

return is_valid;
    }
}

var selftype;

function toggleStyle(style, checked) {
    if (selftype === undefined) return;

var radios = ['default', 'noBack', 'noHigh'];
    var key;

if (radios.indexOf(style) > -1) {
        if (style === 'default') {
            selftype.options.backspace = true;
            return;
        }

selftype.options.backspace = false;

if (style === 'noBack') {
            selftype.options.backspaceHighlight = true;
        } else if (style === 'noHigh') {
            selftype.options.backspaceHighlight = false;
        }
    } else if (style !== 'play') {
        switch (style) {
            case 'keepWord':
                key = 'keepWord';
                break;
            case 'newLine':
                key = 'newLine';
                break;
            case 'random':
                key = 'randomize';
                break;
            case 'repeat':
                key = 'repeat';
                break;
        }

selftype.options[key] = checked;
    } else {
        checked ? selftype.play() : selftype.pause();
    }
}

window.onload = function() {
    addListeners();
    selftype = new SelfType();
}

window.onbeforeunload = function() {
    if (selftype !== undefined) {
        selftype.pause();
    }
};

编译

CSS

@charset "UTF-8";
html,
body {
    background-color: #efefef;
    font-family: 'San Francisco', 'Helvetica Neue', 'Open Sans';
    margin: 0;
    padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 16px 0;
    padding: 0;
}
.box {
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 800px;
    padding: 16px;
    position: relative;
}
.box .st-cursor {
    font-style: normal;
    font-weight: 700;
    position: relative;
    top: -4px;
    -webkit-animation: blink 1s step-end infinite;
    animation: blink 1s step-end infinite;
}
.box .st-text {
    font-style: italic;
    font-weight: 600;
}
.box .st-text.console {
    font-family: 'Courier New', 'Courier', monospace;
    font-size: 24px;
}
.box.content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: 200px;
    overflow: auto;
}
.box.content > span {
    background: #f9f9f9;
    border-left: 6px solid #ccc;
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.7);
    display: block;
    font-size: 32px;
    line-height: 1.5;
    margin: 0 auto;
    overflow-y: scroll;
    padding: 16px;
}
.box.content > span.quote {
    quotes: "“" "”" "‘" "’";
}
.box.content > span.quote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: 0.1em;
    margin-right: 0.25em;
    vertical-align: -0.4em;
}
.box > .info {
    color: rgba(0, 0, 0, 0.7);
    padding: 32px;
}
.box > .info a {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 600;
    text-decoration: none;
}
.box > .info > h1,
.box > .info > h2 {
    text-align: center;
}
.box > .info > h1 {
    font-size: 36px;
}
.box > .info > h2 {
    font-size: 32px;
    font-weight: 500;
}
.box > .info > p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}
.box > .info.brown {
    background-color: #323232;
    color: white;
}
.box > .info.brown a {
    color: white;
}
.box > .info.small-padding {
    padding-bottom: 1px;
    padding-top: 0;
}
.box > ul {
    background-color: white;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 80px;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    list-style: none;
    padding: 0;
}
.box > ul > li {
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    display: inline-block;
}
.box > ul > li > input {
    display: none;
}
.box > ul > li > input:checked + label {
    color: rgba(0, 0, 0, 0.7);
    font-weight: 700;
}
.box > ul > li > input:checked + label:before {
    border-color: #00897B;
}
.box > ul > li > input[type="radio"] + label:before {
    color: transparent;
    content: '\2022';
}
.box > ul > li > input[type="checkbox"] + label:before {
    border-radius: 2px;
    content: '\2713';
}
.box > ul > li > input:checked + label:before {
    color: #00897B;
}
.box > ul > li > input[type="radio"] + label:before {
    color: transparent;
}
.box > ul > li > label {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    margin-right: 16px;
    position: relative;
    text-transform: capitalize;
    top: 30px;
    -webkit-transition: color .3s;
    transition: color .3s;
}
.box > ul > li > label:before {
    border: solid 2px rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    box-sizing: border-box;
    color: white;
    content: '';
    display: inline-block;
    height: 22px;
    margin-right: 16px;
    text-align: center;
    width: 22px;
    -webkit-transition: border-color .3s, color .3s;
    transition: border-color .3s, color .3s;
}
.box:last-child {
    margin-bottom: 0;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

HTML

<div class="box content">
    <span>
        <i class="st-text console" id="st-text">
            <span>It's awkward having a policeman around the house. Friends drop in, a man with a badge answers the door, the temperature drops 20 degrees.</span>
    <span>You throw a party and that badge gets in the way. All of a sudden there isn't a straight man in the crowd. Everybody's a comedian.</span>
    <span>"Don't drink too much," somebody says, "or the man with a badge'll run you in." Or "How's it going, Dick Tracy? How many jaywalkers did you pinch today?"</span>
    <span>And then there's always the one who wants to know how many apples you stole.</span>
    <span>All at once you lost your first name. You're a cop, a flatfoot, a bull, a dick, John Law. You're the fuzz, the heat; you're poison, you're trouble, you're bad news. They call you everything, but never a policeman.</span>
    </i><i class="st-cursor" id="st-cursor">|</i>
    </span>
</div>

<div class="box">
    <div class="info small-padding">
        <h3>Styles</h3>
    </div>
    <ul>
        <li>
            <input type="radio" value="default" name="style" id="default" />
            <label for="default">default</label>
        </li>
        <li>
            <input type="radio" checked="checked" value="noBack" name="style" id="noBack" />
            <label for="noBack">no backspacing</label>
        </li>
        <li>
            <input type="radio" value="noHigh" name="style" id="noHigh" />
            <label for="noHigh">no backspacing, no highlights</label>
        </li>
    </ul>
    <ul>
        <li>
            <input type="checkbox" value="random" id="random" />
            <label for="random">random</label>
        </li>
        <li>
            <input type="checkbox" checked="checked" value="keepWord" id="keepWord" />
            <label for="keepWord">keep words</label>
        </li>
        <li>
            <input type="checkbox" checked="checked" value="newLine" id="newLine" />
            <label for="newLine">newline</label>
        </li>
        <li>
            <input type="checkbox" value="repeat" id="repeat" />
            <label for="repeat">repeat</label>
        </li>
        <li>
            <input type="checkbox" checked="checked" value="play" id="play" />
            <label for="play">play</label>
        </li>
    </ul>
</div>

<div class="box">
    <div class="info brown">
        <h3>Documentation</h3>
        <p>SelfType.js is a JavaScript library that animates text like <a href="https://slack.com" target="_blank">Slack</a> or <a href="https://www.google.com/docs/about/" target="_blank">Google</a>. Learn how to use this library in your project on the
            <a href="https://github.com/lmenus/SelfType.js">GitHub</a> page.</p>
    </div>
</div>

SelfType.js是一个类似Slack和谷歌那样的打字动效库。

JavaScript

编辑器支持Emmet

快捷键

SelfType.js是一个类似Slack和谷歌那样的打字动效库。

JavaScript

使用Taggle.js和TypeAhead.js实现文章标签列表编辑功能

打字效果控件Typebot.js

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：