Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.
Monday, October 31, 2011
JavaScript Efek Teks Pelangi
Pertama-tama masuklah ke halaman tata letak elemen halaman, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode ini, kemudian letakkan di dalam formulirnya:
<style type="text/css">
#highlight{font:bold 50px Impact,Arial,Sans-Serif;}
</style>
<script language="javascript" type="text/javascript">
var teks="EFEK PELANGI" // teks Anda di sini
var speed=20 // atur kecepatan perubahan warna
if (document.all||document.getElementById) {
document.write('<span id="highlight">' + teks + '</span>')
var storetext=document.getElementById? document.getElementById("highlight") :
document.all.highlight
} else document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext() {
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change() {
if (seq==6) {
b--
if (b==0)
seq=1
}
if (seq==5) {
r++
if (r==12)
seq=6
}
if (seq==4) {
g--
if (g==0)
seq=5
}
if (seq==3) {
b++
if (b==12)
seq=4
}
if (seq==2) {
r--
if (r==0)
seq=3
}
if (seq==1) {
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect() {
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script>
Ganti kode yang Saya beri warna merah dengan teks yang kamu inginkan, atur juga kecepatan perubahan warna pada kode yang Saya beri warna biru. Simpan perubahan dan lihat hasilnya"
JQuery .addClass(), .removeClass() dan .toggleClass()
.addClass() digunakan untuk menambahkan class pada elemen berdasarkan perintah.
.removeClass() digunakan untuk membuang class pada elemen sesuai perintah.
.toggleClass() merupakan gabungan antara perintah .addClass() dan .removeClass() yang bertugas untuk menambah dan menghilangkan class secara bergantian.
Contoh Penerapan Manipulasi .addClass() dan .removeClass()
Manipulasi ini secara umum digunakan untuk mempengaruhi sebuah objek berdasarkan CSS. Misalnya, ada sebuah objek berwarna hitam, dan kamu ingin objek tersebut berubah warna menjadi hijau setelah sebuah tombol diklik, dan akan mengembalikan warnanya menjadi seperti semula ketika sebuah tombol khusus diklik. Maka kamu harus menuliskannya seperti ini:
Elemen Objek
<button class='ubah'>Ubah menjadi Hijau</button>
<button class='remove'>Kembalikan Warna</button>
<div id='area'>Ini Ibu Ani</div>
Jika hanya kode di atas saja yang kamu tuliskan, maka tidak akan terjadi apa-apa pada hasil pekerjaanmu. Mengingat di sini akan terjadi peristiwa penambahan dan penghilangan class='hijau' pada elemen sasaran, maka kamu juga harus menambahkan deklarasi CLASS hijau tersebut dalam CSS, walaupun secara visual tidak ada satupun elemen yang memiliki class='hijau'. Dengan begitu, saat sebuah elemen mengalami penambahan class, kode .hijau{background:green;padding:50px;} baru akan terpanggil:
Perlu diingat bahwa manipulasi .addClass() dan .toggleClass() sama sekali tidak akan mengubah class yang tertanam pada elemen asli. Sebagai contoh, Saya akan membuat elemen dengan atribut yang bukan berupa ID, melainkan CLASS seperti ini:
Maka peristiwa yang akan terjadi adalah bukan mengubah class='target' menjadi class='hijau', melainkan hanya akan menyisipkan class hijau di samping class target seperti ini:
Sulitnya Menciptakan Efek Bayangan Inset pada Teks
Sulit, karena CSS text-shadow inset itu tidak ada. Berbeda dengan CSS Box-Shadow yang bisa menciptakan efek bayangan inset dengan mudah hanya dengan menambahkan kata inset di depan nilai offset seperti ini:
CSS Text-Shadow tidak bisa begitu. Dan dalam beberapa kasus, kita terpaksa menuliskan deklarasi text shadow dengan cara mengatur warnanya sesuai logika perspektif benda cekung seperti ini:
Setiap orang juga pasti setuju bahwa hasil tampilan teknik di atas sama sekali tidak menciptakan efek bayangan inset pada teks, melainkan hanya menciptakan efek bevel cekung. Yang kita inginkan di sini adalah bayangan, bukan jejak! Tapi bagaimana? Text shadow inset itu tidak ada!
Oke, akan Saya ajarkan tekniknya di sini. Caranya memang sedikit rumit, dan mungkin membutuhkan waktu beberapa jam untuk memahami logikanya. Jadi perhatikan baik-baik.
Seperti yang kita ketahui bahwa CSS Bayangan mempunyai kemampuan untuk menciptakan jumlah bayangan lebih dari satu lapisan hanya dalam satu properti. Maka itulah modal pertama kita.
Kita buat tiga buah layer dengan CSS Text-Shadow. Layer pertama adalah teks asli, layer ke dua adalah bayangan lapisan pertama, dan layer ke tiga adalah bayangan lapisan ke dua:
Sampai di sini, kita bisa melihat bahwa layer ke dua tampak muncul sedikit karena posisinya telah bergeser, sementara layer ke tiga tidak tampak, karena posisinya sejajar dengan teks asli di depannya.
Sekarang kita konversi warna kuning pada teks untuk memperlihatkan layer ke tiga di belakangnya dengan menggunakan kode warna RGBA (konversi di sini). Atur tingkat transparasi warna sesuai kehendakmu, tapi Saya sarankan tetap di bawah 0.5:
Sekarang layer ke tiga tampak sedikit terlihat di belakang teks yang telah dibuat tembus pandang.
Tambahkan tingkat blur pada layer ke dua agar kita bisa menciptakan efek bayangan yang realistis:
Sampai di sini, efek bayangan inset sudah mulai terlihat. Namun ada satu hal yang cacat pada sesi ini:
Bayangan keluar dari area
Terdapat blur bayangan yang keluar dari area yang tidak seharusnya. Mau bagaimana lagi, yang sedang kamu lakukan sekarang memang bukan menciptakan efek bayangan inset yang sesungguhnya, melainkan hanya mengakali efek bayangan yang ada agar efek bayangan inset seolah-olah terbentuk. Tidak ada cara khusus untuk memotong bayangan yang berlebih tersebut, jadi satu-satunya cara adalah dengan menyamakan warna background dengan warna layer ke dua:
CSS Sprite pada dasarnya hanyalah sebuah metode menggabungkan beberapa gambar latar menjadi satu. Hal ini bertujuan untuk menghemat waktu pemanggilan data. Misalnya begini: Anda akan merancang tiga buah tombol yang berbeda, perbedaan tersebut tentunya akan menimbulkan kebutuhan gambar latar yang berbeda-beda pula. Secara normal, inilah yang akan Anda lakukan:
Akan ada begitu banyak file gambar yang harus dipanggil. Pada ilustrasi di atas, sebuah peramban harus memanggil gambar sebanyak tiga kali! Dan itu belum termasuk latar untuk :hover dan :active
/* global button styles */
.button {}
/* default state */
.button-1 {background:transparent url('img/tombol-1.jpg') no-repeat 50% 50%}
.button-2 {background:transparent url('img/tombol-2.jpg') no-repeat 50% 50%}
.button-3 {background:transparent url('img/tombol-3.jpg') no-repeat 50% 50%}
/* hover state */
.button-1:hover {background-image:url('img/button-1_hover.jpg')}
.button-2:hover {background-image:url('img/button-2_hover.jpg')}
.button-3:hover {background-image:url('img/button-3_hover.jpg')}
/* active state */
.button-1:active {background-image:url('img/button-1_active.jpg')}
.button-2:active {background-image:url('img/button-2_active.jpg')}
.button-3:active {background-image:url('img/button-3_active.jpg')}
Jika semuanya kita hitung, maka total permintaan HTTP adalah sebanyak 9 kali hanya untuk tiga tombol saja! Dan itu jelas akan memperlambat waktu akses halaman web.
Satu lagi hal yang paling penting adalah bahwa saat sebuah elemen belum dikenai event :hover atau :active, maka gambar latar untuk efek :hover dan :active pada elemen tersebut tidak akan terpanggil. Jika itu terjadi, maka ketika pertama kali Anda mendekatkan pointer mouse Anda pada sebuah tombol dengan struktur desain seperti di atas, hal yang akan terjadi adalah Anda akan mengalami saat-saat “kehilangan background”. Sebuah saat dimana Anda tidak akan melihat apapun kecuali sebuah ruang kosong tak berwarna pada elemen yang sedang Anda sentuh. Hingga ketika Anda melakukan aksi hover untuk yang ke dua dan ke tiga kali barulah gambar latar akan termuat dan terlihat:
Solusi: Gabungkan Semua Gambar Latar
Yang terpenting, saat menggabungkan bahan-bahan berupa gambar, ketahui terlebih dahulu ukuran tinggi dan lebar gambar secara teliti. Anda akan sangat membutuhkannya nanti.
Nah, jika sudah, sekarang Anda tinggal membuat deklarasi master untuk memanggil gambar latar tersebut. Sisanya tinggal mengubah posisi latar saja sesuai dengan masing-masing jenis tombol:
/* Memanggil gambar latar sekali saja pada kelas utama */
.btn {
display:inline-block;
background:transparent url('img/sprites.jpg') no-repeat 0 0;
width:119px; /* Lebar harus sama dengan ukuran gambar tunggal */
height:29px; /* Tinggi harus sama dengan ukuran gambar tunggal */
cursor:pointer;
font:normal normal 0/0 a;
color:transparent;
text-shadow:none;
}
/*
Spesifikasi dimulai dari sini.
Karena Anda telah menggunakan gambar-gambar yang telah digabungkan,
maka yang perlu Anda lakukan hanyalah mengubah posisi gambar saja
*/
.btn-ok {background-position:0 0}
.btn-cancel {background-position:-119px 0}
.btn-browse {background-position:-238px 0}
.btn-ok:hover {background-position:0 -29px}
.btn-cancel:hover {background-position:-119px -29px}
.btn-browse:hover {background-position:-238px -29px}
Tombol-tombol di atas adalah hasil akhir dari pekerjaan ke dua. Secara kasat mata, ketiga tombol di atas tampak menggunakan enam buah gambar latar (tiga gambar untuk kondisi normal dan tiga gambar lagi untuk efek hover). Tapi kenyataannya ketiga tombol tersebut hanya menggunakan satu gambar latar yang sama. Begitu pula saat event :hover, saat itu Saya hanya mengangkat posisi latarnya saja ke atas, sehingga gambar latar yang tersembunyi di bawahnya akan tampak. Gerakannya memang cepat, jadi efek pengangkatannya tidak terlihat.
Mungkin akan lebih mudah dimengeti jika Saya perlambat gerakannya dengan CSS Transisi:
Teknik CSS Sprite tidak bisa digunakan untuk duplikasi gambar latar (CSS background-repeat). Sebenarnya masih bisa, tapi hanya sebatas satu sumbu saja, repeat-x atau repeat-y.
CSS Text Shadow Realistis dengan Satu Sumbu Offset
Yang jadi masalah di sini adalah bahwa saat kita menuliskan baris-baris bayangan dengan warna yang sama pada deret bayangan CSS Text Shadow, maka hasil tampilan menjadi tidak begitu menarik. Bisa dibilang tampak seperti kartun. Di sini yang kita inginkan adalah realistis, nyata, luar biasa dan maknyus! Tapi itu jelas tidak akan mudah. Di sini mau tidak mau kita harus bermain dengan logika perspektif benda tiga dimensi, yang secara umum akan tampak semakin gelap pada daerah yang semakin jauh dari pandangan mata kita:
Level warna text-shadow
Sampai di sini mulai mengerti? Kita harus membuat baris-baris bayangan dengan nilai offsetsumbu-Y yang ditambahkan secara bertahap bersamaan dengan peningkatan level warnanya. Level 1+ adalah level dengan warna yang lebih terang dibandingkan warna teks (Level 1). Hal ini dimaksudkan untuk menciptakan efek berkilau pada tulisan:
Menggunakan Dua Level Warna Saja (Kurang Sempurna)
Pertama-tama masuklah ke halaman Tata Letak, kemudian tambahkan sebuah elemen halaman HTML/JavaScript. Salin kode di bawah ini, kemudian letakkan di dalam formulirnya:
<style type="text/css">
#gb {
position:fixed;
top:50px;
z-index:1000;
}
* html #gb {position:relative;}
.gbtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://hompimpa.googlecode.com/files/tabs%23FF13E5.png') no-repeat;
}
.gbcontent {
float:left;
border:2px solid #FF13E5;
border-right-width:15px;
background:#F5F5F5;
box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
-moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
-webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8);
opacity:0.7;
filter:alpha(opacity=70);
}
</style>
<script type="text/javascript">
function showHideGB() {
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf) {
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf) {setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
LETAKKAN KODE BUKU TAMU DI SINI
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
Klik Simpan, maka kamu akan mendapatkan hasil seperti ini:
Untuk tema yang lebih beragam, kamu bisa mengganti kode yang Saya beri garis bawah dengan URL di dalam linkPilih!. Klik kanan pada link tersebut kemudian pilih Copy Link Location. Gunakan URL tersebut untuk menggantikan URL yang Saya beri garis bawah. Salin juga kode warna di bawahnya, kemudian gunakan untuk menggantikan kode yang Saya beri garis bawah:
Cara Kilat Menciptakan Efek Transisi pada Semua Elemen
Dibandingkan menuliskan deklarasi CSS Transisi pada elemen-elemen tertentu, untuk beberapa hal Saya lebih suka menuliskan efek transisi pada semua elemen seperti ini:
* {
-webkit-transition: all 0.26s ease-out;
-moz-transition: all 0.26s ease-out;
-o-transition: all 0.26s ease-out;
transition: all 0.26s ease-out;
}
Nah, untuk selebihnya, jika ingin membuat efek transisi yang berbeda pada elemen yang lebih spesifik bisa menggunakan metode terpisah. Tergantung bagian mana yang ingin dibuat berbeda. Misalnya, kamu ingin membuat efek transisi dengan durasi yang lebih lama pada elemen berupa gambar, maka kamu tinggal menambahkan deklarasi durasi transisi yang berbeda saja pada selektor img{} sehingga hasilnya menjadi kurang lebih seperti ini:
Pernahkah kalian melihat elemen yang tampak saling bertumpukan, melayang, atau tampak keluar dari garis batas? Itu semua dibuat menggunakan CSS Position. Ada empat posisi elemen dalam CSS: Static, Relative, Absolute dan Fixed. Selain deklarasi posisi, terdapat pula beberapa properti yang biasanya dituliskan bersama dengan deklarasi posisi seperti top, right, bottom, left dan z-index.
top, right, bottom dan left adalah koordinat posisi. Saat kita menambahkan nilai koordinat pada posisi yang sesungguhnya, maka elemen akan bergeser sesuai dengan besar nilai koordinat.
top, right, bottom dan left berbeda dengan margin-top, margin-right, margin-bottom dan margin-left. Nilai margin difokuskan kepada jarak elemen terhadap elemen lainnya, sedangkan nilai koordinat lebih difokuskan kepada offset posisi elemen dari tempat asalnya.
z-index adalah urutan tumpukan. Saat kita mendeklarasikan position:absolute, maka kemungkinan yang terjadi adalah elemen akan bertumpuk di sebelah atas elemen atau di bawah elemen. Jika yang terjadi adalah yang ke dua, maka untuk mengangkatnya, kita harus mendeklarasikan z-index dengan nilai yang lebih besar dari 1.
Static
Ini adalah posisi sebenarnya. Mendeklarasikan position:static sama saja dengan tidak mendeklarasikan CSS Posisi.
Relative
Mendeklarasikan position:relative pada elemen secara kasat mata tidak akan mengubah apapun, namun kita bisa menerapkan koordinat posisi dan urutan tumpukan pada tipe posisi ini.
Absolute
Mendeklarasikan position:absolute pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lainnya.
Fixed
Mendeklarasikan position:fixed pada elemen akan benar-benar memutuskan aliran elemen dari tempat asalnya dan membuat elemen bertumpuk dengan elemen lain. Kelebihan penerapan posisi ini adalah akan membuat elemen tampak melayang dan tidak terpengaruh gerakan scroll bar.
Respon Peramban
Harap perhatikan juga bahwa respon peramban terhadap penerapan koordinat posisi relative pada elemen akan berbeda dengan posisi absolute dan fixed. Mendeklarasikan koordinat pada posisi relative akan menggeser elemen berdasarkan posisi asalnya, berbeda dengan posisi absolute dan fixed yang akan dipindahkan posisinya berdasarkan koordinat layar peramban. Seperti ini:
Terkadang, saat kita membuat posting auto read-more, artikel halaman statis yang seharusnya tidak ikut terringkas justru ikut terringkas. Andaikan tautan read-more masih bisa diklik dan membawa kita pada halaman penuh sebenarnya tidak masalah, tapi yang ini tidak sama sekali. Meski sudah diklik sampai seribu kalipun, ringkasan posting tetap tidak akan menghilang.
Masalah Bebuyutan
Masalah ini sangat umum terjadi pada para pemakai template blogspot lama. Karena saat itu halaman statis belum dirilis oleh Blogger, maka tag kondisional halaman statispun belum ada. Nah, untuk mengatasi masalah itu, caranya cukup dengan mengubah susunan kode posting dengan cara menambahkan tag kondisional halaman statis.
Pemecahan Masalah
Pertama-tama masuklah ke halaman editor HTML template, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
Plugin Easing jQuery digunakan untuk memanipulasi langkah animasi dalam jQuery yang biasanya didominasi oleh easing 'linear' dan 'swing'. Dengan menerapkan easing, maka langkah-langkah animasi dapat dimanipulasi sedemikian rupa sehingga menjadi jauh lebih hidup.
Sebagai gambaran awal, kamu bisa melihat contoh modelnya di sini:
Seperti yang telah kamu lihat, bahwa efek animasi pada contoh ke dua tampak jauh lebih hidup dibandingkan dengan contoh pertama. Pada contoh ke dua yang Saya buat, Saya memakai easing easeInBack untuk efek penutupannya dan easeOutBounce pada efek pembukaannya.
Pembagian langkah easing (untuk saat ini) dapat dibagi menjadi tiga, yaitu easeIn, easeOut dan easeInOut. Setelah itu akan diikuti dengan tipe easingnya.easeIn cenderung memulai animasi dari klimaksnya terlebih dahulu, berbeda dengan easeOut yang akan memunculkan klimaks animasi pada akhir waktu. easeInOut akan memunculkan klimaks animasi pada awal dan akhir waktu.
Terdapat 10 tipe percepatan dalam paket easing 1.3 yaitu Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Elastic, Back dan Bounce. linear dan swing sebenarnya juga termasuk tipe easing, namun meski tanpa menambahkan plugin easing jQuery, efek easing linear dan swing tetap bisa dibuat karena kedua tipe easing tersebut merupakan bawaan dari jQuery. Jika semua tipe dan langkah easing digabungkan, maka akan menghasilkan 32 macam easing seperti ini:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
Untuk memahami efeknya secara langsung, lihat demo-demo langkah easingnya di sini:
Pada efek .animate(), nama easing tidak bisa diterapkan secara langsung , jadi kamu harus menggunakan metode yang ke dua untuk menerapkan easing pada efek .animate().
Pembaharuan: 27 Februari 2012
Easing pada .animate() sudah bisa diterapkan menggunakan cara biasa:
Menciptakan Efek Bevel dengan Modal Border dan Outline
Pembuatan efek bevel dengan border dan outline ini jauh lebih ringan dibandingkan dengan pembuatan efek bevel dengan border dan CSS bayangan, karena di sini kita hanya perlu untuk menuliskan properti background-color, border-top dan outline saja untuk menciptakan efeknya:
Sebenarnya ada begitu banyak jenis event dalam JQuery, namun di sini Saya hanya ingin memperkenalkan event-event yang paling umum dan paling banyak digunakan untuk memicu efek animasi saja. Sedangkan untuk event-event yang lainnya suatu saat akan Saya jelaskan secara terpisah apabila Saya telah mendapatkan contoh penerapan yang tepat.
Secara umum, penulisan event dalam JQuery dapat dituliskan seperti ini:
Pemicu: adalah elemen yang akan menimbulkan aksi apabila dikenai event
.nama_event: adalah event (perintah) yang akan diberikan pada elemen pemicu
Peristiwa: adalah peristiwa yang akan terjadi apabila pemicu telah mendapatkan perintah.
Sebagai contoh, kita buat sebuah skenario: “Ada sebuah tombol yang mengandung atribut berupa class='subjek' dan sebuah area yang mengandung atribut id='area'. Apabila tombol tersebut diklik, maka area akan memudar perlahan kemudian menghilang (fadeOut)”
Jika dituliskan dalam bahasa JQuery, maka akan menghasilkan kalimat seperti ini:
Digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.
Digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari atas subjek/pemicu baik pada elemen induk maupun anak-anak elemennya.
Mirip dengan .mouseover(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kedatangan pointer mouse di atas subjek/pemicu. Namun saat pointer mouse sudah memasuki elemen induk (.mouseover()) dan kemudian pointer mendatangi anak-anak elemen di dalamnya, itu tidak masuk hitungan .mouseenter() untuk yang ke sekian kalinya.
Mirip dengan .mouseout(), digunakan untuk menimbulkan peristiwa berdasarkan aksi kepergian pointer mouse dari subjek/pemicu. Namun saat pointer mouse meninggalkan sebuah anak elemen (dan masih dalam elemen induk), itu tidak bisa disebut sebagai .mouseleave(), hingga ketika pointer benar-benar telah keluar dari elemen induk, barulah bisa disebut sebagai .mouseleave() (.mouseleave() terhadap elemen induk)
.hover() merupakan gabungan antara event.mouseenter() dan .mouseleave(). Susunan event.hover() juga merupakan penggabungan antara .mouseenter() dan .mouseleave() seperti ini:
Digunakan untuk menimbulkan peristiwa berdasarkan aksi scroll pada area yang menjadi subjek/pemicu peristiwa (dikhususkan pada area-area yang mengandung scroll bar).
Selain menuliskan angka secara apa adanya dalam nilai properti animasi, sebuah sistem animasi dalam JQuery juga dapat dituliskan dengan nilai relatif. Hal ini akan menciptakan efek kumulatif (bertambah/berkurangnya nilai sedikit demi sedikit) untuk menciptakan langkah-langkah objek secara bertahap melalui perintah yang diberikan berkali-kali.
Di sini Saya membuat dua buah tombol dan sebuah area target. Tombol pertama digunakan untuk memberikan perintah "bergerak ke kanan!" sedangkan tombol yang ke dua digunakan untuk memberikan perintah "bergerak ke kiri!"
Mungkin kamu tidak tahu bahwa konsep animasi kumulatif ini sebenarnya juga bisa dijadikan sebagai cikal-bakal terciptanya sebuah slider JQuery. Dengan sedikit kreativitas, sebuah slider sederhana dapat dibuat dengan menerapkan animasi kumulatif ini:
Sasaran: adalah objek yang akan dikenai perintah Properti: properti CSS (dalam sintaks JQuery) yang akan dianimasikan Value: nilai properti. Durasi: adalah kecepatan aksi. Nilainya bisa berupa milidetik (misal: 1500, 2000) atau 'slow', 'normal' dan 'fast'.
Contoh Penerapan Efek .animate() untuk Nilai Bertipe Numerik
Kita buat sebuah tombol dan sebuah area target. Tombol yang kita buat berfungsi untuk menganimasikan elemen:
Kerangka
<button class='animasi'>Memanjang!</button>
<div id='target'>
<!-- Konten di Sini -->
</div>
Contoh Penerapan Efek .animate() untuk Nilai Bertipe Warna
Seperti yang pernah Saya katakan di BAB sebelumnya, bahwa efek animasi warna bisa dibuat dengan syarat menambahkan plugin berupa jquery.animate-colors-min.js yang dipasang bersama JQuery. Untuk itu, hal pertama yang harus kamu lakukan adalah memasang script jquery.animate-colors-min.js di dalam template:
Widget ini adalah elemen-elemen terjemaham Google yang sudah sangat-sangat Saya sederhanakan. Dikhususkan untuk Anda yang tidak ingin memperlambat loading blog karena hadirnya scriptGoogle Translate yang terpasang.
Cukup salin baris tautan ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript:
.animate() digunakan untuk mengubah nilai CSS suatu elemen dari keadaan normal menjadi keadaan yang lainnya dengan efek transisi yang bisa diatur kecepatannya.
Properti-properti dalam .animate() memiliki sedikit perbedaan, misalnya tentang hilangnya simbol dash (-) yang biasa digunakan untuk memisahkan nama properti dalam CSS. Sebagai gantinya, huruf besar diterapkan pada setiap pemisahan namanya seperti ini:
Properti-Properti yang Bisa Dianimasikan
Properti dalam CSS
Properti dalam JQuery
background-position
border-width
border-bottom-width
border-left-width
border-right-width
border-top-width
border-spacing
margin
margin-bottom
margin-left
margin-right
margin-top
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
height
width
max-height
max-width
min-height
max-width
font
font-size
bottom
left
right
top
letter-spacing
word-spacing
line-height
text-indent
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
Selain properti dalam CSS, properti-properti nonCSS dalam JQuery juga ada yang dapat dianimasikan seperti scrollTop dan scrollLeft.
Nilai properti CSS yang bisa diubah adalah nilai bertipe angka, baik berupa nilai dengan satuan piksel maupun persentase.
Untuk tipe string seperti warna huruf, warna latar belakang dan warna border yang memiliki nilai berupa bukan-angka tidak bisa dianimasikan. Namun sejak dirilisnya JQuery 1.2, properti-properti bernilai warna akhirnya juga bisa dianimasikan, dengan cara menambahkan plugin berupa jquery.animate-colors-min.js bersama JQuery yang sudah terpasang.
Warna-warna yang bisa dianimasikan dapat berupa HEX (misal: #123456), RGB (misal: rgb(0, 0, 0)), RGBA (misal: rgba(0, 0, 0, 0.4)) dan Nama Warna (misal: black).
Properti-Properti Bernilai Warna yang Dapat Dianimasikan
Properti dalam CSS
Properti dalam JQuery
color
background-color
border-color
border-bottom-color
border-left-color
border-right-color
border-top-color
outline-color
color
backgroundColor
borderColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
outlineColor
Selain nilai numerik, masing-masing properti dapat mengambil string 'show', 'hide', dan 'toggle'. Cara pintas ini memungkinkan untuk menciptakan animasi menampilkan/menyembunyikan elemen dengan mempertimbangkan keadaan tampilan. Nilai dengan satuan em juga sudah dapat dianimasikan.
