JavaScript 26件

【jQuery】スティッキープラグイン「Sticky-Kit」をPC端末でのみ有効化する

デモを見る ファイル一式をダウンロードする http://leafo.net/sticky-kit/ 検証済みブラウザとOS IE 9~ F…

【jQuery】YouTubeをモーダル表示させるなら「Magnific Popup」[IE9対応]

デモを見る ファイル一式をダウンロードする YouTubeをモーダルウィンドウで表示させたいときは、jQueryプラグイン Magnific…

【Google Map】よくある6つの要望に Google Maps JavaScript API で対処する [IE9対応]

デモを見る ファイル一式をダウンロードする 「Google APIキーの発行って面倒じゃないの…?」 Googleアカウントを持っていれば、…

【jQuery】多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]

デモを見る ファイル一式をダウンロードする 仕事で必要だったため作りました。 作った後に気づいたことですが、西畑一馬氏のコードとほぼ同一のも…

【jQuery】フルFlashのようなサイト制作は、8要点を押さえれば乗り切れる

デモを見る ファイル一式をダウンロードする エンタメ系サイトのコーディングなどでは、CSS3とjQueryを駆使したフルFlashっぽい仕上…

【jQuery】カルーセルプラグイン「Owl Carousel 2 Thumbs」の使い方 [IE8一部未対応]

デモを見る ファイル一式をダウンロードする カルーセルスライダー Owl Carousel に、サムネイル機能を補完したプラインが Owl …

【jQuery】カルーセルプラグイン「Owl Carousel 2」をカスタマイズする [IE10 / Android 4.4 以上]

Owl Carousel は、有名プラグインの中で最も滑らかにスライドする、タッチデバイス対応のカルーセルスライダーです。バージョン2はなぜ…

【jQuery】Lightbox プラグイン「slick lightbox」をカスタマイズする [IE9以上]

デモを見る ファイル一式をダウンロードする IE8 以下では一切使えません。 カルーセルスライダー  slick を、Lightbox化した…

【jQuery】スクロールイベントでよく使う基本的な3つの .offset().top [IE7対応]

Webサイト制作でちょくちょく使っている、スクロールイベントの offset().top 3つです。 ただスクロールイベント系は、プラグイン…

【jQuery】1枚背景画像サイトで使えるかもしれないパララックスサンプル2つ [一部IE8未対応]

サンプルの汎用性が低いため、実務で使えるかは微妙です。ただ、「こういうことが出来ます」と提案できるため、覚えておいて損はないはず。 目次 画…

【jQuery】覚えておくと便利な、スクロールで対象要素がフェードするサンプル3つ [IE7対応]

1枚画像背景のブロックをスクロールしていくサイトなどでは、ブロックの中身をフェードさせると、容易に見栄えを良くすることができます。 あまりや…

【jQuery】Animate.css との合わせ技で、フルFlashサイトみたいな動きを作る [IE10以上]

デモを見る ファイル一式をダウンロードする 本記事のデモは Sublime Text で使っています。 アニメや映画などを紹介するエンタメ系…

【jQuery】シンプルなスクロールスパイを作りました [PC限定 / IE9対応]

デモを見る ファイル一式をダウンロードする 皆さんブログで Bootstrap のスクロールスパイをよく紹介されていますが、余計なコードを多…

【jQuery】実務で必要な11項目をクリアした、レスポンシブドロワーメニューを作りました [IE9以上]

デモを見る ファイル一式をダウンロードする 2017/01/29 Mac OS / Safari 限定でスクロールできなくなりました。面倒く…

【jQuery】[緊急] iOS 8.4.1 の :hover バグをユーザーエージェント切り替えで対処 [IE7対応]

昨日、「ブレークポイントで切り替えれば問題なし」と投稿しましたが、検証を重ねるとダメなことが判明しました…。すみません。 :hover で透…

【jQuery】タッチデバイスでも滑らかなスムーススクロールを作りました [IE8対応]

2016/07/08 jQuery 2.2 対応に修正しました。 デモを見る ファイル一式をダウンロードする お客さんから「スマホでスムース…

【jQuery】表示させたときにスクロールを固定する、シンプルなモーダルウィンドウを作りました [IE9一部未対応]

デモを見る ファイル一式をダウンロードする 2016/05/31 translateY() を追加した滑らかバージョンを作っておきました。 …

【jQuery】サイド固定の縦100%と、Amazonライクなマウスオーバーメガメニューを作りました [スマホ未対応 / IE8対応]

デモを見る ファイル一式をダウンロードする ふと、「Amazonのメガメニューはどの程度のコードで作れるだろう?」と思い、作ってみました。タ…

【jQuery】横幅3種類、マウスオーバードロップダウンを作りました [スマホ未対応 / IE8対応]

デモを見る ファイル一式をダウンロードする 仕事で依頼されるドロップダウンは、大抵この3種類なので作っておきました。マウスオーバーをスマホ対…

【jQuery】タッチデバイス対応のマウスオーバーギャラリーを作りました [IE8対応]

デモを見る ファイル一式をダウンロードする 下記記事のマウスオーバー版を作りました。 フェードに挑戦しましたが、ちょっと上手く出来ないのでシ…