はてなブックマーク

Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージカルーセルを実装することができるjQueryプラグインです。使い方もシンプルですが、アニメーションやオプションが充実しているので機能性も良好です。 Crosscoverのダウンロード、使い方、実際のデモに関しては以下のページからチェックできます。 Crosscover デモでは画面いっぱいに表示された画像がダイナミックに切り替わっていきます。 ナビゲーションは下部に設置されているだけで余計な装飾もなく、デザイン、操作性ともにシンプルで使いやすいですね。 主要なアニメーションにはFade、Zoom、Rotate、Flip、LightSpeedがあり、各アニメーションによって細分化されているものもあります。 オプションではIn・Out時のアニメーションを設定できるほか、インターバル、開始画像、自動再生、ナビゲーション、コント

NavSyncはナビゲーションとコンテンツが連動してアニメーションするjQueryプラグインです。今いるコンテンツの位置に応じたナビメニューが分かるようになっているので、長いランディングページなんかにすごく良さそうですね。 以下のページでNavSyncのデモ、ダウンロード、詳しい使い方を確認することができます。 NavSync メニューをクリックするとそのコンテンツの場所までスクロール移動されます。現在表示中のコンテンツに対するメニュー項目も一目で分かるので、すごく便利な機能ですね。 マークアップもこんな感じで実にシンプルです。 <nav> <a href="#anchor-1">sample1</a> <a href="#anchor-2">sample2</a> <a href="#anchor-3">sample3</a> <!-- 中略 --> </nav> で、プラグインを呼び出

jQuery liMarqueeはニュースティッカーを実装できるjQueryプラグインです。テキストや画像などを滑らかにアニメーション（自動スクロール）させることができます。 jQuery liMarqueeの詳細は以下になります。デモもチェックできます。 Edit fiddle – JSFiddle コンテンツが滑らかに流れていて、つい視線がいっちゃいますね。ユーザーにちょっと注目して欲しい部分がある時なんかに、こういった動きのあるティッカーを活用してみるのもおもしろいそうです。 デモではティッカーにマウスオーバーするとアニメーションが停止します。ドラッグ移動させることでコンテンツを好きな位置へ動かすことができるのもすごく便利ですね。 アニメーションは水平方向のスクロール以外にも、垂直方向にスクロールさせることも可能です。 いろいろとカスタマイズもできるので、ニュースティッカーを実装した

scroll-scope.jsは親要素の影響を受けずに子要素だけを固定してスクロールさせることができるjQueryプラグインです。通常、スクロールが設定されている子要素にマウスオーバーしてスクロールし続けると、子要素内のスクロールが終わったあとにそのまま親要素のスクロールに切り替わるのですが、これを防ぐことができるプラグインです。 scroll-scope.jsの使い方やダウンロードは以下になります。実際のデモも用意されているので、是非チェックしてみてください。 scroll-scope.js 例えば、スクロールがある子要素だけをじっくり見たい時なんかに、1番下もしくは1番上までスクロールした時に惰性でそのままページ全体がスクロールされてしまう、なんていうことがあるかと思います。 そんな時、また子要素を画面中央付近など見やすい位置までスクロールで戻したりしなきゃいけないので、割とめんどくさ

LoadGoはサイト内にあるロゴなどといった画像をプログレスバー（ローディング）として使用できるようにしてくれるjQueryプラグインです。ローディングが進行するにつれて進捗度が画像に反映されていくので、一般的なプログレスバーに比べるとおもしろみがあって汎用性も高そうですね。 以下のページからLoadGoの詳しい使い方やダウンロード、またはデモを確認することができます。 LoadGo デモにあるStartボタンをクリックすると画像にオーバーレイがかかり、進捗度とともに画像の色合いやカラーなどが変わっていきます。 ローディング中はだいたい画像を見ていると思うので、ロゴや何かを伝えたい画像なんかにこの機能を実装することで、ユーザーに覚えてもらいやすくなる効果があるのではないでしょうか？ ローディング中の待ち時間ってよく考えてみると結構もったいない気がするので、こういった機能を活用して工夫してい

Simple LightboxはレスポンシブでミニマルなイメージLightboxを実装することができるjQueryプラグインです。タッチやスワイプにも対応しているので、PCはもちろんモバイルデバイスでも操作しやすいのが特徴です。 Simple Lightboxのデモは以下になります。 デモ 綺麗に整列されたサムネイル画像をクリックすると拡大画像が表示されます。左右の矢印アイコンで前後の画像へ移動することができます。スマホではスワイプで前後移動が可能です。 また、PCではキーボードの左右矢印ボタンでも操作可能です。 無駄な装飾が一切なくミニマルで美しいデザインが写真を最大限に引き立ててくれますね。UIも最小限でシンプルな構成なので操作性に迷うこともなく使いやすいと思います。 クリック時のローディングアニメーションやさりげないオーバーレイなど、細部もかなり洗練されているので、オシャレなLigh

Product Tourはレスポンシブに対応したプロダクトツアーを実装することができます。CSSとjQueryを使ってWebサイト内でステップごとにガイドを表示させることが可能です。順番に効率良く説明したい時に役立ちますね。 以下はProduct Tourのサンプルです。 サンプル Start tourというボタンをクリックするとステップ1〜3までのガイドを順番に見ることができます。Previous、Nextで前後のステップに移動します。 PC版ではフェードアニメーションでふんわりとさりげなく各ステップの位置へ移り変わっていきます。一方、モバイル版ではスライドで切り替わるようになっており、iPhoneで確認してみたところフリックでスライドすることもできました。 デザインも全体的にシンプルにまとまっていて非常に見やすいですね。 というわけで、レスポンシブなプロダクトツアーを実装したい方は是非

jQuery toTop()はトップへ行くための滑らかなスクロールを実装することができるjQueryプラグインです。使い方や機能がシンプルで、なにより軽量なところがいいですね。オプションを用いてちょっとしたカスタマイズをすることも可能です。 以下は実際のデモページになります。 デモ 下へスクロールしていくと、画面右下に「Top ↑」という文字が表示されるので、それをクリックするとTopまで滑らかに自動スクロールされます。 こんな感じでオプションもいくつか用意されています。スピードやポジションの値を設定することができます。以下はすべてデフォルト値になります。 $('.to-top').toTop({ autohide: true, offset: 420, speed: 500, position: true, right: 15, bottom: 30 }); というわけで、jQueryプ

Pogo Sliderは豊富なスライドアニメーションが揃っているjQueryプラグインです。スライドダウン、スライドアップ、スピン、3Dフリップ、回転などスライダーに関するたくさんの種類のアニメーションが用意されています。 以下のページからPogo Sliderの実際のデモを確認することができます。 デモ デモではスライド、ブロック、スプリット、zip、expand、fold、フェードなど数多くのスライドトランジション動作を確認することができます。他にもスライドダウン、スライドアップなどのエレメントトランジションもチェックできます。 オプションで設定できる項目もかなりあるので、カスタマイズしたスライダーを実装したい�方にはピッタリですね。 自動再生やレスポンシブのオン／オフなどを指定することができます。 使い方はこんな感じでマークアップしていきます。 <div class="pogoSli

jQuery fatNavはミニマルテイストなフルスクリーンのナビゲーションメニューを実装することができます。デモではメニューアイコンをクリックするとオーバーレイでアニメーション付きのメニューが表示されます。フワッとさりげない感じで表示されるのがとてもお洒落ですね。 以下はjQuery fatNavのデモになります。シンプルでスッキリしたデザインが特徴的です。 デモ メニューはフェードでズームイン、ズームアウトのアニメーションで表示されます。自然な一連の動作がとてもいい感じです。 使い方もシンプルなところが嬉しいですね。こんな感じでマークアップすることができます。 <div class="fat-nav"> <div class="fat-nav__wrapper"> <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a>

写真を撮った後にパソコンで見返した時なんかに「空の青さが薄いなぁ」と思う時が多々あります。そんな時にPhotoshopで手軽に深みのある青�に補正するやり方をご紹介します。単純に彩度を上げるだけでは解決できない時にオススメです。 特定色域の選択 例えばこのような水色の空があったとします。 これを深みのある色に補正するために、まず調整レイヤーから「特定色域の選択」をクリックします。レイヤーパネルの下にあるアイコンから選ぶことができます。他にも上部メニューから「レイヤー」→「新規調整レイヤー」→「特定色域の選択」でもOKです。 「絶対値」にチェックが入っていることを確認したら、カラー項目から「シアン系」選択します。 薄い青を深みのある青にするためには「シアン」と「マゼンダ」のスライダーを右に動かして値を強めていきます。 これで以下のような色にすることができました。 補正前と比べるとだいぶ青さが

CSSでブロック要素のwidthを文字の長さに合わせるやり方をご紹介します。RWDにも対応できるので何気に覚えておくと便利だなーと思いました。これにより文字の長さに合わせたbackgroundやborderを表示させることが可能になります。 display:inline-blockを使う 例えばこのようなHTMLを記述したとします。 <div class="sample">サンプルテキストサンプルテキストサンプルテキストサンプルテキスト</div> そしてCSSで背景を指定します。 .sample { background: #ccc; } するとwidthを指定していないので普通は以下のように背景色がテキストの長さを超えて表示されます。 これをテキストの長さに合わせるためにはCSSを以下のように設定します。 .sample { background: #ccc; display: inl

Slider Proはレスポンシブやタッチ・スワイプに対応したスライダーを実装することができるjQueryプラグインです。完成度も高く便利で役立つ機能が満載です。サムネイル画像もつけることができたりと、いくつかのパターンがあるのでこれからスライダーを実装したいという方は、チェックしておきたいところです。 [ads_center] Slider Proの使い方 Slider Proのデモは以下になります。 デモ Slider Proの大まかな特徴としては以下のようなものがあります。 レスポンシブ タッチ、スワイプ 無限スクロール カルーセルレイアウト サムネイル設定 フルスクリーンのサポート ブレイクポイント設定 使い方は、まずjQueryとプラグインファイルをhead�内に読み込みます。 <link rel="stylesheet" href="dist/css/slider-pro.mi

Lightroomのスポット修正ツールはRAW現像時に気になる部分をサクッと修正できるので便利ですよね。ただ、上手くいかない事が結構あって、特に多いのが丸い跡がくっきり残ってしまう時。で、ふと思ったのがぼかしという項目。デフォルトではおそらく0になっているかと思います。この数値を上げることで丸い跡が上手くぼかされて自然な感じになります。なんで今まで気づかなかったんだろ…。 [ads_center] ぼかし設定 どこでぼかし設定するかというと、ここ。 このまま修正すると丸い跡が残りやすいので数値を上げます。ここでは分かりやすく100に。 ぼかしの設定値はショートカットにも対応していて、shiftキー + [ で下げて、shiftキー + ] で上げることができます。ぼかし数値を上げることでカーソルの外側の円が大きくなっていくので見た目も分かりやすいですね。 これで修正すると丸い跡が上手くぼか

pagePiling.jsは垂直にスライドするようなスクロール機能を実装できるjQueryプラグインです。スクロールの他にもナビゲーションリンクをクリックすることでそのページまでアクセスすることもできます。 [ads_center] pagePiling.jsの使い方 以下から実際のデモ動作を確認することができます。 デモ ダイナミックに画面いっぱいスクロールされていくので、インパクトがありますね。 使い方は、jQuery本体とプラグインファイルを読み込んだ状態で以下のようにHTMLをマークアップします。 <div id="pagepiling"> <div class="section">・・・</div> <div class="section">・・・</div> <div class="section">・・・</div> </div> あとはpagePiling.jsを呼び出して

mmenuというjQueryプラグインを使えば、スマホアプリのように横からスライドするメニューを実装することができます。実際のデモではレスポンシブになっており、画面を縮小するとメニューがアイコンに切り替わります。このアイコンをクリックすると横からメニューがスライド表示されます。メニューが多階層にも対応しているのがいいですね。 [ads_center] mmenuの使い方 mmenu 使い方は、まずhead内に以下のjQuery本体とプラグインファイルを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="jquery.mmenu.min.js" type="text/javascript"></script> <link href="jquery.mmenu.css" type="text

Slight SubmenuというjQueryプラグインを使えば、ネスト（入れ子）されたメニューリストを展開したり折りたたんだりすることができます。ネストされた項目にはボタンが追加され、ホバーやクリックで展開＆折りたたみが機能します。 [ads_center] Slight Submenuの使い方 こんな感じで、ネストされた項目を展開したり折りたたんだりすることができます。 $('selector').slightSubmenu(options); デフォルトではボタンにホバーするとアニメーションしながら展開していきます。折りたたむ時はボタンをクリックしてたたみます。 セッティング次第でクリック時のみ展開させることもできます。 オプションも色々と用意されているので、気になる方は是非チェックしてみて下さい。 jQuery Slight Submenu Plugin Demo

気づいたら2014年も上半期が終わってしまいましたね。そんなわけで、2014年の1〜6月までにご紹介したjQueryプラグインをまとめてみました。今回は全部で56のプラグインがありました。そのほとんどが最新（中には古いのもあるかも）のものなので、フレッシュなjQueryを探したい時の参考になれば幸いです。 [ads_center] スライダー、カルーセル系 Flickerplate スマホやタブレットのフリックやレスポンシブにも対応しているコンテンツスライダーです。 フリック＆レスポンシブ対応のコンテンツスライダーを実装できるjQueryプラグイン「Flickerplate」 Paper Slider 紙のようなエフェクトのシンプルなスライダーを実装することができます。 紙のようなエフェクトのスライダーを実装できるjQueryプラグイン「Paper Slider」 PgwSlider レス

そういえばこのサイトではまだパンくずリストを作成していなかったので今回新たに作ってみました。パンくずリストを作成することでGoogleの検索結果にも表示されるので、Webサイトを運営している人は作っておいて損はなさそうですね。 [ads_center] リッチ スニペット 今までパンくずリストをしっかり作ったことがなかったので、どういう風にHTMLをマークアップしていけばいいのかわからなかったので少し調べてみました。 というのも、パンくずリストをただ作っても検索結果に表示されない場合があるみたいだからです。で、これについてはGoogleのウェブマスターツールのページで推奨されるやり方が書いてあったので、今回はこれに従って作っていくことにしました。 パンくずリストなどの検索結果に表示される詳細情報をリッチ スニペットと言います。このリッチ スニペットを利用するためには、以下の3つのマークアッ

jquery.matchHeight.jsというjQueryプラグインを使えば、異なる要素の高さを綺麗に揃えてあげることができます。レスポンシブにも対応しているので色んなデバイスでの表示を最適化してくれますね。 [ads_center] グループにもできる 実際のデモはこちらから確認することができます。 こんな感じで綺麗に高さが揃ってます。 また、複数の単品の要素をグループにまとめることもできるのがいいですね。グループにまとめても高さはしっかりと揃っています。 動作確認は、IE8+、Chrome、Firefox、Chrome Androidで行われています。 バラバラの高さを綺麗にそろえたい時に活用してみたいですね。 jquery.matchHeight.js

Generate CSSというジェネレーターが凄かったのでご紹介します。ボタン、テキストエフェクト、角丸、グラデーションなどといった色んなCSSを生成することができます。出来上がったらコードを取得してコピペするだけという手軽さがいいですね。 [ads_center] Generate CSSの使い方 CSS + CSS3 Generator | Generate CSS 自分が生成したいCSSを選択して、調整していくだけでカスタマイズできます。以下はボタンの調整画面。 調整後はPreviewをクリックするとプレビューが表示されて確認することができます。 完成したらGet CodeからCSSコードを取得できます。 ほんと、たくさんの種類のCSSが用意されていて凄いです。 というわけで、色んなCSSを生成できるジェネレーター「Generate CSS」のご紹介でした。

DarkTooltipというjQueryプラグインを使えば、色んなパターンのツールチップを実装することができます。ホバーやクリックで表示させたり、フリップやフェードといったアニメーションをつけたりもできます。 [ads_center] DarkTooltipの使い方 こんな感じのツールチップを実装することができます。 使い方もシンプルでいいですね。 $('#sample').darkTooltip(); 個人的にとてもいいなって思ったのが便利なオプションが色々と用意されているところ。特に以下の3つがとても便利そうです。 size gravity theme sizeはツールチップのサイズです。small、medium、largeから選ぶことができます。gravityはツールチップを表示する方向をsouth、west、north、eastの四方のいずれかを指定可能。themeはdarkとli

ホーム JavaScript タブからアコーディオンに切り替わるレスポンシブ対応のjQueryプラグイン「jQuery Responsive Tabs」 jQuery Responsive TabsというjQueryプラグインを使えば、タブパネルからアコーディオンに切り替わるレスポンシブに対応したタブを実装することができます。画面の横幅を縮小していくと、垂直型のアコーディオンになります。スマホではこちらの方が見やすいので閲覧する側も嬉しいですね。 [ads_center] jQuery Responsive Tabsの使い方 PCなどの閲覧時ではこのように一般的なタブパネルになっています。 特定のブレイクポイントに来るとこんな感じでアコーディオンに切り替わります。 使い方はとてもシンプルです。jQueryとプラグインを読み込んだら以下のようにHTMLをマークアップしていきます。 <div