[2016.08.22] input typing 효과

text 입력창에 글자 타이핑시 여러 효과를 준 예제 입니다.

사용할 수 있는 효과는 

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

26종 세트 구성에 39,900원!! ??? ㅋㅋㅋ

예제에서 사용된 기술은 JS : Babel / CSS : Scss 입니다.

그럼 소스를 살짝 살펴 볼까요~

* html 영역

<div class="center">

    <div id="selector"></div>

    <div id="myInput"></div>

</div>

  - <input>을 사용한게 아니고 div로 input 효과를 낸거내요~

* CSS 영역

@keyframes blink {

    0% {opacity: 1;}

    50% {opacity: 0;}

}

@keyframes colorTransition {

    0% {color: #555555;}

    50% {color: $animationColor;}

    75% {color: #444444;}

    100% {color: #555555;}

}

  - @keyframes 로 애니메이션 효과를 구현했구요~

* JS 영역

class Input {

    constructor(input, placeholder) {

        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);

    }

    

    setEvents() {

        var input = this;

        

        this.$element.on("click", function(event) {

            input.focus();

            event.stopPropagation();

        });

        

        $(document).on("click", function(event) {

            input.unfocus();    

        });

    }

    

    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;

    }

        

    unfocus() {

        if (this.size == 0) {

            this.placeholder.show();

        }

        this.cursor.hide();

        this.isFocused = false;

    }

    

    write(character) {

        this.size++;

        this.placeholder.hide();

        character.setEvents(this);

        character.$element.insertAfter(this.cursor.$element);

        character.animate(this.animation);

        this.cursor.move("right");

    }

    

    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();

            }

        }

    }

    

    suppress() {

        var next = this.cursor.$element.next();

        if (next.length && this.size > 0) {

            this.size--;

            next.remove();

            if (this.size == 0) {

                this.placeholder.show();

            }

        }

    }

}

  - babel 로 구현한 input 클래스입니다.

관련 글

2015/09/23 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.23] 메뉴UI - 아크형태로 팝업하는 아기자기한 메뉴 아이콘

2015/12/16 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.12.16] Dropdown button :: Pure CSS - 순수 css 로만 구현된 드랍다운 버튼, 구현방법

2015/09/24 - [Dev. 웹/Front-end 웹개발을 위한 codepen] - [2015.09.24] jade, sass, angularJS를 활용한 Up! Down! 게임

2016/01/27 - [IT 밑거름] - [Front-end tools] 프론트엔드 개발 기술/툴 정리

2016/01/26 - [나에게 쓰는 편지..] - 최근 관심있어지는 Front-end 기술들...

간단한 사용 예제 및 Demo

See the Pen Fancy Animated Input Field by Andy Pagès (@andyNroses) on CodePen.