[2016.08.22] input typing 효과 :: 소림사의 홍반장!

[2016.08.22] input typing 효과

2016. 8. 22. 10:05 - 삘쏘굿

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 클래스입니다.



간단한 사용 예제 및 Demo

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


다른 카테고리의 글 목록

Dev. 웹/Front-end 웹개발을 위한 codepen 카테고리의 포스트를 톺아봅니다