Belajar Membuat Sliding Text Animation Keren

Faronesia.com - Halo sahabat faronesia, pada kesempatan kali ini saya akan membagikan tutorial unik yang bisa anda praktekkan sendiri dirumah anda sebagai uji coba yaitu membuat animasi text sliding. Pada tutorial yang akan kita bahas kali ini hanya menggunakan CSS dan HTML saja.

Fungsi text sliding
Sebelum masuk ke tahap tutorial, anda harus tahu tentang apa fungsi text sliding. Text sliding atau slider website adalah informasi yang berjalan (sliding) di website anda. Dari pernyataan tadi bisa kita tarik kesimpulan fungsi dari text sliding ialah penyajian informasi yang sengaja diciptakan oleh pemilik website dalam bentuk teks yang berjalan dengan tujuan tertentu untuk menarik perhatian pengunjung.

Manfaat dan kelebihan text sliding
Dengan memberikan informasi singkat, jelas dan mudah dimengerti tentunya akan memudahkan customer memahami produk atau service apa yang anda tawarkan pada website dalam waktu yang relatif singkat. Berikut beberapa kelebihan slider dalam menampilkan informasi:
  • Text sliding yang di desain dengan baik akan meningkatkan kepercayaan customer dan membuat website anda terlihat lebih profesional.
  • Text sliding juga sebagai STOPPING POWER atau kekuatan untuk membuat pengunjung berhenti, tertarik dan mencoba untuk mengerti konten website anda dalam waktu yang relatif singkat atau dalam hitungan detik.
  • Text sliding juga bisa menjadi alat dalam proses pemasaran branding produk anda. Hal ini juga sering dilakukan oleh web-web besar lainnya dalam menawarkan produk-produk dan promo lainnya.

Bagaimana sahabat faronesia? Ternyata text sliding juga punya berbagai manfaat kan?

Jadi, pastikan website anda memiliki informasi dengan text sliding yang baik, informatif dan yang tidak kalah penting adalah dengan desain yang profesional. Oke, saya rasa pembahasannya sudah cukup untuk anda, mari kita lanjut ke tutorialnya.

Sebelum ke tutorialnya ada baiknya anda melihat hasil demonya dibawah ini.
DEMO BELUM SIAP

Membuat animasi text sliding pada blog
  • Buatlah folder baru pada komputer anda dengan nama project
  • buka notepad
  • Salin kode CSS text sliding dibawah ini ke notepad lalu simpan pada folder project tersebut dengan nama style.css
/* faronesia.com text sliding */
body{
  margin: 0;
  padding: 0;
  font-family: montserrat,sans-serif;
  background: black;
}
.faronesianimatext{
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background:linear-gradient(to right, #19b5fe, #0081ff);
  border-radius:50px;
  padding: 0 40px;
  height: 60px;
  overflow: hidden;
  box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , 0.12) , 0 5px 5px 5px rgba(0 , 0 , 0 , 0.12);
}
.faronesia{
  text-transform: uppercase;
  text-align: center;
  font-size: 40px;
  line-height: 60px;
}
.faronesia: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;
  }
}
  • Selanjutnya, salin kode HTML dibawah ini ke notepad lalu simpan di folder project dengan nama index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<div class="faronesianimatext">
      <div class="faronesia">Selamat</div>
      <div class="faronesia">Datang</div>
      <div class="faronesia">Di website</div>
      <div class="faronesia">Faronesia</div>
    </div>
  </body>
</html>
  • Ubah tulisan yang berwarna kuning sesuai keinginan anda
  • Untuk melihat hasilnya, jalankan file index.html menggunakan browser chrome atau yang lainnya
  • Nah sampai disini anda sudah bisa membuat animasi text sliding yang keren
  • Selebihnya silahkan modifikasi sesuai selera anda
Demikianlah belajar singkat mengenai membuat animasi text sliding keren semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel