jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
06.Google Analyticsのクロスドメイン対応を自動化 :: 「清水 誠」公式サイト
2010年11月20日 00:30 サンクトガーレンのサイトは、複数のドメインで構成されています。 本サイト (www.sanktgallenbrewery.com) 旧ショップ (tsst.securesites.net) 新ショップ (sanktgallen.shop-pro.jp) ブログ (sweetsbeer.cocolog-nifty.com) Google Analyticsは、それぞれのドメインに対してのみ情報を保存できる1stパーティCookieを使って、ユーザー（ブラウザ）ごとに値が異なるランダムなIDを保存しています。そのため、ドメインが複数あるサイトの場合、ドメインごとに異なるユーザーとして認識されてしまい、ページ間の移動も途切れてしまいます。リンク元のサイトを表すリファラーや、Googleで検索したキーワードと、購入回数が結び付かなくなります。 この問題を解決する
【使用例】画像もHTMLもOKな軽量Lightboxライブラリ「Floatbox」
下準備 Floatbox Image and IFrame Viewer <http://randomous.com/tools/floatbox/>から、スクリプトをダウンロードします。 <head></head>内に、以下のように、CSS１点とJavascript１点をページに読み込みます（パスは適宜変更してください）。 <link type="text/css" rel="stylesheet" href="floatbox.css" /> <script type="text/javascript" src="floatbox.js"></script> <body></body>内に、以下のような書式で記述します（読み込む対象が、単独の画像の場合）。 <a href="neko.jpg" rel="gallery" title="画像のタイトル">イメージ</a> 以上！ 応用
jQuery.flickSimple.js
※アイコンはNIXUS Icon Packを使わせていただきました。 特徴 iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。 同じような動作をするプラグインは他にもありますが、このプラグインについては以下のような目的のもとに作りました。 フリック動作のみを実装する 見た目に関連する部分は、なるべく自由にできるようにする その代わりに、拡張しやすいようにする 内部のパラメータに簡単にアクセスできるようにする コールバック関数を用意する iPhone、Androidだけでなく、PCのブラウザ上でも動作させたい IE6でも動いた iPhone、Safari等、CSSアニメーションが使えるものは使う iPhone、Androidの縦持ち・横持ちに対応する 子要素の中にアンカーや画像があっても大丈夫 Macの場合、画像がドラッグさ
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
jQueryによる非同期のメールフォーム作成
以前に書いたPHPによるメールフォーム作成では、送信ボタンを押した後にページが遷移してしまうが、自分の作成しているwebページでは遷移させたくなかったので、非同期でメールを送れるように以前のものを改変する。 head部分のjavascript。 フォームが書いてある部分。 名前： メールアドレス： 本文： 最後にPHP。 送信ボタンを押して、メールの送信に成功するとphpで最後にechoしているresponseがjQueryのajaxメソッド内のsuccessメソッドに返ってくる。 formの送信ボタンのtypeをsubmitからbuttonに変えたのは、submitの場合はクリックすると自動的にフォームの値をクリアしてしまうからだ。 確認画面でキャンセルを押して、フォームが真っ白になってしまったら、もうその人は決してお問い合わせをすることはない。 なので、buttonにして、メール
jQueryでメール送信フォームを作る
求人の応募フォームを作ってよ、という依頼があって、そのときにごにょごにょと作ったのがあるので、それの簡易版を基にいくつかjQueryのプラグインを紹介する。 今回使用するJavascriptファイルは以下の５つ。 jquery-1.4.2.min.js http://jquery.com/ 言わずと知れたjQueryライブラリ。 jquery.validate.min.js http://bassistance.de/jquery-plugins/jquery-plugin-validation/ 検証（バリデーション、Validation）を行うプラグイン。 jquery.scrollTo-1.4.2-min.js http://flesler.blogspot.com/2007/10/jqueryscrollto.html 滑らかなスクロールを行うプラグイン。今回のサンプルでは縦方向に
jQuery事始め・コピペに頼らず、基礎知識を理解して実際に動かしてみる - かちびと.net
人気のJavaScriptライブラリ、jQueryもかなり 情報が増えました。僕の様に知識が無くても 簡単に動きのあるWebサイトや、更なるユー ザビリティの向上を可能にしてくれましたが、 いつまでもコピペではいずれ困る事になります。 その前にそろそろ基礎から学んでみませんか。 という訳で、jQuery事始め。さほど知識が無い僕が書くのも微妙なんですが、一緒に学んでいきましょう、という事でご了承下さい。内容は基礎中の基礎です。 いつまでもコピペに頼っていては、何か問題が起こったときに対応できませんし、そもそもコピペするならjQueryである必要はありません。 でもjQueryはすごく便利なので、ちゃんと使いこなしたいところですよね。この記事が、誰かが勉強し始める切欠になれば幸いです。 jQueryを使うには まず、jQueryを利用するには本体を読み込む必要があります。方法は2つあって、本
アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」:phpspot開発日誌
アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 2012年05月30日- SUPERSCROLLORAMA アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」。 動きについてはサイトを見ていただくとよく分かります。 マークアップは至って普通の文字列なんですが、１個１個切り離してタイムラインアニメーションしちゃうということをやってます かなり細かいところまでアニメーション制御が可能で、そのままぺたりと使うもよし、動きにこだわってもよしな感じです 関連エントリ faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyB
サイトの背景で雲などが動く！アニメーション効果を出す JavaScript 集
最近は、コワーキングスペース タネマキ の方で、記事を更新しています。@uetsuhara でも気になったニュースや記事など流してます。良かったら覗いてみてください。 読了目安 1分58秒 宣伝ぽいですがてか宣伝になりますが、横浜のコワーキングスペースタネマキで、また背景の雲が動き始めました。やはりちょっと重い？とのことで、現在一時停止中です。別の方法を模索中。 understandard.net が実装してくれました。詳しいことは彼にｗ ついでに似たようなスクリプトを集めてみました。まぁタネマキでも使っている $fx というライブラリで十分な気もしますが。なかなか動きが軽い気がします。 背景を動かすスクリプト一覧 $fx – JavaScript animation library 僕らが今回使ったのはこちら。なかなか良いかと。高機能な割には、軽量ってのが売りのようです。雲などの画像レイ
【IEでjQuery】角丸と透過PNGを実現するプラグイン « tech*
ツイートIEこのやろう。。。でもIE見捨てるわけには。。 というわけで、jQueryを使って、簡単に楽して角丸と透過PNGを実現してしまいます。 まずは角丸。 jQuery Cornerというプラグインを使います。 このプラグインを使えば、IE以外にも角丸だけでなく、例えばドッグイヤーなどの角スタイルも表現できます。 使用例 1 2 3 $(function(){ $("#example").corner(); }); 詳しくは以下のリンクから。 http://www.malsup.com/jquery/corner/ 次は透過PNG。 これはIE6がターゲットです。 ifixpngというプラグインを使います。 使用例 1 2 3 $(function(){ $("#example").ifixpng(); }); 詳しくは以下のリンクから。 http://jq
実質1行でメールフォームのSPAMを防ぐjQueryスクリプト
3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンし、このサイトのサイドバーに クックパッド みたいに気軽にメッセージを送れるフォームを設置しました。 しばらくは何事も無かったのですが、ある日突然大量のSPAMメッセージが送られてくるように…(●´⌓`●) 酷い時には3分〜5分に1通送られてくるし、試しに送り元のIPアドレスとホストを調べてみたら毎回バラバラなので困りました。 こんな時、多くのサイトでは CAPTCHA と呼ばれる読みづらい英数字の羅列の画像を入力させることが多いと思いますが、それでは「気軽にメッセージを送れるフォーム」とは言いづらいですし、サーバーにもページを表示させるたびに毎回余計な負担がかかってしまいます。 試しにWordPressのSPAM防止などに広く使われている Akismet というSPAM防止APIをメール送信スクリプ
[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips - Web 業界の技術屋 | VIVID Labs.
悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。 あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。 実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き… 出来てないじゃん！ と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。 普通に img 要素で描画する分には問題無い 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる 普通にサイトを作っていて、png ファイルの要素の opacity
イメージスライダーを付けてみよう
それでは順を追って説明していきますね。ダウンロードしたファイルを解凍すると、以下のようにたくさんのファイルやフォルダがありますね。今回は Anything Slider を使っていますが、大体どんなプラグインも似たような構成になっていると思います。 anythingslider folder 2. HTMLをマークアップ HTML ファイルがいくつかありますが、これはデモ用のファイルです。プラグインによっては 1枚しかない場合も多いですね。Anything Slider の場合は、たくさんのデモファイルが用意されています。これら HTML ファイルは、HTML でのマークアップを参考にしたりするのにも使えますよね！ それではデモファイルを参考にして、HTML をマークアップしていきましょう。今回は一番シンプルなスライダーを作ってみたいと思います。マークアップは単純に<ul>と<li>で画像
jQuery Effects のまとめ
jQuery UI アニメーションエフェクトのまとめ（サンプルをクリックでアニメーション） サンプル エフェクト オプション 説明
semooh plugin sample site
Index of Semooh jQuery Sample Site 画像 1.画像を切り替える（フェード） 2.画像を切り替える（フェード2） 3.画像を切り替える（サイズ、フェード） 4.画像を切り替える（スライド） 5.画像を切り替える（奥行き） 6.画像を切り替える（サイコロ） 7.画像を切り替える（シャッター） 8.画像を切り替える（カルーセル） 9.画像を切り替える（色々） 10.画像の一部分を拡大する 11.縮小した全景で画像を見る 12.画像をパノラマ風に表示する 13.画像を反射する 14.LightBoxを表示する 15.画像にマスク処理を施す 16.マウスオーバーで画像を拡大表示する 17.透過PNGをIE6でも表示させる スタイル 1.マーキーを滑らかに実装する 2.クリックできる範囲を広げる 3.要素の高さを最大のものに揃える 4.グラデーションを作成する 5.文
独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」:phpspot開発日誌
jScrollbar : make your own scrollbar for scrolling contents with jQuery UI - MyjQueryPlugins 独自デザインのスクロールバーにする際に使えるjQueryプラグイン「jScrollbar」 綺麗にデザインされたバーもブラウザ依存のスクロールバーで台無しになってしまったり、OSによってデザインに違いが出てしまったりとあまりよいことはないですね。 かといってデザインを崩したくない場合なんかで、スクロールさせないわけにもいけないような時に使えそうなプラグインです。 以下のような自由なデザインのスクロールバーが作れます。画像を切り替えることで簡単に独自デザインにも出来ます。 で、独自デザインにしつつも、ちゃんとマウルホイールにも対応しています。 Twitterの新UIなんかでもスクロールバーが独自になっていたり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
4つのバリエーションに変えれるLightbox風のスクリプト ColorBox | CSS Lecture
simplelib with jQuery
JavaScript UI Components - Build Better Apps Faster - Progress Kendo UI
