Perbandingan Animasi Css Dan Javascript Pada Web b

  • View
    8

  • Download
    0

Embed Size (px)

DESCRIPTION

teknologi web

Text of Perbandingan Animasi Css Dan Javascript Pada Web b

PERBANDINGAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

TUGAS TEKNOLOGI WEB

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

DISUSUN OLEH

NAMA

: RAHMAT HUSSEINNIM

: 14/371428/PPA/04590PROGRAM STUDI S2/S3 ILMU KOMPUTER

JURUSAN ILMU KOMPUTER DAN ELEKTRONIKA

UNIVERSITAS GADJAH MADA

YOGYAKARTA

2015

PENGGUNAAN ANIMASI CSS DAN JAVASCRIPT PADA WEB BROWSER

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.

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 (parent-child) 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:

Body

{

background-color:#d0e4fe;

}

h1

{

color:orange;

text-align:center;

}

P

{font-family:"Times New Roman";

font-size:20px;

}

CSS example!This is a paragraph.

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 yang dibuka dengan tag .

alert("Halo Dunia!");

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 harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

Contoh peletakan JavaScript pada html seperti berikut ini.

...

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 diklikSelain 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; }}

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.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 dilakuka