Selamat berjumpa kembali sahabat Nemu Kabar, kini kita akan coba belajar teknik-teknik unik efek CSS3. Sesuai dengan judul yang saya sampaikan yaitu bagaimana cara membuat efek slow motion dengan CSS3. Baiklah, coba kita mulai saja belajarnya.
Sebelum belajar, nampaknya kita butuh sedikit sesajen untuk memberikan semangat belajar kita. Coba silahkan sediakan kopi satu gelas terserah yang manis atau pahit, dan sedikit cemilan kalo perlu. Hehehe :)
Baiklah, beberapa hal yang perlu kita siapkan adalah aplikasi, dan perangkat :
1. Computer PC atau Notebook
2. Perangkat dengan instalasi Operating System Windows atau Linux.
3. Aplikasi Text editor, untuk Windows anda bisa gunakan Notepad++, dan untuk Linux bisa menyesuaikan
4. Aplikasi Web Browser, Google Chrome atau Mozilla Firefox.
5. Sesajen.
Selanjutnya coba buka text editor anda, Notepad++ atau yang sejenisnya. Silahkan tulis script di bawah ini terlebih dahulu.
<!DOCTYPE HTML><head><title> Slow Motion CSS3 </title></head><body></body></html>
Di atas adalah script HTML5 yang nantinya akan kita gunakan untuk menampilkan visual desain efek slow motion dengan CSS3.
Silahkan anda sisipkan kode HTML objek di antara atribut <body> dan </body>.
<div id="halaman"><div class="objek"></div></div>
Untuk atribut HTML objek ini nantinya akan kita buat sebagai media simulasi efek slow motion dengan CSS3. Tertera di atribut tersebut adalah variabel halaman sebagai id dan objek sebagai class nya.
Nah, di bawah ini adalah script CSS3 yang akan memerintahkan objek bergerak dengan efe slow motion. silahkan sisipkan script di bawah ini sebelum atribut </head>.
<style>#halaman { width: 900px; height: 900px; background: yellow; margin: 0 auto; }.objek { width: 300px; height: 300px; background: green; margin: 0 auto;-webkit-transition: 1.1s; -moz-transition: 1.1s; -ms-transition: 1.1s; -o-transition: 1.1s; transition: 1.1s; }.objek:hover { width: 600px; background: red; height: 600px; }
</style>
Jika sudah, silahkan untuk menyimpannya dalah halaman desktop saja, dan berikan nama blacknod dengan ekstensi html, contoh blacknod.html.
Setelah proses penyimpanan selesai, silahkan anda testing halaman html anda dengan cara click kanan pilih browser yang anda akan gunakan. Maka halaman yang anda ciptakan tadi muncul di layar monitor anda, dan untuk menjalankan perintah slow motion-nya, silahkan arahkan cursor anda pada objek yang berwarna hijau. Dan apa yang terjadi, jika perintah anda sukses, maka hasil yang ditampilkan adalah apabila cursor anda arahkan di atas kotak berwarna hijau, maka kotak tersebut akan berubah dengan estimasi waktu 1,1 detik dan berubah ukuran dengan warna merah.
Jika rentetan script di satukan akan seperti ini :
<!DOCTYPE HTML><head><title> Slow Motion CSS3 </title>
<style>#halaman { width: 900px; height: 900px; background: yellow; margin: 0 auto; }.objek { width: 300px; height: 300px; background: green; margin: 0 auto;-webkit-transition: 1.1s; -moz-transition: 1.1s; -ms-transition: 1.1s; -o-transition: 1.1s; transition: 1.1s; }.objek:hover { width: 600px; background: red; height: 600px; }</style>
</head><body><div id="halaman"><div class="objek"></div></div></body>
</html>
Penjelasan script.
Silahkan anda cermati script di atas, mulai dari baris pertama hingga baris terakhir :
- Pada baris pertama adalah atribut yang menandakan bahwa program yang anda gunakan adalah HTML versi 5.
- Baris ke dua menyatakan bahwa atribut tersebut adalah bagian kepala stukural HTML yang disepakati oleh internasional.
- Selanjutnya ada atribut title, ini yang difungsikan sebagai atribut terpenting tentang penamaan halaman website anda. Selain itu pemanfaatannya sangat penting dalam hal indexing di search enginee.
- Di bawahnya ada atribut style, ini difungsikan sebagai atribut atau tag yang di dalamnya bisa anda sisipkan script CSS (Cascading Style Sheet).
- Pada bagian ini kita akan menjelaskan sedikit tentang CSS, karena pada bagian ini kita sisipkan CSS yang memili fungsi berbeda-beda. Diantaranya adalah tanda pagar kemudian diikuti kata halaman tanpa spasi (#halaman). ini adalah sebuah variabel yang di deklarasikan dengan kriteria-kriteria yang ada di dalam tanda kurung kurawal ("{"). Pada variabel halaman jelas ditentukan ukuran, posisi dan warna. Begitupun juga pada variabel objek. Selanjutnya ada variable yang diikuti sub variable yaitu .objek:hover. Ini maksutnya adalah jika objek yang dideklarasikan oleh objek disorot oleh kursor, maka eksekusi akan dijalankan.
- Di situ adalah sebuah tag atau atribut penutup dari atribut style di atasnya.
- Atribut /head juga sama fungsinya sebagai pentup atribut di atasnya dengan nama yang sama.
- Body dan div difungsikan untuk menampilkan objek yang ditentukan.
- Div id, ini ditentukan berdasarkan pada variable yang dijelaskan di CSS, jika pada variable CSS diawali dengan tanda pagar (#), maka penanggilannya menggunakan clausa ID, jika diawali dengan tanda titik, maka klausa pemanggulan menggunakan CLASS.
- Terakhir sama, yaitu atribut penutup.
Nah, dari penjelesan ini apakah semua sudah memahaminya? Semoga ini bermanfaat bagi kita semua, apabila ada error atau script anda tidak berjalan dengan normal, silahkan anda bertanya saja pada kolom komentar.
Selamat belajar dan lakukan improvisasi sesuka hati anda sehingga ilmu anda makin berkembang. Salam blogger.
Tidak ada komentar:
Posting Komentar