[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips
jQueryには高性能なプラグインがたくさんリリースされていますが、ほんの数行のコードだけでも便利な機能を簡単に実装することもできます。 Webサイトで最近よく利用されている便利な機能を実装するスニペットを紹介します。 jQuery Tips Everyone Should Know -GitHub イラスト: Girls Design Materials コードはMITライセンスで、個人でも商用でも無料で利用できます。 ページの上に戻るボタン 画像のプリロード 画像がロードされているかチェック リンク切れの画像を自動修復 ホバーのトグル 入力欄を使用できなくする aタグのクリックイベントだけを利用する アニメーションを簡単に設定する シンプルなアコーディオン 異なる高さのdiv要素を揃える 外部リンクを新しいタブ・ウインドウで開く テキストが無い要素は非表示にする ページの上に戻るボタン
![[JS]ほんの数行で便利な機能を実装するjQueryのスニペットのまとめ -jQuery Tips](https://cdn-ak-scissors.b.st-hatena.com/image/square/2305f06c940fb5e398486ead4dbf84a83e3fa8a8/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015102301.png)
[JS]jQueryを使って、超スムーズなCSS3アニメーションを実装する -jQuery Transit
昨日に続いて、jQueryとCSS3アニメーションのコラボです。 今回紹介するのは、jQueryでCSS3アニメーションを超スムーズにするように助けるプラグインです。 jQuery Transit デモページ [ad#ad-2] jQuery Transitの使い方 jQuery Transitのデモ jQuery Transitの対応ブラウザ jQuery Transitの使い方 「jquery.js」の後に当スクリプトを外部ファイルとして記述します。 外部ファイル <script src='jquery.js'></script> <script src='jquery.transit.js'></script> あとはjQueryの「.animate」の代わり、「.transiton」を使用してアニメーションを実装します。 $('...').transition jQuery Tra
jQuery Mobileで何ができるのか、どうやったらできるのかを学べる一冊 -jQuery Mobile スマートフォンサイト デザイン入門
jQuery Mobileって何？から、簡単なスマートフォン用サイト作成、実践で役立つカスタマイズ方法など、基礎知識から実践的なテクニックまでjQuery Mobileを学べる本を紹介します。 昨日、発売したばかりなので、一度書店で手にとってみてください。 [ad#ad-2] jQuery Mobileは、少ない記述でスマートフォンに適したかっこいいUIやさまざまな動きを提供するもので、スマートフォン向けのフレームワークで一番人気があるといっても過言ではないでしょう。 本書はjQuery Mobileを始めて知った人から、さらに深くマスターしたい人まで、基礎から応用までステップごとに学べるとても分かりやすい一冊となっています。オールカラーページで、コードとキャプチャもたくさん掲載されおり、眺めているだけでもなんとなく分かった気分になるかもしれませんｗ こういったフレームワークで一番大切こと
[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple
Googleの新UX「Material Design」のアナウンス以降、波紋のエフェクトを数多く紹介してきました。例えばこれとかRiiple Click EffectとかWavesとか。 それらとは一味違い、WebGLでリアルな波紋を描くjQueryのプラグインを紹介します。 jQuery Ripples Plugin -GitHub ↑ファイルサイズを軽減してます。実際はもっと本物の水面です。 jQuery Rippleのデモ jQuery Rippleの使い方 jQuery Rippleのデモ デモはChrome, Safari, Firefox, Opera, IEは11+で、OpenGL 2.0対応のビデオカード内蔵のPCでご覧ください。 ページ上をクリックすると、そこから波紋がどんどん増えます。 jQuery Rippleの使い方 Step 1: 外部ファイル 当スクリプトとjq
![[JS]エフェクトの美しさがスゴイ！Webページを水面にし、波紋を生み出すスクリプト -jQuery Ripple](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4d2ad555b67ee7509f227b6ac09d4c92e1ab29b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014110501.gif)
[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle
ダウンロードファイルに含まれているデモ jQuery.twinkleの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="jquery-1.10.2.min.js"></script> <script src="../jquery.twinkle-0.7.1.js"></script> </body> Step 2: HTML アニメーションを適用する要素にclassやidを加えます。 <div id="twinkle1">click !</div> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。 $(selector).twinkle(); アニメーションやエフェクトはオプションで設定します。 var options = { "effe
![[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle](https://cdn-ak-scissors.b.st-hatena.com/image/square/1664f643712bb7cebf68cc882a1117f2f93e0a5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082802.gif)
jQueryでプラグインを単に使うだけでなく、実務で役立つスキルを身につけたい人にオススメの本 -jQuery デザインの教科書
jQueryはプラグインが豊富にあり、非常に便利で、確かに簡単です。しかし、自分にあったプラグインが見つからなかったり、カスタマイズする必要があったり、場合によってはプラグインに合わせてページを作り直したりといったこともあります。 jQueryを学ぶ際にプラグインから一旦離れ、実務で役立つスキルを確実に身につけたい人にオススメの本を紹介します。 本書のスクリプトは2014年現在あちこちで見かけるレスポンシブ対応のさまざまなUIをシンプルなコードで実装しており、単なる書籍サンプルにとどまらない高いクオリティで実用的なものとなっています。 jQueryとちょっと真剣に向き合いたいなと思った時、手にとってみてください。
a要素にclassを加えるだけで別窓や印刷、ページ内アンカーへのスクロールなどの機能を加えるスクリプト -jQuery A+ | コリス
HTML5でもXHTMLのどちらでもvalidなHTMLで、a要素にclassを加えるだけでリンクを別窓で開いたり、モーダルウインドウを表示したり、通知パネルを表示したり、ページ内アンカーへアニメーションでスクロールさせたり、ページの印刷ボタンとして機能したりなど、a要素にさまざまな機能を加えるjQueryのプラグインを紹介します。 デモページ デモでは、a要素をトリガーとするさまざまな機能がclassで設定できます。対応している機能は以下のようにたくさんあります。 リンクを別窓（タブ）で開く リンクを開く前に確認ダイアログを表示 iframeを使ったダイアログを表示 Ajaxを使ったダイアログを表示 モーダルウインドウを表示 フレーム内にリンクを表示 通知パネルを表示 印刷を表示 ページ内アンカーへアニメーションでスクロール スクロールのスピード設定 スクロールの位置設定 ※それぞれ細か
[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。 全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。 ※文字間のカーニングは、フォントごとに設定が必要です。 jQuery.Kerning.js jQuery.Kerning.js -GitHub jQuery.Kerning.jsのデモ jQuery.Kerning.jsの使い方 jQuery.Kerning.jsのデモ デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。 適用されている方が、読みやすいですね。 ゴシック体のデモ、上：カーニング無し、下：カーニング有り jQuery.Kerning.jsの使い方 Step 1: 外部ファイル jquery.j
jQueryでの疑問が理解に変わる、スクリプトの基礎力を磨く本 -jQuery 最高の教科書
jQueryを使ったウェブページでのさまざまな表現や演出をプログラム経験の少ないウェブ制作者でも基礎からしっかりと学べる本を紹介します。 各サンプルは現役アートディレクターが監修しているので、かっこよく実用的なものばかりです。 「最高の教科書」というタイトルを見て、高度なテクニック本かなと思って読んでみましたが、jQuery, JavaScriptに初めて取り組む人にでも分かりやすく書かれたオススメの本です。 いい意味で裏切られました。
[JS]複数の指定した範囲ごとにスクロールに追従するパネルを設置するスクリプト -jQuery Stick ‘em
ページ内の複数の指定した範囲ごとに、スクロールに追従するパネルを設置するjQueryのプラグインを紹介します。 World Wildlife | Fund Work | Viget 左に長い画像、右にそれを説明するテキストがあります。通常、画像の下までスクロールしてしまうと、テキストを読むために上にスクロールをすることになります。 しかし、このサイトでは画像の下までスクロールした際、テキストがスクロールに追従して移動します。 スクロールに追従するコンテンツは複数設置する可能性があるので、当然このスクリプトもそのようになっています。 jQuery Stick ‘emのデモ デモでは、左に長いコンテンツがあり、右のグレーのパネルが指定した範囲内のみスクロールに追従します。 追従の様子 jQuery Stick ‘emの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを
[JS]派手な演出は無し！レスポンシブ対応のレイアウトを素早く構築するスクリプト -jquery.columns
サイズを変更するとアニメーションでパネルが移動するなどの派手な演出は一切無しで、レスポンシブ対応のレイアウトを素早く提供するjQueryのプラグインを紹介します。 jquery.columns -GitHub jquery.columnsのデモ jquery.columnsの使い方 jquery.columnsのデモ 対応ブラウザは、IE9/10, Firefox, Chrome, Safari, Operaです。 まずは、デスクトップサイズとして幅1,200pxでの表示から。 デモページ：幅480pxで表示 jquery.columnsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.
[JS]画像を使用しないで、背景などにストライプ柄を手軽に適用できるスクリプト -jQuery Stripes
指定したエレメントにストライプの背景を設置できるjQueryのプラグインを紹介します。 ストライプは画像なしで、カラーや幅や角度を簡単に変更できます。 デモページ：コードを変更 jQuery Stripesの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 Step 2: HTML ストライプを適用するエレメントを配置します。 <img id="stripes" style="background:#888" /> Step 3: JavaScript jQueryのセレクタでストライプを適用するエレメントを指定し、ストライプの定義をしスクリプトを実行します。 $('#stripes').stripes({ lineWidth: 10, separation: 10, angle: 45, // degrees degrees: t
jQueryを実務で使う人がまず手に取って欲しい本 -jQueryデザイン入門 改訂新版（1.9対応）
HTML, CSSが使えるようになり、jQueryのプラグインを利用している人、専門用語ばかりでなく実制作に役立つ知識を基本からしっかり学びたい人にオススメの一冊「jQueryデザイン入門 改訂新版」を紹介します。 jQueryの入門書を買う時は、必ずこの本と比較することをオススメします。 通称「ドーナツ本」が3年ぶりに改訂新版としてでました。 改訂はjQuery1.9の対応だけではありません。 jQueryは1.3.2から、1.9.0に。 サンプルは全てXHTMLから、HTML5に。 IE6のテクニックは減らし、スマフォ向けテクニックを追加 お値段も3,500円から、2.980円（税別）に！ ※値段変更は情報量はそのまま、レイアウトの密度をあげページ数削減でがんばったそうです。 サンプルは全て商用利用OKで、著作権表記の必要もなく、改変も自由です 購入者用のダウンロードページも用意されて
[JS]jQueryのプラグインを利用する時に、アイデアを加えてかっこいいエフェクトを実装する -jQuery Visible
Slide in box -YouTube 実装 使用するプラグイン「jQuery Visible」は、非常にシンプルです。 (function($){ /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ $.fn.visible = fu
[JS]ブログの記事を読み終えたユーザーに、シェアなど次のアクションを促すスクリプト -jQuery Engage
WordPressで作られたブログなどでスクロールして記事を読み終えた時に、その記事をシェアするボタン、記事へのコメント入力フォーム、メールニュースなどの告知を配置したパネルを下からアニメーションで表示するjQueryのプラグイン、いやWordPressのプラグインと言った方がいいのか、を紹介します。 デモページ：記事を読み終えたとこ パネルには左から、コメント、ソーシャルメディア、メールニュースが配置されており、これはカスタマイズできます。 jQuery Engageの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※WordPressなのでjquery.jsは既に利用していると思いますが、無ければ追加してください。 <script src="js/dist/jquery.engage.min.js" type="text/javasc
[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap
Event Capturing 各イベントを取得することもできます。 jQuery.panelSnapの使い方 Step 1: 外部ファイル スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="/path/to/jquery.js"></script> <script src="/path/to/jquery.customEvents.js"></script> <script src="/path/to/jquery.panelSnap.js"></script> </head> Step 2: HTML コンテンツは一つずつsection要素（変更可能）で並列に配置します。 スタイルシートは各コンテンツ自由にしてください。 <body> <section>コンテンツ：1</section> <section>コンテンツ：2</sect
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
jQuery.fullContent
複数のコンテンツをそれぞれブラウザの枠いっぱいに表示し、それらを水平・垂直のマトリックス状に配置し、ダイナミックなアニメーションで切り替えるjQueryのプラグインを紹介します。 jQuery.fullContent jQuery.fullContent -GitHub jQuery.fullContentの特徴 jQuery.fullContentのデモ jQuery.fullContentの使い方 jQuery.fullContentの特徴 ウインドウのサイズいっぱいのコンテンツを水平・垂直のアニメーションで切り替えます。 各コンテンツは、碁盤のように水平・垂直に配置可能。 コンテンツ間の移動はアニメーション。 ハッシュリンクでの直接アクセス対応。 ハッシュリンクでの履歴にも対応。 IE8+をサポート。 jQuery.fullContentのデモ デモはモダンブラウザ、IE8+でご覧く
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery UIの各エレメントをレトロ風のかわいいデザインに変更するテーマファイル -jQuery UI Theme Retro
jQuery Mobileの実務で役立つ知識を基本から応用までしっかり学べる本 -jQuery Mobileコーディング