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