[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>

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

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

});

[JQueryRotate] 이미지 회전 애니메이션

이미지를 회전하게 만들어주는 제이쿼리 플러그인입니다. 

이미지를 계속 회전하게 만들 수도 있고 45도 각도로 이미지를 기울일 수도 있고 

마우스 오버할 때, 또는 클릭할 때 이미지를 회전하게 만들 수 도 있죠. 

여러가지 방법들이 있지만 그 중 이미지를 계속 빙글빙글 돌아가게 만드는 예제를 소개할까 합니다. 

먼저 jquery plugin 파일을 다운로드 받아주세요.

jQueryRotateCompressed.js

다운로드 받은 js(jQueryRotateCompressed.js)를 폴더에 넣어주시고 스크립트를 html으로 넣어줍니다.

<script src="jQueryRotateCompressed.js"></script>

그 다음 빙글빙글 돌아가게 만드는 이미지를 <body> 안에 넣어주시는데 이미지의 id값은 image로 주시고

 해당 스크립트를 돌아가게 만들 스크립트 소스를 </body> 앞에 넣어줍니다.

<img src="---.jpg" id="image">

var angle = 0;
setInterval(function(){
      angle+=3;
     $("#image").rotate(angle);
},50);

완성된 데모페이지는 아래 URL에서 확인하실 수 있습니다.

보시는 것처럼 제이쿼리플러그인과 스크립트로 쉽고 간단하게 이미지를 회전시킬 수 있죠.

http://jsfiddle.net/xpdd0vz2/ (데모페이지)

내용을 단순하게 정리하기는 했지만 이것이 부족하다고 느끼시는 분들은 

이미지를 회전시키는 다양한 방법과 응용은 참조 페이지 안에서 참고 부탁드립니다.

참조 :  http://jqueryrotate.com/