先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。Analytics関係とか)なものまでjQueryの小技、プラグインを集めさせていただきました。Analytics/クリック数を取得・表示させる8.郵便番号から住所を自動的に補完9.フォーム入力の達成率をグラフで表示10.読むのに後何分かかるか表示11.離脱時にアラート12.ボタンに直接ローディングアニメーションメニュー13.ナビゲーションを最上部に固定14.アコーディオン15.タブメニュー16.縦方向にスクロールするティッカー17.上部固定メニューをクリックで開閉するビジュアル18.チュートリアルを作る19.年表/横軸のタイムラインを表示する20.地震分布図を作成21.おしゃれグラフを表示22.カレンダー23.可変グリッド画像/写真24.写真にぼかしを入れる25.カラー写真を白黒に26.画像切替27.画像ギャラリー28.リサイズマウスホバー・クリック29.オーバーレイで注釈を表示30.ツールチップ(吹き出し)31.ポップアップ32.マウスオーバーjQuery入門・使い方jQuery入門(初心者)リファレンス(中級者)プラグイン作成スクロール1.ページ内リンク/フッターまわり/トップに戻る定番だけど、必ず知っておきたい。下部までスクロールすると「シュッ」と横からスライドして出てくるもの、右下におすすめ記事などを出したり、どこかで見かけた定番のフッターまわりやスクロール系。KLUTCHE2.パララックスパララックス(視差効果)を取り入れる方法。Demoみたいな感じです。Developers.IOスライド3.カルーセルマウスホイール、スワイプ設定、レスポンシブ対応、上下左右の違う画像もOK。機能が豊富だったので。スターフィールド株式会社4.レスポンシブなスライダーこれも定番。レスポンシブなカルーセルタイプのスライダー。オプションで縦スライド・ランダム表示などもできる。memocarilog5.ヌルヌルサクサクなスライドメニュースライドアニメーションを滑らかに動かす方法として、CSS3を使っていたという。サンプルページはiPhone5でのみ確認できます。画像を自動でクロスフェードで切り替え。レスポンシブ対応でした。AnalyticsでクリックカウントするjQueryコード。外部・内部リンクもカウントする。jQueryプラグイン。通常版と、スペース・改行圧縮版のminifyがある。意外とありそうでなかった。フォーム入力時に「現在○○%進んでます」と進捗状況を表示する。入力項目が多くなりそうなフォームにどうぞ。IDEA*IDEA10.読むのに後何分かかるか表示スクロールの位置を取得し「この記事を読むのに○○分かかります」といった表示をしてくれる。長文を書いてしまう人は、このプラグインをつけてみてはどうでしょう。スクロール位置に合わせて読むのに後何分?が表示できるjQueryプラグイン「jquery-reading-time」:phpspot開発日誌11.離脱時にアラート記事に書かれているとおり、どういったシーンで使うの?と思ったんですが、フォームなどのページ遷移で使うといいんですね。地味だけど覚えていて損なしです。blog12.ボタンに直接ローディングアニメーションたかがローディング効果だと侮ってはいけません。下に伸びたり、中心に向かって降りてきたり。した効果だからこそこだわりたいですね。ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌メニュー13.ナビゲーションを最上部に固定ヘッダーの一番上にメニューなどをピタッと固定させる。こちらもjsの「scrollSpeed」の数値で速度を調整出来ます。コリス14.アコーディオンメニューを開閉するアコーディオン。矢印が回転するもの良いですね。いえば、僕も最初に勉強したのがアニメーション効果やイベントの(hide/show/click)でした。丁寧なチュートリアルで参考になります。jQueryとCSS3を使ったアコーディオンメニューを詳しく説明します|Webpark15.タブメニューjQueryを使ったタブメニュー。フェードインやスクロール等のアニメーション付き。縦方向にスクロールするティッカー。場所を多く取れないレイアウトなんかで活躍できそうです。縦方向にスクロールするクールなティッカーを実装できるjQueryプラグイン「vTicker」:phpspot開発日誌17.上部固定メニューをクリックで開閉するクリックで開閉する吹き出しメニュー。Facebookの上部で見かけるあれです。メニューの三角形は画像かと思いきや、やはりCSSです。上部固定メニューのお供に、jQueryを使ったクリックで開閉するメニュー|Webparkビジュアル18.チュートリアルを作るクリックでチュートリアル、手順説明を出す。キャプチャ撮って説明文が面倒だという時に。blog19.年表/横軸のタイムラインを表示する横軸で年月を表示する。クリックで指定の要素を表示できる。年表に使える!横軸のタイムラインを簡単に表示できるjQueryプラグイン「jqtimeline」|skuare.net20.地震分布図を作成igMapというコントロールを用いて、地震分布図を作成。棒・線・円グラフ何でもOK。フラットデザインで綺麗なビジュアルなので、ブログやHPで使いたくなっちゃいますね。調査や統計の記事を書く場合に説得力が出そうなので、これは実装必須です。Nishikawa's22.カレンダー24種類からテーマを選び適用するDatepickerの使い方。ブログだけじゃなくて、通販サイトなんかでも使えます。UIのDatepickerでカレンダーから楽々日付入力23.可変グリッドグリッドで隙間を計算しながら並べ替えるボックス整列系のプラグイン。グリッド要素の表示/非表示を切り替えれるようになったとのことです。Xlune::Blog画像/写真24.写真にぼかしを入れるフラットデザインに合いそうなjQueryプラグイン。これすごい良いですね!ブラウザに依存する部分はあるのですが、Photoshopでいちいちぼかしを入れる必要がなくなると。ブログのアイキャッチ作成が相当楽になりそうです。要素をPhotoshopの「ぼかし」バリにぼかすことができるjQueryプラグイン「Vague.js」:phpspot開発日誌25.カラー写真を白黒にこれも面白いですよ。通常時は白黒だけどマウスオーバーした部分だけカラー写真になるという、目を引かせるための効果です。jQueryでカラー写真を白黒に「jQuery.BlackAndWhite」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ26.画像切替フェードイン、スクロールアウトはもちろん「ダブルドア」のように上下から挟み込むように画像が消えるものもあります。画像ギャラリー用のプラグインまとめ。Fancybox、レスポンシブ対応のColorboxなど色々。PozuPad28.リサイズサイズを無理やり合わせると、画像が伸びてしまう。そんな時は画像のサイズ統一とトリミングをしてくれるMyThumbnail。異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌マウスホバー・クリック29.オーバーレイで注釈を表示オーバーレイで要素に注釈を表示するプラグイン。サイトの説明やヘルプなんかに使えそうですね。Chardin.jsツールチップ(吹き出し)マウスを乗せると、吹き出し風のツールチップを出します。WordPress有料テーマなどで最初から入ってるものもありますが、入ってなければこれで。機能満載!ツールチップ(吹き出し)を付けられるjQueryプラグイン「Tooltipster」|skuare.net31.ポップアップJavaScriptのwindow.openと同じように、ポップアップで別ウィンドウを開く。Website32.マウスオーバープラグインを使わないマウスオーバー系アニメーション。フェイドでテキスト色・背景色・ずらしなど色々ある。ニトなびjQuery入門・使い方jQuery入門(初心者)jQueryがこの上なく分かる、スライド中心の初心者さん向けリンクです。準備、書き方、メソッドなど。分かる人も、復習として見てみましょう。(1/6)リファレンス(中級者)JQueryの説明が簡単で丁寧に載っているサイトを中心にまとめ。あじゃぱープラグイン作成jQueryプラグインの作り方を、最も分かりやすく書いてあるサイト、スライドをメモしておきます。Room以上サイト制作やブログに必須になっているjQueryのプラグインやコードまとめでした。投稿者:commte株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。した話し方をするおっさん。この後によく読まれている記事2013/09/9忘れた時に便利!「androidアプリ開発」に役立つすごいまとめ去年、楽をしたくてTitaniumでiPhoneやAndroidアプリを作ったものの、Androidの方は動作が重く失敗。基礎から勉強しないとダメだと痛感しました。年末にやるべきだったと思いつつも、今更ながらWeb制作前に知っておくと助かる記事を、コムテブログの中から厳選しました。自分でもよく見返す記事です。Web制作に必要な基本2016/11/7CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ404ページやランディングページに今時のおしゃれなエフェクトを付与したい。今回はCSSのみで簡単に実装できる、背景を動かすエフェクトをまとめました。テキスト2014/09/16起業するときに助かる!Web制作者が独立するために必要なまとめ筆者が起業するまでに必要だったことや流れ。今回は簡易的な情報となっていますが、知っておくとフリーや起業前に役に立つことをまとめます。コメントデータの処理方法の詳細はこちらをご覧ください。