ナイキやアディダス、グーグルなど先進的なデジタルキャンペーンで知られる企業が先んじてウェブサイトに取り入れている表現手法があります。それが“パララックス効果”です。まずは、その効果を体験いただければと思います。 パララックス効果の名を世に知らしめた「NIKE BETTER WORLD」 このウェブサイトの役割は、ナイキのCSR活動を広くPRすること。米広告代理店「Wieden+Kennedy」や、デザインディレクターIan Coyle氏らが製作を手がけており、サイトでは環境負荷が小さくなるよう開発されたThe Free TR Fit、100%リサイクルされているシューズボックスなどが紹介されています。 人間の視点をずらすことで、奥行きを感じさせる 先ほどのNIKE BETTER WORLD、サイトに“奥行き”を感じませんでしたか？3D技術を使っているわけでもないのに、平面であるはずのウェブ

これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」 2012年05月21日- jQuery Verbose Calendar - Brought to you by John Patrick Given これは新しい!クールなタイル状の年間カレンダー実装jQueryプラグイン「jQuery Verbose Calendar」。 方眼紙に数字が書かれたようなデザインでオシャレなカレンダーが実装できます。 もう見慣れたありきたりなカレンダーにはうんざりだぜ、という方には朗報ですね カーソルを合わせたら曜日も出ます。日付をクリックしたあとのコールバックも初期設定できます 実装コード例です 既にあるものをリデザインしてカッコよくする、というのもデザインですが、新しいインタフェースを定義してこれまでとは違った使い勝手を提案できる

[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js

ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 2012年05月17日- Koottam Social jQuery Plugin | Customized Facebook, Twitter, Google Buttons Using Cross Browser CSS3 ソーシャルサイトへのシェアボタンのデザインを統一させられるjQueryプラグイン「Koottam」 Twitter, Facebook, Pinterest, Google+ などのソーシャルシェア数を表示しつつデザインを統一できるjQueryプラグインです。 いろんなサイトのソーシャルボタンを設置するとどうしてもダサくなってしまうのですが、これを解決できますね。シェア数も表示できていいです 関連エントリ Facebook,Twitter,Google＋の独自デザイン

スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 2012年05月17日- ddSlick - a jQuery plugin for custom drop down with images スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」。 タップすればリストが開いてアイテムをクリックすると選択できるというウィジェットを簡単に実装できるプラグインです。 デモではソーシャルサイトの選択という感じになっていますが、色々応用ができそうです。 スマホのメニューとして使ってもよさそう。アイテムの内容には画像、タイトル、デスクリプションが含まれますが、これら値はJSONで渡せます もちろんPCサイトでも使えますね 関連エントリ スマホのホーム画面っぽいものを作れるjQueryプラグイン「Pr

Pie Menu (like Path Menu) using jquery and CSS3 by Nikesh Hayaran jQueryとCSS3を使ったPath風の円形メニューサンプル クリックするとアイテムが回転して良い感じに配置されるPathですが、それをjQueryとCSS3で実現できるスクリプトがGithubにて公開されています。 ウェブ上でカスタマイズをすることも可能。 スマートフォン等で使うとオッ、という感じでインパクトを与えられそうですね。 関連エントリ ページの目次ナビゲーションを自動で作ってくれるjQueryプラグイン「AutoAnchors」 面白いフローティングナビゲーションを実装できる「jQuery Floater」 今までなかったスマートなページ内ナビゲーションを実装するjQueryプラグイン「Flexible Nav」 ページ内スクロールならコレにおま

グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery

Real Shadow: jQuery Plugin that casts photorealistic shadows マウス位置が光源となりオブジェクトに陰影をつけるjQueryプラグイン「RealShadow」。 マウス位置に応じてオブジェクトの影がアニメーションし面白い効果を得ることが可能です。 マウスを移動すると影が移動 使い所は難しいところですが面白いですね 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 Googleマップ関連のjQueryプラグインとチュートリアル集 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 お手軽にお絵かきアプリが作れるjQueryプラグイン「wPaint」

フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、

Morris.js 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」。 マウス位置に応じて情報を変えるなど、GoogleAnalytics風のインタラクティブなグラフが描画できます。 実際には次のようなグラフが描画できます。IE6+でも動くということで、そこら辺の心配も無しです サンプルコードも載っていたりするので簡単に使えそうです グラフの種類は線グラフのみですが、多機能すぎて馬鹿でかいよりもシンプルなのが逆にいいかもしれませんね。 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」

シンプルなものからちょっと面白いものまで、20種類以上のアニメーションのエフェクトを備えた画像を目立たせるjQueryのプラグインを紹介します。 デモ 用意されているエフェクトは20種類以上で、ホバー時のエフェクトは下記のものが揃っています。 normal popout sliceDown sliceDownLeft sliceUp sliceUpLeft sliceUpRandom sliceUpDown sliceUpDownLeft fold foldLeft boxRandom boxRain boxRainReverse boxRainGrow boxRainGrowReverse 画像のデフォルト時のエフェクト（オーバーレイ・半透明）も用意されており、組み合わせて利用できます。 [ad#ad-2] 以下、デモページのエフェクトを紹介します。

Curtain.js スクロールするとカーテンが上がるようにパネルが非同期で動くページが作れるjQueryプラグイン「Curtain.js」 単なるスクロールする縦長ページではなく、スクロールするとブロック要素が別々に動いて面白い演出が作れます。 左下のナビゲーションでページ送りをしたりも出来るみたい 今なら、これを使ってサイトを作れば、玄人なWEB業界の人も目を丸くするかもしれませんね。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル レスポンシブなスライドショーを実装できるjQueryプラグイン「ResponsiveSlides.js」 iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル HTML5＆CSS3をフルに活用したスライドショー実装ライブラリ「Slider.js」