√ Cara bikin text reveal animasi dengan script javascript dan CSS

Konten [Tampil]

Website tidak akan pernah terlepas dari adanya beberapa bahasa pemrograman. Bahasa pemrograman semakin berkembang setiap waktu. Bahasa pemrograman yang digunakan dalam mendesain website seperti hmtl, php, css, javascript bahkan sampai pada jquery pada event website tertentu.

Keberadaan beberapa bahasa pemrograman tersebut membuat suatu website manjadi unik dan kreatif. Sehingga anda dapat membuat suatu animasi pada website yang membuat para pengunjung anda menjadi tertarik dan betah untuk mengunjungi website anda ya.

Banyak sekali efek animasi yang dapat ditampilkan pada suatu website salah satunya adalah text reveal. Text reveal adalah suatu paragraf dimana baris kedua atau lebihnya akan menjorok ke dalam sehingga seperti efek pada microsoft word yaitu haging ya.

Kali ini saya akan membahas mengenai cara membuat texy reveal dengan html css dan javascript dengan mudah, langkahnya adalah

a. Pertama anda siapkan terlebih dahulu text editor favorit anda, disini saya menggunakan adobe dreamweaver.

b. Buatlah suatu file yang bernama index.html ya, dan isikan kode sebagai berikut ini

<html>
<head>
   <title>Rafinternet animasi text reveal</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
   <style>
   </style>
</head>
<body>
<p class="rafinternet-text-display"> 
 <span class="one">
  <span class="word">Selamat Datang di rafinternet</span>
  <span class="backgrond1"></span>
 </span>
 <br/>
 <span class="two">
  <span class="word">Rafinternet</span>
  <span class="backgroud-2"></span>
 </span>
</p>
 
<button class="restart">Ulangi</button>

   <script>
</script>
</body>

c. Kemudian anda editlah bagian <style> </style> dengan diisi kode sebagai berikut ini

body, html {
  height: 100%;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Courier New';
  font-weight: 100
  color: #353535;
  position: relative;
}
 
.rafinternet-text-display {
  display: inline-block;
  font-size: 15vmin;
  line-height: 1.205;
}
 
.one, .two {
  position: relative;
}
 
.word {
  opacity: 0;
}
 
.backgrond1, .backgroud-2 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
}
 
.backgrond1 {
  background-color: blue;
}
 
.backgroud-2 {
  background-color: green;
}
 
.two {
  margin-left: 15vmin;
}
 
.restart {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border: none;
  border-bottom: 1px dotted grey;
  padding: 0;
  margin: 0 auto 2%;
  cursor: pointer;
  color: grey;
}

d. Editlah bagian <script></Script> dengan diisi seperti kode ini

   window.onload = function(){
 var tl = new TimelineLite({delay: 1}),
 firstBg = document.querySelectorAll('.backgrond1'),
 secBg = document.querySelectorAll('.backgroud-2'),
 word  = document.querySelectorAll('.word');
   
       tl
 .to(firstBg, 0.2, {scaleX:1})
 .to(secBg, 0.2, {scaleX:1})
 .to(word, 0.1, {opacity:1}, "-=0.1")  
 .to(firstBg, 0.2, {scaleX:0})
 .to(secBg, 0.2, {scaleX:0});
  
  document.querySelector('.restart').onclick = function() {tl.restart()};
   }
   </script>

e. Maka struktur dari index.html anda akan jadi seperti berikut ini

<html>
<head>
   <title>Rafinternet animasi text reveal</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
   <style>
body, html {
  height: 100%;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-family: 'Courier New';
  font-weight: 100
  color: #353535;
  position: relative;
}
 
.rafinternet-text-display {
  display: inline-block;
  font-size: 15vmin;
  line-height: 1.205;
}
 
.one, .two {
  position: relative;
}
 
.word {
  opacity: 0;
}
 
.backgrond1, .backgroud-2 {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  transform-origin: left;
  transform: scaleX(0);
}
 
.backgrond1 {
  background-color: blue;
}
 
.backgroud-2 {
  background-color: green;
}
 
.two {
  margin-left: 15vmin;
}
 
.restart {
  position: absolute;
  font-size: 12px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border: none;
  border-bottom: 1px dotted grey;
  padding: 0;
  margin: 0 auto 2%;
  cursor: pointer;
  color: grey;
}

   </style>
</head>
<body>
<p class="rafinternet-text-display"> 
 <span class="one">
  <span class="word">Selamat Datang di rafinternet</span>
  <span class="backgrond1"></span>
 </span>
 <br/>
 <span class="two">
  <span class="word">Rafinternet</span>
  <span class="backgroud-2"></span>
 </span>
</p>
 
<button class="restart">Ulangi</button>

   <script>
   
   window.onload = function(){
 var tl = new TimelineLite({delay: 1}),
 firstBg = document.querySelectorAll('.backgrond1'),
 secBg = document.querySelectorAll('.backgroud-2'),
 word  = document.querySelectorAll('.word');
   
       tl
 .to(firstBg, 0.2, {scaleX:1})
 .to(secBg, 0.2, {scaleX:1})
 .to(word, 0.1, {opacity:1}, "-=0.1")  
 .to(firstBg, 0.2, {scaleX:0})
 .to(secBg, 0.2, {scaleX:0});
  
  document.querySelector('.restart').onclick = function() {tl.restart()};
   }
   </script>
</body>

f. Simpanlah pekerjaan anda terlebih dahulu ya kamudian anda jalankan di browser anda hehe.

Demikianlah cara bikin animasi text reveal dengan javascript dan CSS semoga anda menjadi bermanfaat yaa