ドットインストール代表のライフハックブログ
操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」 2010年12月21日- MessageBar ? just another jQuery plugin 操作に連動させて分かりやすくクールにメッセージ表示させるjQueryプラグイン「MessageBar」。 エラーや何かメッセージを表示したい場合、一番分かりやすい例としてalertがありますが、なんとも味気ない感じになってしまうのは否めません。 MessageBarプラグインを使えば、指定したブロックエレメントの上部に分かりやすくアニメーションしながらクールにメッセージを表示できます。 デザインが色々と選べるのもこのプラグインの特徴です。 半透明で要素にオーバーレイして表示 角丸のウィンドウっぽいバーをスライドアニメーションしながら表示 シンプルですが落ち着いたデザインのバーを表示
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
よくあるコンテンツスライダーですが、 軽くて使いやすそうでしたのでメモ。 hash sliderは、わずか2キロバイト ほどの軽量スクリプトです。こういう のはいくつ覚えておいても損しない ですね。 軽い、というのは大事ですよね。スライドさせるとURL末尾に#～が付き、ここにリンクすることが出来ます。 シンプルです。マークアップも単純なので使いやすいのでは。 <div id="slider"> <ul> <li> example</li> <li> example2</li> </ul> </div> <div id="left"> goLeft </div> <div id="right"> goRight </div> <ul id="numbers"> <li></li> </ul> デモでは画像を利用しています。 #～にリンク #～にリンクさせることで個々のスライドを指定して表示さ
Simple Dropdown List Plugin - Examples シンプルだけど使えそうなドロップダウンメニュー実装jQueryプラグイン。 次のような見た目で、クリックするとアニメーションしながら開くドロップダウンを簡単に実装できます。 クリックでアニメーションしながら開きます。 タグ的には<ul><li>のリストでアイテムを定義しておいて、$.simpledropdown(element); で初期化できるようです。 デフォルトのデザインはちょっとカッコ悪いですが、CSSでデザインを直せばそれなりに使えそうですね <select>じゃなくて、独自デザインで作りたい場合にサクッと実装できそうなので覚えておいてもよいかも。 関連エントリ ドロップダウンメニューにテーブルやフォーム等何でも埋め込んでしまえるjQueryプラグイン「MegaMenu」 コンテンツがたっぷりつまって使
あらかじめ用意された豊富なテンプレートから簡単にCSS3のナビゲーションを作成できる無料のソフトウェアを紹介します。 CSS3 Menuの画面 CSS3 Menuの使い方 使い方は簡単で、CSS3やHTMLに詳しくなくても作成できると思います。 「+」ボタンをクリックして、ラベルの数を増やします（下記キャプチャ）。 「-」ボタンは数を減らします。 右側のパネルのテンプレートからナビゲーションのデザインを選択します。 カスタマイズが必要な場合は、下のパネルからデザインをはじめ、文言・リンクなどが変更できます。 完成したら、「ディスクアイコン」をクリックしてCSS3 Menu用に保存します。 HTML+CSS+画像ファイルを生成する場合は、「Publish」ボタンをクリックします。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
