先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」:phpspot開発日誌
QuestionMark.js 先進サイトはやっている「？キー」押下でキーボードショートカットのヘルプが作れる「QuestionMark.js」 キーボードの？を押すとサイトに実装されたキーボードショートカットが表示されます。 なんと、TwitterやGithub、GmailやGoogle+ではこの機能が実装されていますが知っていましたか？ 依存ライブラリがなく軽量サイズなライブラリとなっています 関連エントリ CSS3アニメーションがいい感じのモーダルダイアログ実装jQueryプラグイン「Custombox」 CSS3アニメーションするモーダルダイアログ実装jQueryプラグイン「Block Slide」 フラットで美しいデザインのモーダルダイアログ実装ライブラリ「vex」 シンプル＆軽量なモーダルダイアログ実装jQueryプラグイン「portBox」 フラットだけど立体的なCSS3アニ
Last.fmのデータをジャケット＆ディスク付きでクールに表示できる「jQuery.JamCity」:phpspot開発日誌
Demo - jQuery.JamCity (1.1) Last.fmのデータをジャケット＆ディスク付きでクールに表示できる「jQuery.JamCity」。 次のようにLast.fmのデータをジャケット写真＋ディスクな感じのイメージにしてくれます。マウスオーバーでディスクがちょびっと動くのもいいかんじ 関連エントリ ドロップダウンをフラットでクールにするjQueryプラグイン「EasyDropDown」 レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スモークエフェクトを作成するjQueryプラグイン「AuderoSmokeEffect」 バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 コンテナに画像
指定のテキストを簡単にツイートできる形にできるjQueryプラグイン「jQuery.tweetable」:phpspot開発日誌
指定のテキストを簡単にツイートできる形にできるjQueryプラグイン「jQuery.tweetable」 2013年09月18日- dukerson/jquery.tweetable.js GitHub 指定のテキストを簡単にツイートできる形にできるjQueryプラグイン「jQuery.tweetable」 ルールに沿ったマークアップを書いておけば次のようにクリックでその部分を簡単にツイートできる形にできます。 クリックするとポップアップウィンドウが開いてそこから簡単にツイートすることが可能 これでいちいちツイート用のURLをサーバ側で生成する必要はなく、簡単にツイートしてもらうことができますね。 マウスオーバーでTwitterのアイコンが現れるので、それがツイートにつながる、と分かりやすいアイコンも特徴 関連エントリ Twitter、FB等シェアボタンによる情報送信を防げるjQueryプ
[jQuery]背景にYouTube動画を設定できるjQueryプラグイン – jquery-tubular | STUDIO BENKEI
[jQuery]背景にYouTube動画を設定できるjQueryプラグイン – jquery-tubular 2013/09/13 一度使ってみたかったフルスクリーンで背景動画を表示させるjQueryプラグイン。 結構面倒かなと思ってましたが、YouTubeの動画なら簡単に背景に設定できて、 ほとんどのブラウザでも対応しているプラグインがあったので紹介します。 オリジナルのサンプルは先日iPhoneで撮影した稲光の映像です。画像粗いです^^; サンプル サンプル 本家デモページ 必要ファイル jQuery jquery-tubular ダウンロードしたZipファイルを解凍すると、 サンプルなどいろいろなファイルが入っています。 今回はjsフォルダの中にある「jquery.tubular.1.0.js」を使用します。 ■jquery-tubular設置方法 jQueryとjquery.tub
![[jQuery]背景にYouTube動画を設定できるjQueryプラグイン – jquery-tubular | STUDIO BENKEI](https://cdn-ak-scissors.b.st-hatena.com/image/square/6f014c6f9b6fc5e670e788ac626310d517bb0265/height=288;version=1;width=512/https%3A%2F%2Flab.studio-benkei.com%2Fwp-content%2Fuploads%2F2018%2F03%2Fimg130912_350.jpg)
[jQuery]簡単に設置できるレスポンシブ対応のナビゲーションメニューjQueryプラグイン – Naver | STUDIO BENKEI
最近注文が増えてきたレスポンシブ対応。 ナビゲーションをどう対応するかよく迷います…。 そんなレスポンシブ用ナビゲーションメニューの選択肢の一つとして、簡単に実装できるNaverの紹介です。 ■必要ファイル jQuery Naver – GitHub ■サンプル ウインドウを縮めるとメニューが閉じられます。 今回のサンプルで使用しているナビゲーションのHTMLです。 html <nav id="navre"> <a href="#">home</a> <a href="#">facebook</a> <a href="#">twitter</a> <a href="#">g+</a> <a href="#">rss</a> <a href="#">Contact</a> </nav> ナビゲーションメニューにスタイルを入れます。 メディアクエリを使って幅が740px以下の時にフロートを解除
[jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 | STUDIO BENKEI
トップページ jQuery [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 [jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 2013/08/29 新しいネタでもないですが、最近よく使うのでご紹介。背景に画像を表示させるプラグインは沢山ありますが、 5つぐらい試して、MaxImageに落ち着きました。 ■サンプル サンプル サンプル – 背景スライドショー 本家デモページ ■必要ファイル jQuery MaxImage – GitHub ■設置方法(スライドショー無し) cssファイルを読み込みます <link rel="stylesheet" href="/css/jquery.maximage.css" type="text/css" med
![[jQuery]スライドショー可能！背景に画像をフルスクリーンで表示させるjqueryプラグイン – MaxImage2 | STUDIO BENKEI](https://cdn-ak-scissors.b.st-hatena.com/image/square/3bb180a5d03d27bf6d17d42cdf8e333efe16a7b4/height=288;version=1;width=512/https%3A%2F%2Flab.studio-benkei.com%2Fwp-content%2Fuploads%2F2018%2F03%2Fimg130829_350.jpg)
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」:phpspot開発日誌
前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」 2013年05月02日- PhotoCradle.js. An elegant wrap of your photo collection. 前後に移動する際にサムネイルがポップアップされるスライダー実装jQueryプラグイン「PhotoCradle.js」。 次へ、前へでどんな画像が表示されるのか気になりますが、予めポップアップで表示してくれる親切なスライダーを実装できます。 更に、画像下に表示されているサムネイルにカーソルを合わせると、他の前後の画像がうっすら表示されます。 何度もボタンを押して切り替えるよりもカーソルを合わせるとより多くの画像が一覧できるというのはなかなか便利そう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maski
レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」:phpspot開発日誌
Flipster Demo レスポンシブなカバーフローっぽいスライドショーが作れるjQueryプラグイン「Flipster」 次のようなカバーフローっぽいスライドショーが作れるプラグインが配布されています Safariで見るとうまくうまく動きます この手のプラグインは過去にも見られましたが、レスポンシブというあたりが新しいですね 関連エントリ PCでもスマホでもスワイプで画像が遅れるスライドショー実装jQueryプラグイン「Swipeshow」 PC・スマホ・タブレットで動くクールなHTML5スライドショー実装ができる「Juicebox」 ページ全体に広がるスライドショーを実装できるjQueryプラグイン「jQSlider」 CSS3のみでクロスフェードするワイルドなスライドショー
画像リストをパターンをつけてフェードイン/アウトできるjQueryプラグイン「diagonalFade」:phpspot開発日誌
diagonalFade : A jQuery plugin 画像リストをパターンをつけてフェードイン/アウトできるjQueryプラグイン「diagonalFade」。 単体の画像ではなく複数の画像を徐々にフェードイン・アウトする方法でお洒落な演出が作れます アパレルサイトなんかで軽く使ってみるとオシャレかもしれませんね 関連エントリ ２Dゲームが作れそうなアニメーションjQueryプラグイン「Motio」 アニメ映画のようなロゴアニメーションを実現するjQueryアニメーションプラグイン「SuperScrollRama」 BackgroundImageでスプライトアニメーションさせるjQueryプラグイン「AniDG」 カードを華麗に動かすアニメーションの実装ｊQueryプラグイン「Baraja」 アニメーションでコンテンツをより効果的にみせるためのjQueryプラグイン集 DIVをマー
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」:phpspot開発日誌
jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合はちょっと実装が難しいかも。 そんな時に使えるのがこのプラグイン。デモページを見て頂ければ分かりますが、コンテンツごとに固定されるサイドバーをわけられるようです。 スクロールしても、サイドバー「Heading」と書かれた部分は右側に固定されて表示されます。 更にスクロールするとコンテンツが別れるので、それ以上は下に来ません。 １から実装するとなるとpositionの切り替えが結構大変で挫折しがちな
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」:phpspot開発日誌
ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」 2013年01月29日- scrollNav.js ページ内のどこにいるかを分かりやすくナビしてくれるjQueryプラグイン「scrollNav.js」。 ページの見出しを<h1〜6>のタグで定義しているとして、見出しを自動でサイドバーに固定で出してくれて、カレント位置の見出しを太字にしてナビゲーションしてくれます。 当然、ナビ部分をクリックすれば指定位置までアニメーションしながらスクロールしてくれます。 コンテンツを追加した際も、ナビゲーションを変えなくていいので、とっても便利ですね jQueryプラグインなので初期化するだけで利用もとっても簡単。 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル ページ上部に隠れるナビゲーションバーが実装できるjQueryプラグイン「j
ブラウザ上でまるで美術館。3Dイメージギャラリーデモ:phpspot開発日誌
3D Image Gallery Room | Codrops ブラウザ上でまるで美術館。3Dイメージギャラリーデモ。 単なる画像ギャラリーではなく、周りの空間も再現したようなギャラリーが実現できています。 対応ブラウザでないと動作しませんが、将来的にはこうしたサイトも当たり前の物となっているのかも。 Safari等で見てみましょう 関連エントリ サムネイルがシャッフルされてクールなギャラリー実装「Photofy」 卓上に写真を置いたようなインタフェースのギャラリー作成用のjQueryプラグイン 動画ギャラリー用WordPressプラグイン10個
フルスクリーンでページめくりをするUI実装デモ:phpspot開発日誌
Fullscreen Pageflip Layout with BookBlock フルスクリーンでページめくりをするUI実装デモ。 なかなかいい感じのインタフェースのデモとサンプルのダウンロードが可能。 ページめくり部分はjQuery+CSSで実装されており再利用ができそう ページ全体をめくるというのもなかなかいい、と感じるデモでした。 完成度が高いのでそのままサイトに移植してもよさそうですね 関連エントリ ページめくりを実現するためのjQueryプラグイン集 Flipboardみたくページめくりを実現できるjQueryプラグイン「BookBlock」 HTML5で美麗なページめくり効果が作れるJSライブラリ「turn.js」 美しいページめくり効果が作れるjQueryプラグイン「Flippy」
Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」:phpspot開発日誌
Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 2012年10月24日- Product Colorizer 1.1 | A jQuery Plugin Written by Nik Korablin Tシャツ等の商品の色を自由に変えられるjQueryプラグイン「Product Colorizer」 色を選択すると同じ絵柄で色だけを変更することが出来るjQueryプラグインです。 商品をウェブ上でカスタマイズできるようなECサイトなどで使えそうですね。 色部分をクリックで自由に色が変えられます。まあ、色に応じた写真を用意しておくのも手ではありますが、何百通りとかある場合や、自分でカスタマイズするようなシステムの場合は使えそう 仕組みがまた面白くて、次のようにPNG画像でマスクを被せつつ色をかぶせているみたいです。 面白いアイデアですね。応
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ピュアCSSのエモティコンを実装できるjQueryプラグイン「Emoticons」:phpspot開発日誌
スナイパーになれるjQueryプラグイン「jquery.snipe」:phpspot開発日誌
クラスメソッド発「やってみた」系技術メディア | DevelopersIO