Letter-spacing pada property CSS digunakan untuk memberikan jarak spasi setiap karakter kata maupun kalimat, dalam kesempatan kali ini saya membahas tentang bagaimana ada sebuah event mousemove jquery yang diberikan pada suatu object maka object tersebut akan terpengaruh karena sudah diberikan sebuah value property css letter-spacing.Jadi saat mouse bergerak efeknya akan memberikan spasi pada setiap karakter yang ada pada kalimat contohnya dalam tag html paragrap, heading dll. Agar tidak terlalu lama mari kita coba untuk membuatnya silahkan ikuti langkah-langkah berikut ini
Langkah pertama buat file HTML yang berisi seperti dibawah :
|
1 2 3 4 5 6 7 8 |
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <h1>Terbaik dan Nomor 1</h1> </body> </html> |
Langkah kedua buat file CSS yang berisi style dari tag h1 silahkan diketikkan seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> body{ margin:0; padding:0; display:flex; justify-content: center; align-items: center; height: 100vh; } h1{ margin:0 0 0 70px; padding: 0; font-family: sans-serif; text-transform: uppercase; font-size: 40px; text-align: center; white-space: nowrap; } </style> |
dan langkah selanjutnya yang perlu ditambahkan library Jquery masukan link cdn jquery dibagian bawah sebelum penutup body
|
1 |
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> |
lalu berikut script jquery yang dipakai ;
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).mousemove(function(e) { $('h1').css({'letter-spacing' : '' + (e.pageY)/10+ 'px'}) }); </script> |
jadi objek h1 diberikan style css letter-spacing dengan event pageY (titik koordinat dimana mouse itu digeser mendekati objek) jika dibagi dengan nilai 10 maka spasi yang dihasilkan akan semakin lebar jika sebaliknya diberi nilai lebih besar akan semakin kecil jarak nya.
sekarang simpan semua file diatas , dan jalankan pada browser masing-masing maka tampilanya seperti dibawah ini:
Demikian pembahasan kali ini tentang Cara Menggunakan Letter Spacing Event Mousemove JQuery, semoga bermanfaat dan sampai jumpa lagi dengan artikel lainnya .
terima kasih