Efek Paralaks Bisa Menghasilkan Kesan 3D

Efek Paralaks Untuk 3DBaru tahu efek paralaks ternyata bisa menghasilkan kesan 3D atau 3 dimensi. Salahsatu aplikasi adalah memanfaatkan sebagai header atau dekorasi halaman depan situs atau blog. Seperti apa? Seperti ini, Efek paralaks menghasilkan kesan 3D.

Kita coba dekati tampilan cantik tadi menggunakan program editor HTML-CSS online ‘CSSDesk’. Masih ingat? Klik ini CSS Desk Online (laman baru, biar bisa disimak bersama).

Sudah terbuka? Asyik sudah ada program HTML dan CSS. Betul, tinggal mengisi. Isikan di ruang CSS dengan berkas gambar yang sesuai (ada 3):

  • ‘images/background.png’ dengan ini background
  • ‘images/midground.png’ dengan ini midground
  • ‘images/foreground.png’ dengan ini foreground

Klik kanan di link, klik ‘Link Copy Location’ untuk menyalin gambar lalu isikan ke CSS. Begitu diisi, gambar langsung ditampilkan di ruang sebelah.

‘Ah mana, gambarnya tidak ada. Terkadang mau terkadang tidak. Program gratis. Kita ulang membuka program CSSDesk yang masih ‘segar’ cssdesk.com (laman baru).

Salin ulang kode HTML dan CSS di editor sebelumnya, isikan berkas gambar seperti tadi (eeh, ..sudah disalinkan!). Kalau semua berjalan lancar tampil gambar seperti ini,
Paralaks Screenshot
Ada!

Sip. Sekarang bagian yang paling menarik. Sembunyikan ruang HTML-CSS dengan klik tanda segitga kecil di atas. Gambar kita jadi utuh. Ubah ukuran layar dengan menggeser-geser sisi layar situs editor.

Horee.. bintang ‘Scorpio’ di latar depan bergerak lebih cepat dibandingkan bintang di latar tengah (dan belakang). Inilah paralaks. Coba juga menggerakkan di arah vertikal.

Belum sebagus contoh aslinya. Untuk bisa begitu perlu program tambahan. Paling tidak sekarang kita sudah lebih pintar, tahu efek paralaks bisa menghasilkan kesan 3D, tahu trik cara membuatnya!
 
:D  (hayo cari rasi bintang kalajengkingnya!)


Ini ‘scorpio’nya! Ada capit ada ekor; rasi bisa dilihat jelas dengan mata telanjang di belahan bumi selatan seperti Indonesia kalau, …malam, dan ‘ndak ‘ujan!

 

Tagged with: , , ,
Ditulis dalam Blog HTML dan CSS, Blog Tips dan Trik
2 comments on “Efek Paralaks Bisa Menghasilkan Kesan 3D
  1. Ni Made Sri Andani mengatakan:

    Saya suka ini. Tapi kok ya.. selalu bingung kalau sudah berusrusan dengan yang begini-negini.Mungkin kurang giat mencoba barangkali ya Mas..

    • riosetoblog mengatakan:

      he.he.. mbak Made senang seni ya? Ikuti ‘aja dulu lama-lama tahu. Posting biasakan deh bikin di editor ‘teks’ (itu ‘html’ lho, juga seni, tapi tanpa css). Untuk CSS aktif di ‘wordpress.com’, bayar $30/tahun. Ayo.

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: