Contoh Liquid Image FX

Tampilan efek yang dihasilkan bisa dilihat di halaman demo ini, sedangkan kode JavaScript bisa di download dari halaman ini.

Liquid Image FX dirilis dalam MIT License.

Related posts

• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)
• Membuat Slideshow dengan s3Slider jQuery plugin (1)

Di dalam artikelnya juga disertakan sebuah tutorial untuk membuat “Mega Menu” dengan jQuery dan CSS, yang sangat cocok diterapkan untuk online store.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)
• Membuat Slideshow dengan s3Slider jQuery plugin (1)

Contoh salah satu tampilan tooltips dengan BeautyTips

Tooltips bisa ditampilkan dengan beragam cara dan sangat mudah untuk dimodifikasi.

Canvas element yang diperlukan oleh BeautyTips sudah didukung oleh browser modern seperti Firefox, Safari, Chrome dan Opera. Sedangkan untuk Internet Explorer, dibutuhkan ExplorerCanvas untuk mendukung penggunaan canvas.

Lihat halaman demo untuk melihat banyak ragam contoh tampilan tooltips yang bisa dibuat dengan menggunakan BeautyTips.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

Contoh Tampilan Slideshow dengan CrossSlide

Ada 3 macam animasi yang bisa digunakan untuk tampilan slideshow, yaitu:

1. Slide + cross-fade
   Gambar bergerak dari bawah ke atas atau sebaliknya untuk kemudian memudar dan berganti dengan gambar berikutnya.
2. Static cross-fade
   Gambar memudar untuk kemudian berganti dengan gambar berikutnya.
3. Ken Burns effect
   Gambar bergerak, zoom dan memudar sesuai dengan point yang ditentukan.

Setelah mencobanya, animasi favorit saya adalah Ken Burns effect meskipun sepertinya memerlukan kerja CPU yang paling besar dibandingkan efek lainnya.

Dalam percobaan dengan Chrome, transisi antar gambar terlihat agak tersendat dengan menggunakan Ken Burns effect — sesuatu yang tidak terjadi dengan Firefox 3 dan IE6.

CrossSlide memiliki ukuran 11KB dengan lisensi GPL.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

Contoh hasil dengan Equal Height

Dengan plugin ini, kita juga bisa menentukan tinggi minimal dan maksimal dari element yang kita inginkan.

Ketika tinggi maksimal sudah tercapai tapi content membutuhkan space yang lebih dari tinggi maksimal — maka akan muncul scrollbar untuk elemen tersebut.

Halaman Demo Equal Height.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Contoh tampilan s3Slider

Posisi caption bisa diatur untuk ditaruh di atas, bawah, kanan atau kiri.

Lama pergantian antar image juga bisa diatur oleh pengguna.

s3Slider boleh digunakan untuk semua project termasuk komersial.

Halaman demo s3slider.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Slideshow yang dihasilkan memiliki judul dan deskripsi pada setiap slidenya.

Tampilan Slideshow

Navigasi bisa dilakukan dengan tombol previous dan next yang terdapat pada slide atau dengan memilih thumbnail yang diinginkan.

Script berukuran 5KB ini juga memiliki beberapa parameter yang bisa diatur oleh pengguna.

Script boleh digunakan untuk kepentingan pribadi maupun komersial.

Halaman demo Animated Javascript Slideshow.

Related posts

• JavaScript Liquid Image FX (1)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

SlideItMoo bisa digunakan untuk menampilkan thumbnail atau sebagai banner rotator.

Contoh Slider dan Banner Rotator

Navigasi slide bisa dilakukan dengan meng-klik tombol back, forward ataupun mouse-wheel.

Pengaturan tampilan bisa dilakukan melalui file CSS eksternal.

Beberapa pengaturan lainnya juga tersedia untuk mendapatkan beberapa efek yang diinginkan.

Lihat halaman demo SlideItMoo.

Related posts

• JavaScript Liquid Image FX (1)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Lightbox dengan Mootools: Milkbox (0)
• Membuat Slideshow dengan CrossSlide (0)

Contoh form dengan Niceforms

Niceforms akan mengubah tampilan form yang memiliki class “niceform” dengan theme default yang disertakan dalam paketnya (atau dengan menggunakan theme yang di kembangkan sendiri).

Niceforms bisa bekerja dengan baik di semua browser utama kecuali IE6, yang tetap akan menampilkan form tanpa effect visual dari Niceforms.

Halaman demo Niceforms

WordPress plugin

Untuk pengguna WordPress yang ingin menggunakan Niceforms bisa dengan men-download dan mengaktifkan plugin WP-Niceforms.

Related posts

• JavaScript Liquid Image FX (1)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

Gallerific cocok dipergunakan untuk gallery dengan jumlah photo yang sangat banyak.

Contoh penggunaan Gallerific

Fiturnya:

• Smart Image Preloading after the page is loaded
• Thumbnail Navigation (with pagination)
• Bookmark-friendly URLs
• Slideshow (with auto-updating url bookmarks)
• Image fade transitions
• Optional download link for the original image
• Flexible configuration
• Graceful degradation when javascript is not available
• Now supports multiple galleries per page (View Multiple Gallery Demo)

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Contoh tampilan prettyPhoto

prettyPhoto bekerja dengan baik di semua browser dan bisa digunakan untuk menampilkan photo dan flash. Jika diinginkan, beberapa photo juga bisa ditampilkan sebagai gallery.

prettyPhoto boleh digunakan untuk semua project termasuk project komersial.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Lightbox dengan Mootools: Milkbox (0)

Sudut yang akan dibuat rounded dan radiusnya bisa diatur dengan mudah.

jQuery Corners juga bisa digunakan untuk form button dan berjalan dengan baik di semua browser utama termasuk iPhone.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Untuk mengurangi kebutuhan spacenya, ada 3 solusi yang terpikirkan yaitu dengan menggunakan iframe, div dengan scrollbar atau Carousel.

Akhirnya, diputuskan untuk menggunakan Carousel yang setelah diimplementasikan sangat mengurangi kebutuhan spacenya dibandingkan jika memuat kontennya tanpa Carousel.

Contoh Horizontal Carousel

Berikut ini daftar 13 script Carousel dengan 4 macam Javascript library yang sempat saya kumpulkan yang mungkin berguna suatu waktu.

jQuery

• Agile Carousel
• jCarousel
• Step Carousel Viewer
• Glider
• Coda Slider
• Better Coda Slider
• Scrollable – artikel terkait

Yahoo! UI

• Carousel Component
• Yahoo! UI Library: Carousel Control

Prototype + Scriptaculous

• Carousel
• Prototype Carousel w/ Scriptaculous (version 2)

MooTools

• iCarousel
• Carousel with MooTools – Tutorial

Jika sudah menggunakan Javascript library versi terbaru, jangan lupa untuk mengecek kompabilitasnya terlebih dahulu karena beberapa script Carousel tidak diupdate secara berkelanjutan.

jCarousel yang akhirnya saya gunakan bisa berjalan baik dengan jQuery versi 1.2.6 meskipun di webnya diupdate terakhir dengan v.1.2.3.

Semoga bermanfaat dan mohon ditambahkan jika ada yang mengetahui script Carousel lainnya.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Lightbox dengan Mootools: Milkbox (0)

sIFR dan FLIR digunakan untuk membuat tampilan text menjadi lebih menarik, karena dengannya kita bisa menampilkan text dengan font apapun yang kita inginkan.

Yang membedakan antara keduanya adalah sIFR menggunakan media flash untuk me-replace text yang kita inginkan dan menampilkannya dengan font pilihan sedangkan FLIR dengan membuat image dari text yang diinginkan.

Satu lagi solusi yang bisa digunakan sebagai alternatif dari 2 opsi di atas adalah dengan menggunakan typeface.js.

typeface.js

Cara menggunakan typeface.js adalah dengan menyisipkan typeface.js library dan satu atau beberapa typeface.js font lalu gunakan CSS untuk mengatur jenis font-nya, seperti contoh di bawah ini:

<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>

<div class="myclass typeface-js" style="font-family: Helvetiker">
Text here in Helvetiker font...
</div>

Contoh penggunaannya bisa dilihat di halaman demo.

Untuk jenis font, kita bisa menggunakan 3 jenis font yang saat ini tersedia di webnya atau dengan menggunakan font koleksi kita yang harus diubah terlebih dahulu ke dalam format typeface.js.

typeface.js ini diklaim berjalan dengan baik di Firefox 1.5+, Safari 2+, dan Internet Explorer 6+.

Harap diperhatikan pada saat men-download font yang tersedia di websitenya, semakin banyak memilih opsi (mathematical operators, greek, latin extended dan lainnya) maka akan semakin besar pula ukuran file .js. Ukuran file .js yang besar bisa mengakibatkan waktu loading website kita bertambah lama.

Penggunaan yang berlebihan/terlalu banyak juga bisa membuat halaman menjadi lambat dibuka.

Sayangnya, sama seperti FLIR — text yang direplace dengan typeface.js tidak bisa di-select (untuk keperluan copy paste).

Saya sendiri lebih terbiasa dengan sIFR. Menggunakan sIFR juga membuat text yang direplace tetap bisa di-select.

Ada yang mau menambahkan?

Related posts

• JavaScript Liquid Image FX (1)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)
• Tinggi elemen yang seragam dengan EqualHeights jQuery Plugin (0)

Scroll Follow sudah dites di IE6, IE7, FF2, FF3, Safari 3, and Opera 9 — semua dalam versi Windows.

Requirements:

• jQuery
• jQuery UI Core
• jQuery Easing plugin
• jQuery Cookie plugin

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Berikut listnya:

1. Setting Equal Heights
2. IE6 PNG Alpha Transperancy support
3. Changing CSS Classes in JavaScript
4. Browser selectors in CSS
5. min-/max- height & width support
6. Center Elements Vertically / Horizontally
7. Display Q tags in Internet Explorer
8. Increase the size of click targets and get more call-to-action conversions
9. Lazy loader: It delays loading of images in (long) web pages.
10. bgiframe: Helps ease the pain when having to deal with IE z-index issues.
11. ieFixButtons: fixes the buggy behavior of the <button> element in Internet Explorer 6 and 7.
12. Fix Overflow: fixes the horizontal overflow in IE.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)

Contoh hasil dari penggunaan Scrollable

Semua jenis konten (HTML, video, text) bisa digunakan sebagai item yang akan discroll.

Fitur:

• bisa horizontal maupun vertikal
• item yang akan dimunculkan bisa diatur jumlahnya
• scroll elemen dengan mouse, arrow keys dan mousewheel (requires mousewheel.js)
• programmatic actions: next, prev, nextPage, prevPage, seekTo, begin, end
• ukuran file .js hanya 3.9 Kb!

Contoh lain penggunaan Scrollable bisa dilihat di halaman Scrollable-view dan Playlist.

Related posts

• JavaScript Liquid Image FX (1)
• Membuat ” share box ” cantik (5)
• Multi-level Menus dengan JS dan CSS (0)
• Membuat tooltips dengan BeautyTips (0)
• Membuat Slideshow dengan CrossSlide (0)