Saturday, October 10, 2015
Advertisement
Advertisement
Memahami dan mencoba beberapa Effect JQuery
Sering kali kita melihat sebuah website dengan loading progress yang bagus dan menawan, contoh saja website olx.co.id yang menggunakan loading progress sebagai penanda ke pengunjung kalau ada data yang masih di Request dan lihat pada halaman pencarinya, sudah melihat ? .
Apa fungsi Loading Progress ?
- Fungsinya menandakan kepada pengunjung bahwa elemen yang ada di halaman itu sudah terload atau belum. Biasanya effect Loading Progress diterapkan pada proses Ajax ataupun pada saat halaman diload / dimuat pada waktu bersamaan .Tergantung juga dengan si pembuat koding sendiri.
Banyak sekali effect loading progress yang ada di dunia maya ini, untuk itu indonesiakode sekarang hanya membagikan sebuah loading progress milik Pace yang dimana kita hanya memanggil script dan cssnya saja tanpa memanggil dengan function ataupun selector dkk . Pada sebagian orang mungkin belum mengetahuinya dan dari beberapa orang juga pastinya sudah ada yang menerapkanya pada website buatan mereka .
Pace loading progress ini memungkinkan anda mempercantik tampilan / effect loading web menjadi lebih estetik dan tampak lebih menawan.
Jujur saja, saya menggunakan effect ini pada saat adanya pembuatan web desktop dan mobile. Mengapa ? dikarenakan simpel, elegan dan sangat mudah digunakan.
Berikut cara pemanggilan effectnya :
Penulisan kode effect Pace
<head> <link href="path/pace.min.css"/> </head> <body> // Konten <script type="text/javscript" src="path/pace.min.js"></script> </body>
Taruh file CSSnya pada akhir kode </head> dan JS taruh pada akhir kode </body> . Untuk penambahan effect Pace yang lain, bisa anda kunjungi website resminya di http://github.hubspot.com/pace/docs/welcome/ .
Kenapa kita tidak menggunakan function atau pemanggilan selector dan semacamnya ? Dari sinilah keunikanya, kita hanya menambahkan script JS dan CSSnya saja tanpa adanya skrip yang aneh - aneh. Baca : Memahami apa itu Selector pada JQuery .
Untuk mengganti warna pada effect Spinner dan Loader Pacenya, silahkan edit pada area file pace.min.css yang sudah anda download .
Bisa anda terapkan di Blog Personal dan cara penerapanya juga sama seperti penulisan kode sebelumnya .
Tidakkah anda mencoba sekarang ?
Semoga bermanfaat .
Advertisement
Advertisement