很实用的16款文本输入框动效

Fancy Animated Input Field 给你网站的输入框加入点特别的效果。

html5, input

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";

var _class, _temp;

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError("Cannot call a class as a function");
    }
}

var Input = function() {
    function Input(input, placeholder) {
        _classCallCheck(this, Input);

this.isFocused = false;
        this.size = 0;
        this.animation = "zoomIn";
        $(input).addClass("input");
        this.$element = $(document.createElement("div"));
        this.$element.addClass("textZone");
        this.$element.attr("tabindex", 0);
        $(input).append(this.$element);
        this.cursor = new Cursor(this);
        this.setEvents();
        Keyboard.readCharacters(this);
        Keyboard.readSpecialCharacters(this);
        this.placeholder = new Placeholder(placeholder, this);
    }

Input.prototype.setEvents = function setEvents() {
        var input = this;

this.$element.on("click", function(event) {
            input.focus();
            event.stopPropagation();
        });

$(document).on("click", function(event) {
            input.unfocus();
        });
    };

Input.prototype.focus = function focus() {
        if (this.size == 0) {
            this.$element.prepend(this.cursor.$element);
        } else {
            this.cursor.$element.insertAfter(this.$element.children().last());
        }
        this.cursor.show();
        this.isFocused = true;
    };

Input.prototype.unfocus = function unfocus() {
        if (this.size == 0) {
            this.placeholder.show();
        }
        this.cursor.hide();
        this.isFocused = false;
    };

Input.prototype.write = function write(character) {
        this.size++;
        this.placeholder.hide();
        character.setEvents(this);
        character.$element.insertAfter(this.cursor.$element);
        character.animate(this.animation);
        this.cursor.move("right");
    };

Input.prototype.erase = function erase() {
        var last = this.cursor.$element.prev();
        if (last.length && this.size > 0) {
            this.size--;
            this.cursor.move("left");
            last.remove();
            if (this.size == 0) {
                this.placeholder.show();
            }
        }
    };

Input.prototype.suppress = function suppress() {
        var next = this.cursor.$element.next();
        if (next.length && this.size > 0) {
            this.size--;
            next.remove();
            if (this.size == 0) {
                this.placeholder.show();
            }
        }
    };

return Input;
}();

var Placeholder = function() {
    function Placeholder(placeholder, input) {
        _classCallCheck(this, Placeholder);

this.input = input;
        this.$element = $(document.createElement("div"));
        this.$element.text(placeholder);
        this.$element.addClass("placeholder");
        this.show();
    }

Placeholder.prototype.show = function show() {
        this.input.$element.append(this.$element);
    };

Placeholder.prototype.hide = function hide() {
        this.$element.remove();
    };

return Placeholder;
}();

var Keyboard = (_temp = _class = function() {
    function Keyboard() {
        _classCallCheck(this, Keyboard);
    }

Keyboard.readCharacters = function readCharacters(input) {
        input.$element.on("keypress", function(event) {
            event.preventDefault();
            input.write(new Character(String.fromCharCode(event.which)));
        });
    };

Keyboard.readSpecialCharacters = function readSpecialCharacters(input) {
        input.$element.on("keydown", function(event) {
            switch (event.keyCode) {
                case Keyboard.backspace:
                    event.preventDefault();
                    input.erase();
                    break;
                case Keyboard.leftArrow:
                    input.cursor.move("left");
                    break;
                case Keyboard.rightArrow:
                    input.cursor.move("right");
                    break;
                case Keyboard.suppress:
                    input.suppress();
                    break;
                case Keyboard.top:
                    input.cursor.goTo("top");
                    break;
                case Keyboard.end:
                    input.cursor.goTo("end");
                    break;
                default:
                    break;
            }
        });
    };

return Keyboard;
}(), _class.space = 32, _class.backspace = 8, _class.leftArrow = 37, _class.rightArrow = 39, _class.suppress = 46, _class.top = 36, _class.end = 35, _temp);

var Cursor = function() {
    function Cursor(input) {
        _classCallCheck(this, Cursor);

this.$element = $(document.createElement("div"));
        this.$element.addClass("cursor");
        this.$element.addClass("hidden");
        input.$element.prepend(this.$element);
    }

Cursor.prototype.show = function show() {
        this.$element.removeClass("hidden");
    };

Cursor.prototype.hide = function hide() {
        this.$element.addClass("hidden");
    };

Cursor.prototype.move = function move(direction) {
        var offSet = this.$element.get(0).offsetLeft;
        var textZone = this.$element.parent();

if (direction == "right") {
            var next = this.$element.next();
            this.$element.insertAfter(next);
            if (offSet > textZone.width() * 0.99) {
                var scroll = textZone.scrollLeft();
                textZone.animate({
                    scrollLeft: scroll + '100'
                }, 1000);
            }
        } else if (direction == "left") {
            var prev = this.$element.prev();
            this.$element.insertBefore(prev);
        }
    };

Cursor.prototype.goTo = function goTo(point) {
        if (point == "top") {
            this.$element.parent().prepend(this.$element);
        } else if (point == "end") {
            this.$element.parent().append(this.$element);
        }
    };

return Cursor;
}();

var Character = function() {
    function Character(character) {
        _classCallCheck(this, Character);

this.$element = $(document.createElement("div"));
        if (character != " ") {
            this.$element.addClass("character");
            this.$element.text(character);
        } else {
            this.$element.addClass("space");
        }
    }

Character.prototype.setEvents = function setEvents(input) {
        var character = this;
        this.$element.on("click", function(event) {
            input.cursor.$element.insertBefore(character.$element);
            if (!input.isFocused) {
                input.cursor.show();
            }
            event.stopPropagation();
        });
    };

Character.prototype.animate = function animate(animation) {
        this.$element.css("animation", animation + " 500ms, colorTransition 500ms");
    };

return Character;
}();

var Selector = function() {
    function Selector(selector, options, defaultOption, callback) {
        _classCallCheck(this, Selector);

this.$element = $(selector);
        this.$element.addClass("selector");
        this.$selection = $(document.createElement("div"));
        this.$selection.addClass("selection");
        var i = 0;
        this.current = i;
        this.$selection.text(options[i]);
        for (i = 0; i < options.length; i++) {
            if (options[i] == defaultOption) {
                this.current = i;
                this.$selection.text(options[i]);
            }
        }
        this.$element.append(this.$selection);
        this.options = options;
        this.setEvents();
        this.setArrows();
        this.animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.callback = callback;
        this.selecting = false;
        callback(options[this.current]);
    }

Selector.prototype.setArrows = function setArrows() {
        var selector = this;
        this.$upArrow = $(document.createElement("div"));
        this.$upArrow.addClass("upArrow");
        this.$element.append(this.$upArrow);
        this.$upArrow.on("click", function() {
            if (!selector.isFirst() && !selector.selecting) {
                selector.select("Down");
            }
        });
        this.$downArrow = $(document.createElement("div"));
        this.$downArrow.addClass("downArrow");
        this.$element.append(this.$downArrow);
        this.$downArrow.on("click", function() {
            if (!selector.isLast() && !selector.selecting) {
                selector.select("Up");
            }
        });
        this.updateArrows();
    };

Selector.prototype.setEvents = function setEvents() {
        var selector = this;
        this.$element.on("wheel", function(event) {
            if (event.originalEvent.deltaY > 0) {
                if (!selector.isLast() && !selector.selecting) {
                    selector.select("Up");
                }
            } else {
                if (!selector.isFirst() && !selector.selecting) {
                    selector.select("Down");
                }
            }
        });
    };

Selector.prototype.isFirst = function isFirst() {
        return this.current == 0;
    };

Selector.prototype.isLast = function isLast() {
        return this.current == this.options.length - 1;
    };

Selector.prototype.select = function select(direction) {
        this.selecting = true;
        this.current = direction == "Up" ? this.current + 1 : this.current - 1;
        var selector = this;
        this.$selection.addClass("fadeOut" + direction).on(this.animationEnd, function() {
            selector.$selection.removeClass("fadeOut" + direction);
            selector.$selection.text(selector.options[selector.current]);
            selector.$selection.addClass("fadeIn" + direction).on(selector.animationEnd, function() {
                selector.$selection.removeClass("fadeIn" + direction);
                selector.callback(selector.options[selector.current]);
                selector.selecting = false;
                selector.updateArrows();
            });
        });
    };

Selector.prototype.updateArrows = function updateArrows() {
        this.$upArrow.removeClass("upWhiteArrow");
        this.$upArrow.removeClass("upGreyArrow");
        this.$downArrow.removeClass("downWhiteArrow");
        this.$downArrow.removeClass("downGreyArrow");

if (this.current == 0) {
            this.$upArrow.addClass("upGreyArrow");
            if (this.options.length < 2) {
                this.$downArrow.addClass("downGreyArrow");
            } else {
                this.$downArrow.addClass("downWhiteArrow");
            }
        } else if (this.current == this.options.length - 1) {
            this.$upArrow.addClass("upWhiteArrow");
            this.$downArrow.addClass("downGreyArrow");
        } else {
            this.$upArrow.addClass("upWhiteArrow");
            this.$downArrow.addClass("downWhiteArrow");
        }
    };

return Selector;
}();

var input = new Input("#myInput", "Try me!");
new Selector("#selector", ["bounce", "fadeIn", "fadeInDown", "fadeInUp", "fadeInLeft", "fadeInRight", "flash", "jello", "lightSpeedIn", "pulse", "rollIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rubberBand", "shake", "slideInDown", "slideInUp", "slideInLeft", "slideInRight", "swing", "tada", "wobble", "zoomIn"], "rubberBand", function(selection) {
    input.animation = selection;
});

编译

CSS

@import "https://fonts.googleapis.com/css?family=Lobster";
@import "https://fonts.googleapis.com/css?family=Lato";
body {
    background-color: #589DB0;
}
.center {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 570px;
    height: 40px;
}
.input {
    height: 40px;
    width: 400px;
    background-color: white;
    display: inline-block;
    border-radius: 5px;
}
.textZone {
    position: absolute;
    top: 5px;
    padding-left: 8px;
    width: 392px;
    height: 30px;
    outline: none;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    cursor: text;
}
.cursor {
    width: 1px;
    height: 100%;
    background-color: #222222;
    display: inline-block;
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
.hidden {
    visibility: hidden;
}
.character,
.placeholder {
    position: relative;
    display: inline-block;
    vertical-align: top;
    font-family: 'Lobster', sans-serif;
    font-size: 24px;
    color: #555555;
}
.placeholder {
    color: #BFBFBF;
}
.space {
    display: inline-block;
    width: 7.2px;
    height: 100%;
}
@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}
@keyframes colorTransition {
    0% {
        color: #555555;
    }
    50% {
        color: #F54E4E;
    }
    75% {
        color: #444444;
    }
    100% {
        color: #555555;
    }
}
.selector {
    width: 150px;
    margin-right: 10px;
    height: 40px;
    border: 1px white solid;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 40px;
    color: white;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: ns-resize;
}
.selection {
    animation-duration: 100ms;
}
.upArrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 10px 5px;
    position: absolute;
    top: -20px;
    left: 72.5px;
    cursor: pointer;
}
.downArrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 5px 0 5px;
    position: absolute;
    bottom: -22px;
    left: 72.5px;
    cursor: pointer;
}
.upWhiteArrow {
    border-color: transparent transparent #ffffff transparent;
}
.upGreyArrow {
    border-color: transparent transparent #777777 transparent;
}
.downWhiteArrow {
    border-color: #ffffff transparent transparent transparent;
}
.downGreyArrow {
    border-color: #777777 transparent transparent transparent;
}

HTML

Fancy Animated Input Field 给你网站的输入框加入点特别的效果。

html5, input

编辑器支持Emmet

快捷键

Fancy Animated Input Field 给你网站的输入框加入点特别的效果。

html5, input

使用Anime.js实现的18个HTML5文本动画特效

使用Vue.js实现的一款很棒的图文卡片反应式悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：