Efek Paralaks 3D Mendorong Belajar HTML dan CSS

Efek paralaks mengagumkan. Blog tampil beda, gaya atau ‘style’ halaman pertama kunci orang jatuh cinta! Efek paralaks hanyalah salahsatu permainan menyusun kata, HTML dan CSS, yang sanggup menghasilkan dampak luar biasa. Kalau sudah lihat demo di bawah, baru ‘nyadar.

Kesan 3D di otak adalah proses efek paralaks berkat informasi yang diterima mata kiri dan mata kanan kita. Paralaks diterapkan di kamera digital 3D (2 lensa!) dan TV 3D. Blog ikutan mau 3D juga? (Mau.)

Efek paralaks tanpa HTML dan CSS

Paralaks 2 foto animasi gifMetoda paling gampang yang pasti bisa kita buat sendiri memotret obyek. Potretlah obyek yang sama 2 kali dari arah sudut pandang berbeda. Klik sekali mewakili mata kiri, geser kaki ke samping kanan setelapak, klik sekali lagi mewakili mata kanan. Gabungkan 2 foto jadi 1 gambar animasi berformat .gif. Jadi ‘deh. Tak perlu HTML, tidak CSS. Tidak perlu menunggu, kamera sudah ada di kantong tinggal mulai.

Efek paralaks dengan HTML dan CSS

Banyak demo bagus tidak bisa tampil di sini. Berat. Pakai link (laman baru), ditambah ulasan sedikit.

  1. ‘Meninas’. Lukisan kuno, dengan CSS jadilah 3D. Wow! Nyaris sempurna. ‘Begini cara membuatnya’. Belum faham. Kalau diuraikan kerumitannya mungkin seperti berikut ini.
  2. ‘Paralaks’. Latar belakang-tengah-depan, dihitung cermat agar efek gerak ke kiri-kanan realistik, bahkan juga gerak ke atas-bawah. Rumit, belum faham.
  3. Kalau saja trik di atas dikuasai, ‘3D sepertinya mudah’, bisa ‘dibuat begini’ atau ‘begitu’. Cantik.
  4. ‘Pusing ‘ah, ada yang lebih gampang? Kalau paralaks ditiadakan, ‘ini gampang.’ Iya ‘gitu.
  5. Atau seperti di bawah? Lewatkan mouse di atas angka. Perlahan jadi slideshow/presentasi, cepat jadi animasi!

Animasi Bebek memakai CSS (dan HTML)Tidak jalan! Kenapanya masih dicari. Klik gambar, buka CSSDesk di laman baru. Bergantung browser, angka mungkin belum muncul. Biarkan, buka CSSDesk sekali lagi (laman baru). Ada? Ganti latar warna terang biar kontras. Lewatkan mouse. Horee…!

Belajar HTML dan CSS? Hehe.. memilih menikmati demo dulu. Si Bebek marah-marah disuruh belajar, ‘tak usahlah, se-es-es susah, ha-te-em-el susah!’ Iya Bek jangan marah, belajar kalau betul-betul sudah butuh atau kepepet bikin posting (buka rahasia).
 
😀  (masih belajar html dan css, sehari seutas benang setahun sehelai kain)
 
Cari ilham dari sini (belum tuntas):
Bacaan 1.
Bacaan 2.
Bacaan 3.
Bacaan 4.

Tagged with: , , , , , ,
Ditulis dalam Animasi, Blog HTML dan CSS, Wawasan
2 comments on “Efek Paralaks 3D Mendorong Belajar HTML dan CSS
  1. Si Om berkata:

    wuihh keren nih :d

Silakan komentar, 'like' juga oke

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: