Membuat Teks Animasi Dengan Textillate.Js

Dalam posting ini kita akan memperkenalkan Anda kepada sebuah plugin jQuery , dibangun menggunakan ...

Dalam posting ini kita akan memperkenalkan Anda kepada sebuah plugin jQuery, dibangun menggunakan Animate.css, yang mampu  membuat teks animasi dengan mudah, yaitu Textillate.js

Cara Membuat Teks animasi dengan Mudah, animasi text dengan jquery.... Tutorial pemograman membuat efek animasi dengan kode jquery...

Meskipun Anda dapat membuat teks animasi dengan Animate.css, itu hanya animasi sepenuhnya, bukan huruf demi huruf. jika anda membuat sepenuhnya teks animasi aitu jauh akan membuat anda lebih repot, karena anda akam membuatnya satu - persatu. Namun sekarang ada cara yang lebih mudah dengan anda menggunakan plugin JQuery Textillate.js.

Textillate.js membagi animasi menjadi 2 komponen, in and out animation. Anda dapat menerapkannya dengan animasi yang berbeda, secara terpisah. Semua efek animasi menggunakan library effects. Animate.css. 

Selain Animate.css, Textillate.js juga dibangun berdasarkan Lettering.js. Kita dapat mengatakan, plugin ini adalah kombinasi dari 2 tool. Animate.css bekerja pada fitur animasi, sementara Lettering.js berfokus pada tipografi. 

Cara Menggunakan Textillate.Js

Textillate.js membutuhkan beberapa dependensi sebelum siap untuk digunakan. Diantaranya adalah Animate.css, Lettering.js dan jQuery. Setelah Anda mendownload 3 file tersebut mari kita bahas penggunaanya.
[<script src="js/jquery.min.js"></script>
<script src="js/jquery.lettering.js"></script>
<script src="js/jquery.textillate.js"></script>]

Dan jangan lupa untuk menempatkan Animate.css library di bagian head section.
[<link href="css/animate.css" rel="stylesheet">]

Basic Markup
Untuk mulai menggunakan Textillate.js, Anda harus mendefinisikan class elemen yang Anda ingin animasikan, kemudian menambahkan efek yang Anda pilih ke dalamnya. Harap dicatat bahwa plugin ini bekerja hanya pada teks, sehingga setiap unsur yang bukan teks tidak akan berpengaruh.
Sebagai contoh, kita memiliki elemen yang berisi teks di sini, dan demo class.
[<div class="demo">
    <p>Each of this letter will animate.</p>
</div>
]

Kita sebut nama class dengan Textillate.js inisialisasi, seperti begitu.
[<script>
$(function () {
    $('.demo').textillate();
})
</script>]

Sekarang Teks akan beranimasi.

Textillate.Js Options

Kode Javascript sebelumnya akan berlaku hanya pengaturan animasi standar untuk teks. Untuk mengubahnya, ada dua metode yang dapat Anda gunakan.

1. Pertama, dengan memasukkan HTML Data api seperti berikut ini.
[<div class="demo" data-in-effect="rollIn">
    <p>Each of this letter will animate.</p>
</div>
]
data-in-effect mendefinisikan efek masuk teks. Sedangkan untuk efek keluar, Anda dapat menggunakan data-out-effect api.

2. Anda juga dapat menambahkan opsi ke dalam inisialisasi Javascript Textillate.js seperti kode berikut.
[<script>
$(function () {
    $('.demo').textillate({
        in: {
            effect: 'rollIn'
        }
    });
})
</script>]

Selain efek, ada pilihan lain yang berguna bagi Anda, jika ingin menggunakan nya. Untuk melihat daftar lengkap pilihan lain, Lihat disini.

Kesimpulan

Textillate.js adalah plugin yang sangat berguna terutama ketika Anda ingin menarik pengguna untuk teks yang paling ingin anda umatakan. Hal ini dapat Anda pos disitus, layanan, update, promosi atau apa pun. Dan untuk tambahan lagi, Anda dapat menggabungkan Textillate.js dengan plugin lain seperti FitText.js ditujukan untuk menampilkan teks yang besar.

COMMENTS

Nama

Inspiration Photografer Photoshop Software Video Tutorial Web Design
false
ltr
item
Desain Grafis, Tutorial dan Inspirasi : Membuat Teks Animasi Dengan Textillate.Js
Membuat Teks Animasi Dengan Textillate.Js
https://4.bp.blogspot.com/-clBV_EoosKY/Uz6bDHbN4OI/AAAAAAAAAIU/7_h2bpRJ1Ro/s1600/eyecatch.jpg
https://4.bp.blogspot.com/-clBV_EoosKY/Uz6bDHbN4OI/AAAAAAAAAIU/7_h2bpRJ1Ro/s72-c/eyecatch.jpg
Desain Grafis, Tutorial dan Inspirasi
http://www.javagrafis.com/2014/04/membuat-teks-animasi-dengan-textillatejs.html
http://www.javagrafis.com/
http://www.javagrafis.com/
http://www.javagrafis.com/2014/04/membuat-teks-animasi-dengan-textillatejs.html
true
917012177411184077
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy