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

});

[javascript] slideup 효과로 상단배너 숨기기

 홈페이지, 또는 랜딩페이지의 팝업, 배너 외에 맨 위의 상단배너가 눈에 띄일 때가 있습니다. 

클릭하면 배너가 위로 올라가 사라지는 듯한 효과가 구현되는데요, 

(가까운 예로 쿠팡 홈페이지가 있습니다. https://www.coupang.com/)

오늘은 제이쿼리 메소드인 slideup으로 위 상단 배너가 사라지는 효과를 만들어보려 합니다.

 예제가 무척 간단합니다.

 먼저, </head> 안에 제이쿼리 스크립트를 준비해주세요.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

다음은 <style> 안에 아래 코드를 넣어주세요.

  html, body {margin:0px;padding:0px;}
  #bg1 {width:100%; height:85px; background-color:#003e76;}
  #bg2 {width:100%; height:800px; background-color:#3C87CA;}

마지막으로 아래 코드를 넣어주면 완성됩니다.

	<a href="#" onclick="$('#bg1').slideUp(400);">
		<div id="bg1"></div>
	</a>
	<div id="bg2"></div>

 위 예제를 완성하면 상단을 누를때 상단이 사라지는 효과를 볼 수 있습니다.

참고로 slideup안에 들어가는 숫자는 효과가 진행되는 시간을 설정하는 것인데요.

예를 들어 slideUp(400)은 0.4초, slideUp(4000)은 4초동안 효과가 적용되는 거로 생각하시면 되겠습니다.

[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션

지정된 숫자까지 카운트업을 시켜주는 제이쿼리 플러그인입니다. 

다른 카운트업 플러그인은 적용시켰을 때 하단에 있다하더라도 메인화면이 뜨자마자 실행이 되어버려서 

스크롤을 내려 하단에 갔을 때는 이미 실행된 뒤라 애니메이션 효과를 기대하기가 힘들었는데, 

이 플러그인은 지정된 숫자까지 타이머처럼 숫자가 휘리릭 돌아가는 애니메이션 효과와 더불어 

화면에 숫자가 드러나야만 실행이 된다는 장점이 있습니다. 

하단에 적용했다하더라도 스크롤이 하단으로 내려가서 화면에 숫자가 나타나야지만 실행이 된다는 거죠. 

https://github.com/bfintal/Counter-Up

위 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 페이지에서 해당 파일을 다운받아주세요. 

다운로드 페이지가 열리지 않는다면 다운로드할 수 있는 파일을 올려둘테니 여기서 다운로드 받아주시면 됩니다.

Counter-Up-master.zip

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

waypoint는 스크롤 할 때 해당 위치서 실행시킬 수 있도록 구현해주는 스크립트입니다. 

전부 ctrl+c, ctrl+v해서 </head> 안이나 </body> 안에 넣어주세요. 

html 안에는 숫자를 넣어야할 곳에 class를 "counter"라고 넣어주시면 됩니다. 

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

$('.counter').counterUp({
    delay: 10,
    time: 1000
});