Cara Mudah Membuat Animasi Teks Slide atau Mengetik

Wahyu Development - Bagaimana cara membuat animasi text slide secara bergantian atau membuat animasi text menulis?

Animasi text adalah sebuah animasi yang menampilkan pesan secara bergantian, hal ini bertujuan untuk mempermudah penyampaian ke public. Animasi text ini juga digunakan untuk mempercantik tampilan website agar terlihat hidup. Berikut ulasannya.

Disini admin akan memberikan contoh di platform Blogger, untuk penerapannya dapat anda pasang dimana saja sesuai aturan script berikut.

Daftar isi

• 1. Cara membuat animasi text slide
• 2. Cara membuat animasi text menulis

Cara membuat animasi text slide

Silahkan copy code CSS berikut ini, letakan sesuai tempat dimana code CSS lainnya berada, biasanya di blog sebelum code </b:skin>

.animated-text{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #2980b9;
  padding: 0 40px;
  height: 60px;
  overflow: hidden;
}

.line{
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}

.line:first-child{
  animation: anim 12s infinite;
}

@keyframes anim {
  0%{
    margin-top: 0;
  }
  16%{
    margin-top: -60px;
  }
  33%{
    margin-top: -120px;
  }
  50%{
    margin-top: -180px;
  }
  66%{
    margin-top: -120px;
  }
  82%{
    margin-top: -60px;
  }
  100%{
    margin-top: 0;
  }
}

Jika sudah silahkan copy code dibawah ini, code ini digunakan untuk menuliskan text yang diinginkan dan memanggil code CSS yang telah anda salin.

    <div class="animated-text">
      <div class="line">Hi Guys</div>
      <div class="line">Welcome</div>
      <div class="line">In This</div>
      <div class="line">Tutorial</div>
    </div>

Jika sudah maka akan terlihat seperti ini.

Demo

Cara membuat animasi text menulis

Silahkan copy code javascript berikut ini, dan letakan dimana yang anda inginkan untuk memberikan efek animasi.

<script language="JavaScript">
var text="Animasi Text Mengetik, semoga bermanfaat . . .";
var delay=20;
var currentChar=1;
var destination="[none]";

function type(){
 //if (document.all)
 {
  var dest=document.getElementById(destination);
  if (dest)// && dest.innerHTML)
  {
   dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
   currentChar++;
   if (currentChar>text.length)
   {
    currentChar=1;
    setTimeout("type()", 5000);
   }
   else
   {
    setTimeout("type()", delay);
   }
  }
 }
}

function startTyping(textParam, delayParam, destinationParam){
 text=textParam;
 delay=delayParam;
 currentChar=1;
 destination=destinationParam;
 type();
}

</script> <b><div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div></b> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Itulah cara membuat efek text animasi, berikan komentar anda jika ada hal yang mungkin perlu ditanyakan ataupun komentar setelah anda menerapkannya, semoga bermanfaat . . .

Wahyu Development

Situs download software lengkap dan mudah - Tutorial lengkap tentang website, sosial media, dan komputer - Sumber referensi tugas sekolah dan informasi lainnya

Share this post

Related Post