Haroop Webagency team BICTOR

원격 및 파견 개발팀분들을 위한 하룹소속 개발자전용 빅터 오픈소스 커뮤니티입니다

이곳은 하룹 개발팀 소속 직원들에 전체 개발기술력 및 전체 평균 능력치 강화를 위한, 빅터팀 리드개발자들에 오픈소스 개발 커뮤니티 공간입니다, 만약 고객이시라면 여기를 이용해주세요.

제목
글자 타이핑, 그런 효과내는 플러그인 알 수 있을까요?
작성자
미즈
작성일
2022-07-25 09:45
조회
133
답변완료
글자 타이핑 같은 그런 효과내는 개발이 필요한데
어디서부터 건드려야할지 막막하네요ㅠ
혹시 이런 효과내는 플러그인 알 수 있을까요?ㅠ
전체 4

  • 2022-07-25 12:29

    안녕하세요 여러가지가 있지만, 플러그인을 사용하신다면
    이것도 꿀팁중에 하나이긴 한데 typewriter.js 플러그인을 이용하시면 되실거같습니다.

    플러그인 소스는 아래처럼 넣어주시면 잘 작동하실거에요.

    (만약 개발하시는 부분에 jQuery가 인클루드안되어있으면, 제이쿼리를 별도로 불러와주셔야 정상적으로 작동합니다.)


  • 2022-07-25 12:32

    우선 아이디가 typewriter 인 p 태그 하나 만들어주세요

    스크립트
    var typing = document.getElementById('typewriter');

    var typewriter = new Typewriter(typing, {
    loop: true,
    cursor:'|'
    });

    typewriter.typeString('PhantomDesign')
    .pauseFor(2500)
    .deleteAll()
    .typeString('안녕하세요')
    .pauseFor(2000)
    .deleteChars(7)
    .typeString('잘되시죠?^^ 화이팅입니다.')
    .start();

    (만약 개발하시는 부분에 jQuery가 인클루드안되어있으면, 제이쿼리를 별도로 불러와주셔야 정상적으로 작동합니다.)


  • 2022-07-25 12:32

    (function(){"use strict";(function(){var lastTime=0;var vendors=['ms','moz','webkit','o'];for(var x=0;x0){this.deleteAll();this._resetEventLoop('rerunCalledEvents');}else{this._settings.eventQue=this._settings.calledEvents;this._settings.calledEvents=[];this.options=this._setupOptions(this._settings.userOptions);this._settings.usedIDs=[];this.charAmountToDelete=false;this._startEventLoop();}};TypewriterPrototype._deleteChars=function(amount){if(amount){this._settings.charAmountToDelete=amount;}
    this._deletingCharIdsAnimation=window.requestAnimationFrame(this._deletingCharAnimationFrame.bind(this));return this;};TypewriterPrototype._pauseFor=function(ms){var self=this;self._settings.eventRunning=true;setTimeout(function(){self._resetEventLoop('pauseFor');},ms);};TypewriterPrototype._changeSettings=function(new_settings){this.options=this._setupOptions(JSON.parse(new_settings[0]));this._resetEventLoop('changeSettings');if(this.options.devMode){console.log('New settings',this.options);}};TypewriterPrototype._deletingCharAnimationFrame=function(){var self=this;var delete_speed=this.options.deleteSpeed;var typewriter_wrapper_class_name=self.options.wrapperClassName;var current_typed_char_ids=self._settings.currentTypedCharacters;var char_amount_to_delete=self._settings.charAmountToDelete;if(!self._settings.charAmountToDelete||self._settings.charAmountToDelete===0||current_typed_char_ids===0){self._resetEventLoop('deletingCharAnimationFrame');return true;}
    if(delete_speed=='natural'){delete_speed=self._randomInteger(50,150);}
    if(char_amount_to_delete=='all'){char_amount_to_delete=current_typed_char_ids.length;self._settings.charAmountToDelete=char_amount_to_delete;}
    setTimeout(function(){if(self._settings.charAmountToDelete){var last_typed_char_index=current_typed_char_ids.length-1;var get_last_typed_char=current_typed_char_ids[last_typed_char_index];self._settings.currentTypedCharacters.splice(last_typed_char_index,1);var char_to_delete_el=document.getElementById(get_last_typed_char);if(char_to_delete_el){var typewriter_wrapper_el=self.el.querySelector('.'+typewriter_wrapper_class_name);typewriter_wrapper_el.removeChild(char_to_delete_el);self._settings.charAmountToDelete=char_amount_to_delete-1;if(self.options.devMode){console.log('Deleted char with ID',get_last_typed_char);}}}
    self._deletingCharIdsAnimation=window.requestAnimationFrame(self._deletingCharAnimationFrame.bind(self));},delete_speed);};TypewriterPrototype._setupOptions=function(new_options){var merged_options={};for(var attrname in this.default_options){merged_options[attrname]=this.default_options[attrname];}
    if(this._settings.userOptions){for(var attrname in this._settings.userOptions){merged_options[attrname]=this._settings.userOptions[attrname];}}
    for(var attrname in new_options){merged_options[attrname]=new_options[attrname];}
    return merged_options;}
    TypewriterPrototype._addToEventQue=function(event){this._settings.eventQue.push(event);if(this._settings.eventQue.length>0&&!this._settings.eventRunning&&this.options.autoStart){this._startEventLoop();}};TypewriterPrototype._startEventLoop=function(){if(this.options.devMode){console.log('Event loop started.');}
    if(!this._settings.eventRunning){if(this._settings.eventQue.length>0){this.eventLoopRerun=0;var first_event=this._settings.eventQue[0];if(typeof first_event=='function'){this._settings.eventRunning=true;this._settings.calledEvents.push(first_event);this._settings.eventQue.splice(0,1);first_event.call(this);if(this.options.devMode){console.log('Event started.');}}else if(first_event instanceof Array){if(typeof first_event[0]=='function'&&first_event[1]instanceof Array){this._settings.eventRunning=true;this._settings.calledEvents.push(first_event);this._settings.eventQue.splice(0,1);first_event[0].call(this,first_event[1]);if(this.options.devMode){console.log('Event started.');}}}}
    this._eventQueAnimation=window.requestAnimationFrame(this._startEventLoop.bind(this));}
    if(!this._settings.eventRunning&&this._settings.eventQue.length<=0){var self=this;self._stopEventLoop();setTimeout(function(){if(self.options.loop){self.eventLoopRerun++;if(self.options.devMode){console.log('Before Loop State',self._settings);}
    if(self.eventLoopRerun>4){console.error('Maximum amount of loop retries reached.');self._stopEventLoop();}else{if(self.options.devMode){console.log('Looping events.');}
    self._rerunCalledEvents();}}},1000);return;}};TypewriterPrototype._resetEventLoop=function(name){var event_name=name||'Event';this._settings.eventRunning=false;this._startEventLoop();if(this.options.devMode){console.log(event_name,'Finished');}};TypewriterPrototype._stopEventLoop=function(){window.cancelAnimationFrame(this._eventQueAnimation);if(this.options.devMode){console.log('Event loop stopped.');}};TypewriterPrototype._setupTypwriterWrapper=function(){var typewriter_wrapper_class_name=this.options.wrapperClassName;var typewriter_wrapper=document.createElement('span');typewriter_wrapper.className=typewriter_wrapper_class_name;this.el.innerHTML='';this.el.appendChild(typewriter_wrapper);};TypewriterPrototype._typeCharacters=function(characters_array){this._settings.stringToTypeHTMLArray=this._convertCharsToHTML(characters_array);this._typingAnimation=window.requestAnimationFrame(this._typingAnimationFrame.bind(this,characters_array.length));return this;};TypewriterPrototype._typingAnimationFrame=function(total_items){var self=this;var typing_speed=this.options.typingSpeed;var typewriter_wrapper_class_name=self.options.wrapperClassName;if(self._settings.stringToTypeHTMLArray.length==0){window.cancelAnimationFrame(self._typingAnimation);this._resetEventLoop('typingAnimationFrame');return true;}
    if(typing_speed=='natural'){typing_speed=this._randomInteger(50,150);}
    setTimeout(function(){var el_inner_html=self.el.innerHTML;var item_to_type=self._settings.stringToTypeHTMLArray[0];self.el.querySelector('.'+typewriter_wrapper_class_name).appendChild(item_to_type.el);self._settings.currentTypedCharacters.push(item_to_type.id);self._settings.stringToTypeHTMLArray.splice(0,1);self._typingAnimation=window.requestAnimationFrame(self._typingAnimationFrame.bind(self,total_items));if(self.options.devMode){console.log('Typed',item_to_type);}},typing_speed);};TypewriterPrototype._convertCharsToHTML=function(chars){var chars_html_wrap_array=[];var char_class_name=this.options.charSpanClassName;var chars_array=chars[0];for(var i=0,length=chars_array.length;i=1){this._settings.opacityIncreasing=false;this._settings.currentOpacity=1;}
    this._settings.currentOpacity+=opacity_amount;}
    if(this._settings.opacityIncreasing==false){if(this._settings.currentOpacity<=0){this._settings.opacityIncreasing=true;this._settings.currentOpacity=0;}
    this._settings.currentOpacity-=opacity_amount;}
    cursor_el.style.opacity=this._settings.currentOpacity;this._cursorAnimation=window.requestAnimationFrame(this._cursorAnimationFrame.bind(this));}};TypewriterPrototype._startCursorAnimation=function(){var cursor=this.options.cursor;var cursor_class_name=this.options.cursorClassName;var cursor_element=document.createElement('span');cursor_element.className=cursor_class_name;cursor_element.innerHTML=cursor;this.el.appendChild(cursor_element);if(this.options.animateCursor){this._cursorAnimation=window.requestAnimationFrame(this._cursorAnimationFrame.bind(this));}};TypewriterPrototype._pauseCursorAnimation=function(){if(!this._settings.cursorAnimationPaused){window.cancelAnimationFrame(this._cursorAnimation);this._settings.cursorAnimationPaused=true;}};TypewriterPrototype._restartCursorAnimation=function(){if(!this._settings.cursorAnimationPaused){return console.error('Cursor animation is already running.')}
    this._settings.cursorAnimationPaused=false;this._cursorAnimation=window.requestAnimationFrame(this._cursorAnimationFrame.bind(this));};TypewriterPrototype._randomInteger=function(min,max){return Math.floor(Math.random()*(max-min+1))+min;};TypewriterPrototype._randomID=function(){var text="";var possible="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(var i=0;i<this._randomInteger(5,15);i++){text+=possible.charAt(Math.floor(Math.random()*possible.length));}
    return text;};TypewriterPrototype._generateUniqueID=function(){var temp_id=this._randomID();if(this._settings.usedIDs.indexOf(temp_id)==-1){this._settings.usedIDs.push(temp_id);return temp_id;}
    return this._generateUniqueID.call(this);};})();


  • 2022-07-25 12:32

    그리고 위에 스크립트로 복붙해주시면, 잘 작동하실겁니다 ^^