[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 |
[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초동안 효과가 적용되는 거로 생각하시면 되겠습니다.
[javascript] 자동롤링되는 실시간검색어 만들기 (2) | 2018.05.18 |
---|---|
[javascript] on,off 스위치 만들기 (토글버튼: Togglebutton) (4) | 2017.08.21 |
[javascript] select box css 디자인 (0) | 2017.07.19 |
[javascript] 플로팅배너 만들기 (0) | 2017.06.27 |
[javascript] scroll top 위로가기 버튼 (0) | 2017.06.23 |
[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션
지정된 숫자까지 카운트업을 시켜주는 제이쿼리 플러그인입니다.
다른 카운트업 플러그인은 적용시켰을 때 하단에 있다하더라도 메인화면이 뜨자마자 실행이 되어버려서
스크롤을 내려 하단에 갔을 때는 이미 실행된 뒤라 애니메이션 효과를 기대하기가 힘들었는데,
이 플러그인은 지정된 숫자까지 타이머처럼 숫자가 휘리릭 돌아가는 애니메이션 효과와 더불어
화면에 숫자가 드러나야만 실행이 된다는 장점이 있습니다.
하단에 적용했다하더라도 스크롤이 하단으로 내려가서 화면에 숫자가 나타나야지만 실행이 된다는 거죠.
https://github.com/bfintal/Counter-Up
위 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 페이지에서 해당 파일을 다운받아주세요.
다운로드 페이지가 열리지 않는다면 다운로드할 수 있는 파일을 올려둘테니 여기서 다운로드 받아주시면 됩니다.
<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
});
delay는 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time은 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
이 부분을 생각하고 설정하게 되면 원하는 속도로 숫자가 돌아가게 되죠.
내용을 정리해두긴 했지만 해당 페이지에 다 나와있는 내용을 고스란히 가져온거라
보시고서 응용적인 부분에서는 이해가 가지 않는 부분이 있을 수도 있습니다. 해당 부분은 github에서 참고 부탁드립니다.
[typed.js] 부트스트랩 캐러셀의 타이핑 효과넣기 (0) | 2020.04.07 |
---|---|
[fakeLoader] 간단한 로딩중 화면 띄우는 플러그인 (2) | 2017.07.24 |
[JQueryRotate] 이미지 회전 애니메이션 (0) | 2017.06.16 |
[lazy load] 이미지 로딩을 지연시켜주는 이미지 플러그인 (2) | 2017.06.14 |
[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션 (2) | 2017.06.09 |