"Onclick text write, chatting,"
Bootstrap 3.3.0 Snippet by sumitkumar

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

Related: See More


Questions / Comments: