<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section id="chatting-area">
<div class="container">
<div class="row">
<div class="col-sm-offset-2 col-sm-8">
<div class="wrap">
<ol class="que-list">
<li>
<div class="test" data-text="Augue ac adipiscing quis, arcu auctor! Elementum. Non vel vel augue odio et in et est, integer, porta sed parturient rhoncus habitasse! "></div>
</li>
</ol>
</div>
</div>
</div>
<div class="btn-wrap">
<div class="btn-area">
<button href="#" class="start " id="btn-1">Click </button>
<button href="#" class="start btn-2">Click </button>
</div>
</div>
</div>
</section>
@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
body {
font: 16px/20px 'Cutive Mono', serif;
}
#chatting-area{
width:100%;
height:auto;
position:relative;
padding:50px 0px;
background-attachment: fixed;
background-image:url(../img/key-2114046_1920.jpg);
background-repeat: no-repeat;
min-height:670px;
background-position: top center;
}
.wrap {
width: 500px;
text-align: left;
}
.test {
text-align: left;
}
.que-list{
margin:0px;
padding:0px;
}
.que-list li{
list-style-type: none;
box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
/* transform: translate3d(-96px, 0, 0); */
transition: transform 0.75s cubic-bezier(0.68, 0.01, 0.245, 1.13) 0.3s,color 0.3s ease-in-out 0.25s,min-width 0.35s ease-in-out,min-height 0.35s ease-in-out;
display: inline-block;
line-height: 1.5em;
border-radius: 3px;
margin: 0 0 1em 0;
text-align: left;
position: relative;
padding: 6px 12px;
background-color: #2b2b2b;
color: #fff;
font-size: 19px;
border: none;
max-width: 90%;
}
.btn-wrap{
width:100%;
height:auto;
min-height:50px;
display:block;
clear:both;
position:relative;
}
.btn-area{
position:absolute;
top:50%;
left:45%;
}
.btn-wrap .start {
display: inline-block;
padding: 6px 12px;
margin-left: 10;
font-size: 16px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #286090;
color: #fff;
border-radius: 4px;
left: 50%;
top: 50%;
border:solid 0px;
border-color:transparent;
}
$(document).ready(function(){
function typeWriter(text, n) {
if (n < (text.length)) {
$('.test').html(text.substring(0, n+1));
n++;
setTimeout(function() {
typeWriter(text, n)
}, 100);
}
}
$('.start').click(function(e) {
e.stopPropagation();
var text = $('.test').data('text');
typeWriter(text, 0);
});
});
$(document).ready(function(){
$(".que-list>li").css({"display": "none"});
$(".start").click(function(){
$(".que-list>li").fadeIn(800);
$(this).siblings('button').hide();
$(".start").animate({marginLeft: "+=150px", marginTop: "-=100px"});
$(".start").css({"position": "fixed", top: "200px"});
});
});
