[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기

[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기

이 내용을 알게 된 지 벌써 2년이나 지났는데 게으름을 피우다가 이제야 내용을 정리해서 올리네요.. 

문의할 곳이 없어서 정말 다급하게 동앗줄 잡는 심정으로 카페 문의글로 올렸었는데 

친절한 답변과 함께 꼼꼼한 첨부파일까지 올려주신 '기소기'님, 다시 한번 감사합니다. 

* 해당 답변을 받았던 카페글 : https://cafe.naver.com/hacosa/221591

---

부트스트랩의 캐러셀 (http://bootstrapk.com/javascript/#carousel)을 사용하는 중에 

안에 들어가는 글자를 타이핑효과가 나게끔 넣어야하는 부분이 있었는데요.

 여기서 중요한 건 타이핑 뿐만 아니라 타이핑이 다 끝난 후에 (글씨가 다 작성된 후에) 

슬라이더가 옆으로 이동하게 만들어야하는 부분에 있었습니다.

https://github.com/mattboldt/typed.js/

타이핑 효과가 나는 플러그인은 위 URL에서 다운 받았습니다.

기본적으로 세팅해야할 소스는 제이쿼리, 부트스트랩, 그리고 타이핑 플러그인, 이렇게 세팅 먼저 해주셔야합니다.

<!-- 제이쿼리 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- 부트스트랩  -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- 타이핑 플러그인 -->
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

해당 소스들을 세팅해주시고 html에 캐러셀 소스를,

css에는 캐러셀에 넣을 스타일을 넣어주세요.

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item_bg"></div>
	  <div class="carousel-caption">
		<span class="typing"></span>
      </div>
    </div>
    <div class="item">
      <div class="item_bg"></div>
	  <div class="carousel-caption">
		<span class="typing"></span>
      </div>
    </div>
    <div class="item">
     <div class="item_bg"></div>
	  <div class="carousel-caption">
		<span class="typing"></span>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

ul,li {
	list-style:none;
	margin:0px;
	padding:0px;
}
.item_bg {
  background-color:#757575;
  height:200px;
}
.carousel-caption {
  padding-top:0px;
  padding-bottom:60px;
}
#typed,#typed2,#typed3 {
	font-size:25px;
	color:#fff;

}
.typing {
	font-size: 20px;
}
.typing::after {
	content: '|';
	display: inline;
	-webkit-animation: blink 0.7s infinite;
	-moz-animation: blink 0.7s infinite;
	animation: blink 0.7s infinite;
}
.typing-cursor{
   opacity: 0;
	display: none;
}
@keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-webkit-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}
@-moz-keyframes blink{
	0% { opacity:1; }
	50% { opacity:0; }
	100% { opacity:1; }
}

마지막으로 javascript를 넣고 마무리해주시면 됩니다. 

$(function(){

	var carouselWrap = $('#carousel-example-generic'),
		 typedTxtArr = [
			'First Carousel Text',
			'Second Carousel Text',
			'Third Carousel Text'
		 ],
		 typed, typedObj;	

	var typedFunc = function( a, b ) {
		typed = new Typed(a[0], {
			strings: [
				typedTxtArr[ b ]
			],
			stringsElement: null,
			typeSpeed: 70,
			startDelay: 1000,
			smartBackspace: false,
			backSpeed: 60,
			backDelay: 5000,
			loop: true,
			loopCount: 5,
			showCursor: false,
			cursorChar: "|",
			attr: null,
			contentType: 'html',
			callback: function() {},
			preStringTyped: function() {},
			onStringTyped: function() {
				setTimeout(function(){
					carouselWrap.carousel('next');
				}, 1000);
			},
			resetCallback: function() {},
			onReset: function(self) { 
				
			}
		});
	}

	carouselWrap.on('slid.bs.carousel', function () {
		var idx =$(this).find('.active').index(),
			 typedObj = $('.typing').eq( idx );
			 typed.destroy();
			 typedFunc( typedObj, idx );
	});
	
	// init
	typedFunc( $('.typing').eq(0), 0); 

});