Perbandingan Animasi Css Dan Javascript Pada Web B

TUGAS TEKNOLOGI WEB
PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER
DISUSUN OLEH
NAMA
: RAHMAT HUSSEIN
NIM
: 14/371428/PPA/04590
PROGRAM STUDI S2/S3 ILMU KOMPUTER

JURUSAN ILMU KOMPUTER DAN ELEKTRONIKA
UNIVERSITAS GADJAH MADA
YOGYAKARTA
2015
PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

1. Pendahuluan
Kebanyakan dari pengembang menggunakan jQuery untuk membuat suatu animasi
pada browser. Fade, expand, merupakan contoh yang sederhana. Sebagai project interaktif
membuat lebih agresif dan perangkat mobile semakin berkembang pada layarnya, serta
kinerja yang semakin penting. Flash memudar dan animator berbakat membuat HTML5
untuk melakukan sesuatu yang tidak pernah bisa sebelumnya. Mereka membutuhkan tools
yang lebih baik untuk pengurutan kompleks dan kinerja dengan hasil terbaik. jQuery tidak
dirancang untuk itu. Browser semakin bagus dan mulai menawarkan beberapa solusi.
Solusi yang paling banyak ditawarkan adalah dengan menggunakan animasi CSS.
Perindustrian telah menyuarakan akselarasi hardware dan mobile-friendly selama
bertahun - tahun dalam konferensi yang menggelitik pendengar Animasi berbasis
JavaScript diperlakukan seolah - olah itu kuno dan jelek.
2. CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa
komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan
merupakan bahasa pemograman.Sama halnya styles dalam aplikasi pengolahan kata
seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab,
bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam
beberapa berkas. Pada umumnya CSS dipakai untuk memformat tampilan halaman web
yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel,
ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf,
spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya
CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang
berbeda.
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat
diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parentchild) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang
direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah
CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka
yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS
Contoh file CSS seperti di bawah ini:
1
<html>
<head>
<style type="text/css">
Body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
P
{font-family:"Times New Roman";
font-size:20px;
}
</style>
</head>
<body>
<h1>CSS example!</h1><p>This is a paragraph.</p>
</body>
</html>
3. JavaScript
JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface
pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di
sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox,
Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan
tag SCRIPT.
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape di bawah
nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi
JavaScript. Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan
para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama
LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya
berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java
dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek
rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat
AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang
dibuka dengan tag <script type="text/javascript">.

<script type="text/javascript">
alert("Halo Dunia!");</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari
JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian
awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh
kode seperti berikut:
<script type="text/javascript" src="alamat.js"></script>
Contoh peletakan JavaScript pada html seperti berikut ini.

<html>
<head>
<script type="text/javascript">
...
</script>
</head>
</html>
4. Animasi menggunakan CSS

Menggunakan CSS merupakan cara termudah untuk mendapatkan sesuatu yang
bergerak dalam layar. Di bawah ini adalah beberapa CSS yang akan memindahkan elemen
100px pada sumbu X & Y. Ini dilakukan dengan menggunakan transisi CSS yang diatur
untuk mengambil 500ms. Ketika class move ditambahkan, nilai transform berubah dan
transisi dimulai.
.box {
-webkit-transform: translate(0, 0);
-webkit-transition: -webkit-transform 500ms;
transform: translate(0, 0);
transition: transform 500ms;}
.box.move {
-webkit-transform: translate(100px, 100px);

transform: translate(100px, 100px);}
Gambar 1. Keadaan sebelum kotak diklik
Gambar 2. Keadaan Kotak setelah diklik

Selain durasi transisi ada pilihan untuk easing, yang mana animasi lebih dapat dirasakan.
Pada potongan coding di atas, membuat class CSS yang terpisah bertujuan untuk
mengelola animasi dan dapat juga dipergunakan JavaScript untuk mengalihkan animasi
menjadi on dan off.
box.classList.add('move');
Dengan ini akan membuat keseimbangan yang sangat menarik pada aplikasi. Dengan
mengelola suatu kondisi dengan JavaScript, dengan mudah dalam mengatur class yang
sesuai dengan elemen yang diinginkan untuk menangani animasi pada web browser. Di
event transitioned pada bagian element hanya bisa didukung atau dilakukan pada Internet
Explorer versi terakhir atau versi saat ini. Sementara web browser lainnya juga telah
mendukung event ini sejak beberapa waktu yang lalu.
JavaScript membutuhkan event tersebut pada bagian akhir transisi seperti di bawah ini.
var box =
document.querySelector('.box');box.addEventListener('transitionend',
onTransitionEnd, false);
function onTransitionEnd() {
// Handle the transition finishing.
}
Selain itu pada penggunaan transisi CSS, dapat digunakan animasi CSS, yang mana akan
membuat banyak kontrol terhadap keyframe animasi, durasi dan iterasi pada pergerakan
animasi tersebut.
Sebagai pemula untuk memakai animasi, keyframes merupakan istilah lama dari
tulisan tangan animator. Animator akan membuat frame khusus untuk satu bagian action,
yang disebut sebagai keyframe, yang akan merekam hal-hal seperti bagian yang paling
ekstrim dari beberapa gerakan, dan kemudian mereka akan mengatur tentang menggambar
semua frame individual di antara keyframes. Proses yang sama saat ini dengan animasi
CSS, pada web browser nilai properti CSS harus memiliki poin yang diberikan, dan
mengisi kekosongan yang ada.
Sebagai contoh, membuat animasi kotak sama caranya dengan menggunakan transisi,
dapat ber-animasi tanpa interaksi dari user seperti diklik, dan dengan pengulangan yang
tidak terbatas. Dapat juga mengubah nilai properti pada saat yang sama, seperti di bawah
ini.
/**
* This is a simplified version without
* vendor prefixes. With them included
* (which you will need) things get far
* more verbose!
*/.box {
/* Choose the animation */
animation-name: movingBox;
/* The animations duration */

animation-duration: 1300ms;
/* The number of times we want
the animation to run */
animation-iteration-count: infinite;
/* Causes the animation to reverse
on every odd iteration */
animation-direction: alternate;}
@keyframes movingBox {
0% {
transform: translate(0, 0);
opacity: 0.3;
}
25% {
opacity: 0.9;
}
50% {
transform: translate(100px, 100px);
opacity: 0.2;
}
100% {
transform: translate(30px, 30px);
opacity: 0.8;
}}
Kotak bergerak ke bawah dan ke atas

dengan pengulangan yang tidak terbatas
Gambar 3. Kotak bergerak tanpa harus ada interaksi dari user.

Dengan animasi CSS, dapat ditentukan pada animasi itu sendiri secara independen pada
element yang diinginkan, dan menggunakan properti animation-name untuk memilih
animasi yang diperlukan.
Animasi CSS oleh vendor masih menggunakan prefix, sebenarnya dengan
-webkit- yang digunakan dalam Safari, Safari Mobile, dan Android Browser. Chrome,
Opera, Internet Explorer dan Firefox tanpa prefix. Banyak tools akan membantu dalam
membuat versi prefix dari CSS yang dibutuhkan, memungkinkan untuk menulis versi
unprefixed dalam file source.
5. Animasi menggunakan JavaScript dan Web Animation API
Membuat animasi menggunakan JavaScript lebih kompleks dibandingkan dengan
membuat transisi CSS atau animasi, tetapi JavaScript menyediakan keunggulan lebih
untuk membuat animasi yang baik. Web Animation API digunakan untuk memakai
properti khusus dari CSS, atau membuat efek pada objek.
Animasi JavaScript sangat penting, sebagaimana menulis dalam baris sebagai bagian
dari kode program. Serta dapat men-engkapsulasi kode di dalam sebuah objek yang
diinginkan. Berikut ini adalah kode JavaScript yang akan dibutuhkan untuk membuat
kembali seperti transisi CSS sebelumnya.
var target = document.querySelector('.box');
var player = target.animate([
{transform: 'translate(0)'},
{transform: 'translate(100px, 100px)'}],
500);player.addEventListener('finish', function() {
target.style.transform = 'translate(100px, 100px)';});
Secara default, Web Animation hanya memodifikasi tampilan elemen. Jika menginginkan
objek berada pada lokasi itu berpindah, maka untuk memodifikasi bagian pokok style
dilakukan pada saat animasi selesai bergerak.
Objek bergerak ke bawah dan berhenti
Gambar 4. Animasi kotak bergerak dengan menggunakan JavaScript.

Web Animation API merupakan standar baru dari W3C. Standar ini didukung pada
Chrome dan Opera dan pengembangannya aktif pada Firefox. Dan pengembangannya
disebut dengan polyfill.
Dengan animasi JavaScript, dapat dikendalikan style sebuah element pada setiap
langkahnya. Dengan ini animasi dapat diperlambat pergerakannya, menjeda pergerakan,

menghentikan pergerakan, memgembakalan ke posisi semula dan memanipulasi element
yang diinginkan. Hal ini sangat berguna untuk membangun aplikasi kompleks berorientasi
objek.
6. Kinerja dari CSS dan JavaScrip
Berikut adalah beberapa poin yang perlu diingat:
a. Animasi berbasis CSS, dan Animasi Web di mana didukung secara native, biasanya
ditangani di thread yang dikenal sebagai "compositor thread". Hal ini berbeda dengan
"main thread" browser, di mana styling, tata letak, lukisan, dan JavaScript dijalankan.
Ini berarti bahwa jika browser menjalankan beberapa task dengan cost tinggi di thread
utama, animasi ini dapat terus berjalan tanpa terganggu.
b. Perubahan lain untuk mengubah dan opacity can, dalam banyak kasus, juga ditangani
oleh thread compositor.
c. Jika animasi setiap memicu cat/warna, tata letak, atau keduanya, "main thread" akan
diminta untuk melakukannya. Hal ini berlaku untuk CSS dan animasi berbasis
JavaScript, dan overhead pada tataletak, warna mungkin akan mengesampingkan task
yang berhunbungan dengan eksekusi CSS atau JavaScript.
7. Kesimpulan
Adapun kesimpulan yang dapat diambil adalah sebagai berikut:
a. Gunakan CSS untuk kondisi yang kecil seperti untuk keperluan element pada userinterface. Transisi CSS dan animasi ideal untuk menu atau untuk meunjukkan tooltip.
Untuk pengendali/ kontrol dapat digunakan JavaScript dan untuk animasi tetap dengan
CSS.
b. Gunakan JavaScript ketika dibutuhkan untuk pengendalian animasi yang lebih banyak.
Standar Web Animation API tersedia pada Chrome dan Opera, menyediakan object
real, ideal untuk aplikasi berorientasi objek yang kompleks. JavaScript juga berguna
pada saat animasi berhenti, jeda, gerak lambat atau membalik.
c. Gunakan requestAnimationFrame untuk mengatur seluruh layar. Ini merupakan
keunggulan dari pendekatan JavaScript, tapi akan berguna jika digunakan untuk sebuah
game dan menggambar pada canvas HTML.
8. Referensi
1.
Cascading Style Sheets. Tersedia : https://id.wikipedia.org/wiki/Cascading_Style_Sheets

diakses pada 2 Oktober 2015
10
2.
3.
4.
5.
JavaScript. Tersedia : https://id.wikipedia.org/wiki/JavaScript diakses pada 2 Oktober

2015
Mith Busting : CSS Animation vs JavaScript. Tersedia : https://css-tricks.com/mythbusting-css-animations-vs-javascript/ diakses pada 2 Oktober 2015
CSS vs JavaScript Animations. Tersedia :
https://developers.google.com/web/fundamentals/look-and-feel/animations/css-vsjavascript?hl=en diakses pada 3 Oktober 2015
Animation and Performance. Tersedia : https://css-tricks.com/myth-busting-cssanimations-vs-javascript/ diakses 3 Oktober
11

Perbandingan Animasi Css Dan Javascript Pada Web B

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Perbandingan Animasi Css Dan Javascript Pada Web B

Diunggah oleh

Hak Cipta:

Format Tersedia

TUGAS TEKNOLOGI WEB

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

PROGRAM STUDI S2/S3 ILMU KOMPUTER

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

dibuka dengan tag <script type="text/javascript">.

Contoh peletakan JavaScript pada html seperti berikut ini.

4. Animasi menggunakan CSS

-webkit-transform: translate(100px, 100px);

Gambar 1. Keadaan sebelum kotak diklik

Gambar 2. Keadaan Kotak setelah diklik

/* The animations duration */

the animation to run */

on every odd iteration */

Kotak bergerak ke bawah dan ke atas

Gambar 3. Kotak bergerak tanpa harus ada interaksi dari user.

Objek bergerak ke bawah dan berhenti

Gambar 4. Animasi kotak bergerak dengan menggunakan JavaScript.

langkahnya. Dengan ini animasi dapat diperlambat pergerakannya, menjeda pergerakan,

Cascading Style Sheets. Tersedia : https://id.wikipedia.org/wiki/Cascading_Style_Sheets

JavaScript. Tersedia : https://id.wikipedia.org/wiki/JavaScript diakses pada 2 Oktober

Anda mungkin juga menyukai