IDEA * IDEAドットインストール代表のライフハックブログ
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」:phpspot開発日誌
カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 2011年08月25日- PageScroll | jQuery Plugins カスタマイズ可能なアニメーションスクロールが実現できるjQueryプラグイン「PageScroll」 アニメーションさせるイベントや、アニメーションの種類、onScrollStart、onScrollFinishといったイベントハンドラの設定まで出来るというものです。 デモページがこれを使ってなかなかいい感じに実装されていて、メニューにカーソルを合わせると指定位置に加速度をつけながら移動するという面白いものになっています。 メニューをfixedで固定してあるので意外と使いやすいものになっていることが分かると思います。 クリック不要にすることでストレスを減らせている感じ メニューにカーソルを合わせると指定位置に
画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」:phpspot開発日誌
spin.js 画像や外部CSSなしでカスタマイズ可能なローディング画像作成ライブラリ「spin.js」。 あのローディング画像を画像を使わず、外部CSSも使わない方法で実現でいるライブラリです。 パラメータをいじくれば簡単にローディングイメージをカスタマイズ可能です。 独立して動く方式をベースとして、jQueryプラグイン方式で動くコードも公開されているみたいです。 最初は画像だったものが、画像不使用に変化し、ライブラリによってより便利になってますね。 関連エントリ 画像要らずのローディング表示を実装できるjQueryプラグイン「Activity Indicator」 Ajaxスタイルのローディングも画像を使わずピュアCSSで実現するデモ ブロック内コンテンツを読込画像と共にAjaxで読み込ませアニメーション切替えできるjQueryプラグイン「Ajaxloader」
わずか4KBと軽量でカスタマイズしやすい、シンプルなデートピッカー（カレンダー）を実装するjQueryプラグイン・glDatePicker - かちびと.net
軽量でカスタマイズしやすいデートピッカー のjQueryプラグイン・glDatePickerのご紹介。 とてもシンプルで、4KBと超軽量です。汎用 的で使いやすいかなと思ってエントリー。 jQueryUIでもいいっちゃいいんですけど、 デートピッカーだけならUIを入れる必要は 無いですしね・・・ 何かとシンプルな方が使いやすく汎用性も高かったりしますね。4KBは確かに軽いです。また、IE6や7などの非モダンブラウザでも問題なく動作してくれます。 カレンダーの日付を押すだけでボックス内にデータを入力出来るやつです。デートピッカーというんですが、これがあるとユーザーは視覚的にも探しやすく、入力ミスも防げるので日付を入力するフォームに導入するといいユーザービリティになりそうです。 また、シンプルなコードでカスタマイズもしやすいのが特徴です。というわけでサクッと日本語にしてみました。 デモ デモで
[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal
モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。 デモページ：サインアップフォーム leanModalの主な特徴 モーダルウインドウが簡単に実装できます。 超軽量（780バイト）です。 幅と高さをカスタマイズできます。 画像は使用しません。 1ページに複数のモーダルボックスを設置できます。 ログインフォーム、サインアップフォーム、アラートパネルなども可能です。 オーバーレイはスタイルシートで簡単にカスタマイズできます。 非対応 スーパーシンプルなため、下記には対応していません。 ギャラリー機能 iframeコンテンツの表示 AJAXコンテンツの表示 IE6 leanModalの実装 Step 1 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src
[JS]一つ一つのパネル表示をカスタマイズできるスライドショーのスクリプト -imgPlayer
一つ一つのパネルを異なるサイズで、最適な位置に表示し、異なる背景やアニメーションを設定できるスライドショーのスクリプトを紹介します。 imgPlayer デモページ [ad#ad-2] デモでは10枚のパネルがセットされており、それぞれ異なるサイズ、最適な位置で表示し、さまざまなアニメーションで切り替わります。 2枚目を表示したキャプチャ 静止画ではその楽しさが分からないので、ぜひデモをどうぞ。 デモページ スライドショーの操作は、画像の左右のアロー、下のナビゲーション、キーボードの矢印キーに対応しています。 実装は少し面倒で、個々のパネルごとに座標とサイズなどを指定します。 キャプションも設定できます。 JavaScript パネル（一枚）の設定例です。 [221,30,386,518,{ onStart: function(){ darkStyle(); $('#text').html
[JS]サークル状のUIが面白い、カルーセルのスクリプト -Tiny Circleslider
使いどころは難しいですが、面白いユーザインターフェイスを備えた画像をスライド表示するカルーセルのスクリプトを紹介します。 デモ3：画像をクリックすると拡大します。 Tiny Circlesliderの特徴 わずか4KBの軽量スクリプト。 カスタマイズは簡単。 スライド操作は手動と自動に対応。 スライドの半径は自由に設定可能。 すべての動作にcallbackを設定可能。 オプションも豊富に用意。 [ad#ad-2] Tiny Circlesliderの実装 HTML カルーセルで表示する各画像はリスト要素で実装します。 HTMLの基本は下記のようになります。 <div id="rotatescroll"> <div class="viewport"> <ul class="overview"> <li><a rel="group" href="images/hdr1.jpg"><img sr
[JS]Twitterのツイートをブログやサイトに簡単に設置できるスクリプト -jTweetsAnywhere
Twitterでつぶやいたツイートをあなたのブログやサイトに簡単に設置できるjQueryのプラグインを紹介します。 jTweetsAnywhere デモページ [ad#ad-2] jTweetsAnywhereの設置は簡単で、数行のスクリプトで自分のブログやサイトにツイートを設置することができます。 jTweetsAnywhereの主な特長 指定したユーザー（複数可）のツイートを表示。 ユーザーのリストからツイートを表示。 Twitterの検索の結果を表示（パラメータは全対応）。 @Anywhereに対応。 エンドレススクロールを使ったページングをサポート。 自動更新でリアルタイムにツイートを表示。 ツイートボックスのカスタマイズが可能。 Follow me ボタンの設置が可能。 ネイティブのリツイートをサポート。 ユーザーのプロフィールを表示。 ツイート内のリンクを検出し、自動でリンク化
大迫力のページをフルに使ったイメージギャラリー実装デモ:phpspot開発日誌
Full Page Image Gallery with jQuery | Codrops 大迫力のページをフルに使ったイメージギャラリー実装デモ。 jQueryを使って画面を最大限に使ったギャラリーの実装コード例とコードのダウンロードが可能です。 フルサイズなので、写真の迫力が出せて、更に所々がJavaScriptによってアニメーション付きでクールに動作します。 コードはそれほど複雑なものではなく、カスタマイズ等も簡単そうです。 関連エントリ これはいい！iPadテーマのjQuery画像ギャラリー PHPソース１個で実現されるクールなWEBギャラリー実装プログラム「Pagemap ImageWall」 超カッコいいApple風スライドショーギャラリー作成チュートリアル JavaScript製の画像スライダー・ギャラリーいろいろ
[JS]画像をさまざまなアニメーションで拡大表示するスクリプト -imgZoom
imgZoom デモ [ad#ad-2] imgZoomの主な特徴 lightbox風のインターフェイス（暗いオーバーレイ、次の画像へのスイッチ） CSS/HTMLベースでのカスタマイズ フェードや回転のアニメーションで画像を拡大 ズームイン、ズームアウトのAPIの提供 jQueryのプラグインとして動作する軽量（7KB）スクリプト imgZoomの実装方法 外部ファイル 下記の3ファイルを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/imgzoom.css" /> <script type="text/javascript" src="sc
軽量かつ柔軟にカスタマイズが可能なJavaScript ColorPicker:phpspot開発日誌
ColorPicker 0.6 軽量かつ柔軟にカスタマイズが可能なJavaScript ColorPicker。 次のような様々なUIデザインを選べる上に、CSSでデザインできるカラーピッカーです。 カラーピッカーは色々ありますが高機能な部類に入るのではないでしょうか。 特定のライブラリに依存しない点もいいですね。 １つの選択肢として覚えておいてもよいでしょう。 関連エントリ JavaScriptで使えるカラーピッカー作成ライブラリまとめ リッチなカラーピッカーウィジェット「Free Advanced DHTML Color Picker」 単体で使えるJavaScriptカラーピッカー「DHTML Color Picker」 PhotoShopのカラーピッカーそっくりなカラーピッカー「JavaScript Color Picker」
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Facebookページをアピール出来るソーシャルプラグイン・Likebox（いいね！ボックス）をオリジナルデザインに変更する方法 - かちびと.net
IDEA * IDEA