Fancy Animated Input Field

Developer
Andy Pagès
Size
7,995 Kb
Views
12,144
  1. Fancy Animated Input Field Previews
  2. Fancy Animated Input Field HTML Codes
  3. Fancy Animated Input Field CSS Codes
  4. Fancy Animated Input Field JS Codes

How do I make an fancy animated input field?

I wanted to make a proper animated text input, with correct cursor usage.Try other animations!Credit: Animate.css. What is a fancy animated input field? How do you make a fancy animated input field? This script and codes were developed by Andy Pagès on 10 November 2022, Thursday.

Fancy Animated Input Field Previews
IQ Test

Fancy Animated Input Field - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fancy Animated Input Field</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <div id="selector"></div> <div id="myInput"></div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fancy Animated Input Field - Script Codes CSS Codes

@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;
}

Fancy Animated Input Field - Script Codes JS Codes

"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;
});
Fancy Animated Input Field - Script Codes
Fancy Animated Input Field - Script Codes
Home Page Home
Developer Andy Pagès
Username andyNroses
Uploaded November 10, 2022
Rating 4.5
Size 7,995 Kb
Views 12,144
Do you need developer help for Fancy Animated Input Field?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Andy Pagès (andyNroses) Script Codes
Name
CSS Old Computer
Batman Joker Morphing
React Carousel
Fancy Rotate Menu - CSS Only
CSS Only Homer Simpson
Mr. Robot Animation
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!