Samples - Here you can find some nice pieces of web design. 26 posts

jQuery Animation Samples

jQuery の animate メソッドを使った、UI 用の tips です。jQuery を使って、背景画像をアニメーションにしたり、マウスオーバー時にバブルアップ効果をつけたりしています。background-position をアニメーションで変更するには、ちょっと注意が必要です。今回はプラグインを使用しています。

jQuery Animation

jQuery Parallax

jQuery を使って、パララックス(視差)を表現したデザインのサンプルです。背景と手前のスクロールの量を、jQuery を使ってずらしています。プラグインは使用していません。

parallax

jQuery BX Slider Plugin

jQuery のプラグイン – BX Slider を使ったサンプルです。一般的なカルーセルではなく、画面いっぱいに広がるダイナミックなスライダーとして利用してみました。

BX Slider

jQuery Cycle Plugin

jQuery のプラグイン – Cycle Plugin を使った、コンテンツスライダーのサンプルです。今回はディスプレイ幅一杯に広がる、ダイナミックなデザインに挑戦してみました。

Cycle Plugin

jQuery Masonry Plugin

jQuery Masonry Plugin を使った、レイアウトサンプルです。Masonry というのは、「レンガ」という意味。Masonry Plugin を使うと、レンガを敷きつめたように隙間なくボックスを配置してくれます!

Masonry

jQuery Plugin Fancybox

Lightbox 系の jQuery プラグイン、Fancybox を使ったサンプルです。Easing プラグインを併用すれば、動きも可愛く変更できたりします!お気に入りのプラグインのひとつです。

fancybox

jQuery Plugin BX Carousel Slider

jQuery のプラグイン – BX Slider を使ったカルーセルスライダーのサンプルです。カルーセルというのは「メリーゴーランド」という意味の言葉。一度に複数の画像を見せることができるので、スペースの節約にもなる UI デザインですね!

jQuery Plugin BX Carousel Slider

jQuery Plugin Nivo Slider

jQuery のプラグイン – Nivo Slider を使ったサンプルです。Nivo Slider は、画像の遷移エフェクトが素敵なイメージスライダー。コンテンツスライダーとしては使えないけど、画像のタイトルくらいなら表示することができます。

Nivo Slider