Membuat ghost writer menggunakan CSS dan Javascript.

Ghost Writer yang di maksud disini adalah tulisan yang seolah-olah di tulis oleh makhluk lain, alias tak terlihat siapa yang menulis, tulisan tersebut tampil dengan sendirinya di layar komputer anda. Script ini saya dapatkan dari kompi teman dan saya rasa sangat menarik untuk dishare kembali di blog kecil saya ini sebagai bahan latihan seputar css dan javascript. Oke... untuk mempersingkat waktu berikut ini CSS dan Javascriptnya, selamat mencoba dan selamat berkreasi.

Membuat ghost writer menggunakan CSS dan Javascript.

Demo


CSS
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:500);
body{
    background:none;
    color:#C0C0C0;
}
@-webkit-keyframes colorFade {
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
@-moz-keyframes colorFade{
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
@keyframes colorFade{
    0%   {color:#C0C0C0;}
    50%  {color: #FFFFBE;}
}
section{
    width:100%;
    margin:5% 10% 0 10%;
    font-family: 'Source Code Pro';
}
textarea{
    background:#FFFFBE;
    padding:1em;
    width:80%; 5%;
  height:10em;
    font-size:1em;
    line-height:1.5em;
    vertical-align:middle;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}
button{
    text-align:center;
    border:none;
    width:25%;
    padding:1em;
    font-family: 'Source Code Pro';
    font-size:1em;
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
button:active{
    box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
}

Javascript
<script type='text/javascript'>
/*Bounce effect - do not edit unless you get it!*/
function bounce(progress) {
  for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
    }
  }
}
/*Animation time interval function - do not edit*/

function animate(opts) {
 
  var start = new Date  

  var id = setInterval(function() {
    var timePassed = new Date - start
    var progress = timePassed / opts.duration

    if (progress > 1) progress = 1
   
    var delta = opts.delta(progress)
    opts.step(delta)
   
    if (progress == 1) {
      clearInterval(id)
    }
  }, opts.delay || 10)
 
}
/*the text typing animation function*/
animateText(document.getElementById('textExample'));

function animateText(textArea) {

 /*Predefine text to be animated into the textarea*/

  var text = "Aku ada dibelakang mu...., jangan melihat kebelakang jika kamu tak berani melihat keanehan yang mungkin belum pernah engkau lihat di duniamu....!!"
 
  /*Declare animation starting point at 0, through the full length of text*/
 
  var to = text.length, from = 0
 
 /*Typical animation settings*/

  animate({
    delay: 40,
    duration: 10000,
    delta:bounce,
    step: function(delta) {
   
      /*Animates the forward typing then deleting and retyping effect*/
     
      var typedResult = (to-from) * delta + from
     
      /*Assign the value of textarea to the string assigned to 'text' variable*/
     
      textArea.value = text.substr(0, Math.ceil(typedResult))
    }
  })
};

/*Again, Again!! Clear text area, run animateText() again when button is clicked*/

document.getElementById('type').onclick = typeAgain;
function typeAgain(textArea){
   var text=''
   animateText(document.getElementById('textExample'));
  };
</script>

HTML
    <section>
        <p>
        <textarea id="textExample" style="border: 1px solid #BBB; color:#444" rows="4" cols="60"></textarea>
        </p><br/>
        <p>
            <button id='type'>Type Again!</button>
        </p>
    </section>

Nah... itulah smua kode-kodenya, selamat berkreasi, jika ada masalah... mari kita diskusikan bersama di sini pada kotak komentaryang telah disediakan, dan jangan lupa beri saya sundulan pada iklan yang ada, setidaknya untuk menyemangati saya dalam meng-update artikel.

Share this:

 
Copyright © Babble of Ibnoec. Designed by OddThemes