jQuery News Ticker 文字をタイプしている風のニュースティッカーを実装できる「jQuery News Ticker」。 ページの一番上なんかにニュースを流す際に使えそうです。 ul リストで次のようにニュースを並べておいて初期化するだけなので超簡単です フィードのURLを指定して表示することも可能みたい。 その方式ならいちいちHTMLを書き換える必要がなくてよいですね。 他にも豊富なカスタマイズオプションがあります。 関連エントリ ペラペラめくれるカウンター実装jQueryプラグイン「flipCounter」 iPhoneのON/OFFスイッチっぽいものを実装するjQueryプラグイン「Toggles」 アニメーションでコンテンツをより効果的にみせるためのjQueryプラグイン集
Yannis Chatzikonstantinou / Freetile.js アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 LightBoxばりに流行ったこのレイアウトプラグインですが、新しいプラグインが出た模様。 プラグインは色々ありますがそれぞれ使い勝手が違ったりするので１つの選択肢として覚えておいてもよさそうですね 使い方は以下のように簡単で、オプションでアニメーションするかなどのシンプルなオプションが選べる模様です $('#container').freetile(); 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ
Cycle2 カスタマイズ自由自在の多機能スライドショー実装ライブラリ「Cycle2」 全ブラウザ対応、レスポンシブ、カスタマイズ自由、エフェクト多数、スライドのブックマーク等、他のスライドショーで出来るような事は殆ど対応しているそうです。 とりあえず、既存のライブラリを使ってみたけどどうも自分の作りたいものと違う、といった場合にこうしたカスタマイズ出来るもので好みに作れそうです キャプションをつけたり ページ送りをしたり 関連エントリ CSS3で画像を分割スライドする超クールなパネル実装例 一枚の画像を高速にスライドさせてアニメーション表示する「JZoopraxiscope」 紙芝居のようなアニメーションでスライドするスライダー実装jQueryプラグイン「Innovation Slide」
Animated Responsive Image Grid | Codrops 画像が個別にアニメーションしながら切り替わるイメージグリッド実装デモ 次のように画像が並んでおり、ランダムに数個が別の画像にアニメーションしながら切り替わる感じがオシャレです。 会社概要ページとかでメンバーを並べる、というような用途に使うと面白いかも。 サンプルダウンロードで利用することも可能。 関連エントリ 超シンプルで1.8KBと軽量な画像スライダー用jQueryプラグイン「Craftyslide」 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
ページめくりを実現するためのjQueryプラグイン集 先日のHTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 では多くの反響を頂きましたが、他にも同様のページめくりライブラリがあるようです Booklet 個人的にコンパクトなインタフェースがいいなと思うライブラリです。 HTML5がなくともIE8でも動きます Create a page flip effect with HTML5 canvas | Tutorial | .net magazine 以前紹介した、HTML5を使ったページめくりUIの作成チュートリアル。独自に作る場合は参考にできます jFlip なめらかなページめくりを表現できるjQueryプラグインです。 カーソルを合わせるとめくり部分が微妙にアニメーションしているあたりも芸が細かいです Simple Page Peel Effect with
最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現する「THE SLIDE」。 流行ってるのか知りませんが、取り敢えずこのブログも流れに乗っかって設置してみました。 最近海外のブログでよく目にする、 画面を下までスクロールすると右下から出現して オススメの記事を紹介する「THE SLIDE」。 流行ってるのか知りませんが、 取り敢えずこのブログも流れに乗っかって設置してみました。 インストール THE SLIDEは、そのページを見てる人にお勧めの記事を紹介してくれるウィジェットです。 WordPress、Drupal、Tumblr、Blogger、 その他ブログの様に記事を作成するタイプのサイトに使用できます。 WordPressにはプラグインがあるので、プラグインを利用すると簡単に設置できます。 ちなみにWordPressのプラグイン名は「SimplleReach
背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 2011年05月19日- Documentation: Overlay - Vegas Background jQuery Plugin 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」。 背景画像を大きくサイトに使う場合に、単に写真を使ってもカッコイイのですが、ドットパターンを合成してよりカッコよくすることが出来ます。 その昔、Photoshopで画像にテレビに写ったような走査線を入れるようなプラグインが流行ったりしましたが、そういう処理は今やjQueryでやる時代のようです。 大きい写真を背景に使ったデザイン。 画像が小さくてもブラウザサイズに応じて引き伸ばしてくれる機能もついてます。 拡大してみると、まぁ
Wijmo - jQuery UI Widgets 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」。 jQueryといえばプラグインによって様々なことが出来るのはご存じだと思いますが、Wijmoはこれ1個で30ものウィジェットが実装できるパックです。 UIのデザインをそろえたいような場合に使えそうです。 アコーディオン カレンダー 各種グラフ コンボボックス オーバーレイ 独自フォームデザイン グリッド リスト まだまだあります・・・。 よくここまでそろえたなという品ぞろえですね。 関連エントリ YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」 jQueryでYoutube埋め込みビデオをブロックの幅に合わせるコード 再生ボタン等も変更できちゃうYoutube操作jQueryプラ
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」 2010年11月05日- 2011/5/7: 本ライブラリに脆弱性がありましたので速やかにバージョンアップを実施して下さい。(詳細) Twitter/facebook/mixi/GREEのボタンを超カンタンに作れる jQuery.socialbutton プラグインを作ったよ Twitter・mixi・facebook等の国内主要ソーシャル用ボタンを超カンタンに作れる「jQuery.socialbutton」。 仕様について理解しなくても、このプラグインを読み込んでちょちょっと数行書くだけで実装出来てしまいます。 例えば、facebookなら、$('.facebook').socialbutton('facebook_like'); と１行書くだけ。 mi
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
AjaxやJavaScriptでDOMを使う機会がふえている。この技術の進化でデザインとプログラムという区切りが明確になったのか、あやふやになったのかはさておき、オープンソースのライブラリを使う機会は少なくない。 ここでは特に有名な2つのJavaScriptライブラリの共存方法をご紹介します。 いろんなサイトで紹介されているのすでに問題はないと思いますが、自分の備忘録的な形で残します。 prototype.jsとjQueryは実は競合（コンフリクト）します。通常に読み込んでも、イベントが発生してもエラーになることは少ないと思いますが、思ったとおりの処理が実行されない、いわゆる構文的には正しいがユーザーが期待する処理がされないということがあります（実行時エラーとか言いますが）。 その中でもそれぞれに共通して実装されている「$」という一見不思議なコード。 prototype.jsでは「wind
ZURB ? Interaction Design and Design Strategy 軽量のイメージスライダー実装jQueryプラグイン「Orbit」。 わずか2.8KBというサイズでクールな動作をするイメージスライダーの実装が可能です。 実装方法は必要なJS, CSSを読み込んだ後に、<div>の中に<img>タグを並べるだけです。title、altタグにキャプションを設定しておけば下に表示されます。 実装が超簡単かつ軽量ということでいい感じです。 関連エントリ Flickr風のイメージスライダーを作ってみよう JavaScript製の画像スライダー・ギャラリーいろいろ クールに動作するスライダーを実現するJSライブラリ「Start/Stop Slider」
Create a Custom Content Slider with jQuery jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル。 次のように、左側にボタンがあって押すと右側のコンテンツがアニメーションで切り替わるコンテンツスライダーの実装チュートリアルとサンプルが公開されています。 サイドバー等に仕込むことで少ないスペースで多くの情報を格納することが出来る上になかなかクールな印象を与えられそうですね。 簡易チュートリアル的なコンテンツを載せる場合なんかに使えそうです。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット JavaScript製の画像スライダー・ギャラリーいろいろ JavaScriptでページスライダー用ライブラリいろいろ
26 Useful jQuery Navigation Menu Tutorials - Web Design Blog ? DesignM.ag ナビゲーションメニューに関する有用なjQueryチュートリアル集のご紹介。 ２６にもわたるチュートリアルになっていて、プラグインではありませんが、参考にすることで実装は容易でしょう。 クールな見た目が多いのもいいですね。 沢山の種類があるのでイメージにマッチしたものも見つかりそうです。 関連エントリ 長い文書ページでもナビゲーションを付けて分かりやすくできるjQueryプラグイン「jQuery One Page Navigation」。 階層ナビゲーション実装ライブラリ集 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例
ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグイン 2010年11月15日- SelectBox Plug-in ユーザ登録時にパスワード強度表示を入れてと言われた場合にサクッと実装できるjQueryプラグインのご紹介。 ユーザ登録の際に、パスワード強度を表示するサイトが多くなってきていますが、利用者がパスワードを決める場合に注意が働くためサイト全体としての安全性が高まるという点で効果がありそうですね。 仕事でサイトをつくっていて、あの機能入れてくれといわれた場合に、瞬時に実装できそう。 パスワードが弱い場合は次のように表示されます。 いい感じの場合はGoodが表示されます。 出し方は次のようにメソッドに渡すオプションを変更するだけでかえられます。 IDとパスワードが同じでもエラーを出せたりします。 関連エントリ パスワード生成や年齢計算等、P
Choco-Slider | A very tasty jQuery Plugin 軽量(7KB)でいい感じの画像スライダー実装jQueryプラグイン「Choco-Slider」のご紹介です。 実際のスライダーは次のような感じ。 画像切替の際のアニメーションはチョコをかけるような効果でいい感じに動きます。 画像の説明を画像下にテキストで入れることも可能です。予めULリストで定義しておきます。 １つの選択肢として覚えておいてもいいですね。 関連エントリ 軽量のイメージスライダー実装jQueryプラグイン「Orbit」 jQueryとCSS3で作るカラフルなスライダーウィジェット jQueryでいい感じのコンテンツスライダーを作成するチュートリアルとサンプル JavaScript製の画像スライダー・ギャラリーいろいろ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
