Cara Membuat Animasi Move Text Dengan JQuery

Animasi move text merupakan tampilan text dalam sebuah paragraph ,dimana teks tidak dapat dibaca seluruhnya sehingga harus digeser kekiri atau kekanan terlebih dahulu agar terlihat text dalam paragraph seutuhnya. Efek dari animasi yang sekarang akan dibahas saat ini supaya bisa digeser kekanan kekiri saat mouse atau cursor di geser. Baiklah saya akan jelaskan langka-langkah tentang cara membuat animasi move text dengan JQuery.Langkah Pertama sahabat membuat file HTML terlebih dahulu seperti berikut ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cara Membuat Animasi Move Text dengan JQuery</title>
  <!-- untuk style CSS -->
  <link rel="stylesheet" href="style.css">
  <!-- untuk link plugin cdn JQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <!-- letak script JQuery -->
  <script src="main.js"></script>
</head>
<body>
  <div id="box">
    Putar ke kiri e...
    Nona manis putarlah ke kiri
    Ke kiri ke kiri ke kiri
    Dan ke kiri ke kiri ke kiri
    Ke kiri manis e...
    <br />
    Sekarang kanan e...
    Nona manis putarlah ke kanan
    Ke kanan ke kanan ke kanan ke kanan
    Dan ke kanan ke kanan ke kanan
    Ke kanan manis ee..
  </div>
  <div id="mouse"></div>
</body>
</html>

Langkah kedua tambahakan Style CSSnya ketikkan sintax dibawah ini :

body{
  margin:0;
  padding:0;
  background-color: #34625F;
}

#box{
  width: 125%;
  font-family: sans-serif;
  font-size: 50px;
  position: fixed;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  padding-left: 250px;
  transition: all 5s;
}

#mouse{
  width: 60px;
  height: 60px;
  background-color: #F0E7E7;
  border-radius: 50%;
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

Langkah ke tiga menambahkan script untuk JQuery nya seperti berikut ini:

$(document).mousemove(function(e){
  if(e.pageX<=1000)
    $("#mouse").css({left:e.pageX+25, top:e.pageY, opacity:0.5});
  else if (e.pageX >= 0)
    $("#mouse").css({left:e.pageX-25, top:e.pageY, opacity:0.5});
  if(e.pageX <= 1000 && e.pageX >= 0)
      $("#box").css({left:'-'+e.pageX+'px'});
});
$(document).mouseleave(function(){
  $("#mouse").css({opacity:0});
});

Pada script diatas adalah suatu fungsi dimana teks akan bergeser secara bergantian dari arah kiri ke arah kanan saat mouse digerakan kekanan ataupun kekiri.

Setelah sudah diketikkan save ketiga file diatas lalu coba sahabat jalankan pada browser masing-masing dan lihat hasilnya .

Demikian pembahasan tentang cara membuat move text dengan JQuery ,semoga bermanfaat sampai ketemu lagi dengan artikel serta tutorial lainnya.

Terima kasih

Cara Membuat Animasi Move Text Dengan JQuery

Kategori