[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);
});
[slick.js/swiper.js] 반응형 탭(slider tab) 만들기 (0) | 2021.10.14 |
---|---|
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2) | 2017.07.24 |
[JQueryRotate] 이미지 회전 애니메이션 (0) | 2017.06.16 |
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2) | 2017.06.14 |
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |
[Tip] tab(탭)에 카카오맵 api 지도 여러개 넣기
부트스트랩 탭에 지도(카카오맵 api)를 여러개 넣어야하는 작업이 있었는데,
하나 넣었던 때처럼 단순히 넣으면 제대로 구현되겠다고 생각했는데 막상 해보니
생각처럼 단순한 게 아니었습니다.
열심히 삽질을 하고 구글링을 반복하던 끝에 다행히 구현할 수 있었는데,
먼저 하나씩 단계를 밟아가며 설명 드리겠습니다.
부트스트랩 탭을 세팅합니다.
(제가 구현한 탭은 총 4가지입니다.)
<div class="tab">
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li role="presentation" class="active"><a href="#place1" aria-controls="place1" role="tab" data-toggle="tab">장소1</a></li>
<li role="presentation"><a href="#place2" aria-controls="place2" role="tab" data-toggle="tab">장소2</a></li>
<li role="presentation"><a href="#place3" aria-controls="place3" role="tab" data-toggle="tab">장소3</a></li>
<li role="presentation"><a href="#place4" aria-controls="place4" role="tab" data-toggle="tab">장소4</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="place1">
<!--장소 1 지도가 들어갈 자리-->
</div>
<div role="tabpanel" class="tab-pane" id="place2">
<!--장소 2 지도가 들어갈 자리-->
</div>
<div role="tabpanel" class="tab-pane" id="place3">
<!--장소 3 지도가 들어갈 자리-->
</div>
<div role="tabpanel" class="tab-pane" id="place4">
<!--장소 4 지도가 들어갈 자리-->
</div>
</div>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="place1">
<div class="map" id="map1"></div>
</div>
<div role="tabpanel" class="tab-pane" id="place2">
<div class="map" id="map2"></div>
</div>
<div role="tabpanel" class="tab-pane" id="place3">
<div class="map" id="map3"></div>
</div>
<div role="tabpanel" class="tab-pane" id="place4">
<div class="map" id="map4"></div>
</div>
</div>
그리고 각각의 script에 아래 내용을 넣어줍니다.
(원하는 위치의 위도, 경도를 모를 경우는 https://support.google.com/maps/answer/18539?co=GENIE.Platform%3DDesktop&hl=ko ,
해당 URL에서 장소의 좌표 구하기의 내용을 참고하세요)
/* place1의 지도 */
var mapContainer1 = document.getElementById('map1'),
mapOption1 = {
center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
level: 3
};
var map1 = new kakao.maps.Map(mapContainer1, mapOption1);
var markerPosition1 = new kakao.maps.LatLng(원하는 위치의 위도, 경도);
var marker1 = new kakao.maps.Marker({
position: markerPosition1
});
marker1.setMap(map1);
/* place2의 지도 */
var mapContainer2 = document.getElementById('map2'),
mapOption2 = {
center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
level: 3
};
var map2 = new kakao.maps.Map(mapContainer2, mapOption2);
var markerPosition2 = new kakao.maps.LatLng(원하는 위치의 위도, 경도);
var marker2 = new kakao.maps.Marker({
position: markerPosition2
});
marker2.setMap(map2);
/* place3의 지도 */
var mapContainer3 = document.getElementById('map3'),
mapOption3 = {
center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
level: 3
};
var map3 = new kakao.maps.Map(mapContainer3, mapOption3);
var markerPosition3 = new kakao.maps.LatLng(원하는 위치의 위도, 경도);
var marker3 = new kakao.maps.Marker({
position: markerPosition3
});
marker3.setMap(map3);
/* place4의 지도 */
var mapContainer4 = document.getElementById('map4'),
mapOption4 = {
center: new kakao.maps.LatLng(원하는 위치의 위도, 경도),
level: 3
};
var map4 = new kakao.maps.Map(mapContainer4, mapOption4);
var markerPosition4 = new kakao.maps.LatLng(원하는 위치의 위도, 경도);
var marker4 = new kakao.maps.Marker({
position: markerPosition4
});
marker4.setMap(map4);
$('#myTab a').click(function (e) {
e.preventDefault()
$(this).tab('show');
setTimeout(function(){
map2.relayout();
map2.setCenter(new daum.maps.LatLng(두번째 탭 지도 위치와 경도));
map3.relayout();
map3.setCenter(new daum.maps.LatLng(세번째 탭 지도 위치와 경도));
map4.relayout();
map4.setCenter(new daum.maps.LatLng(네번째 탭 지도 위치와 경도));
}, 0);
});
* 참고 사이트 :
[Tip] magnific popup을 iframe 안에서 열었을 시 문제점 (0) | 2020.11.02 |
---|---|
[Tip] checkbox 초기화하기 (0) | 2020.10.19 |
[Tip] 크롬에서 현재 창 닫기 (window.close) (0) | 2020.04.03 |
[Tip] 워드프레스 관련 메모2 (0) | 2020.03.18 |
[Tip] 워드프레스 관련 메모 (0) | 2020.03.17 |