画像内にテキストや図形を合成できるjQueryプラグイン「naver/ImageMaps」:phpspot開発日誌
GitHub - naver/ImageMaps: jquery plugin which can be partially linked to the image 画像内にテキストや図形を合成できるjQueryプラグイン「naver/ImageMaps」 地図等にピンを立てたり、説明文を入れたりと、ブラウザ上で画像を作ることができます。 画像の合成をブラウザ上で実施したい場合等に使えそうです 関連エントリ 画像の読み込み順序を指定できるJS「EagerImageLoader」 Mediumのような画像ズームエフェクトが実装できる「enhance.js」 画像の特定部分をどんどんズームできる「jfMagnify」 画像の特徴色をJSで抽出できる「Colorify.js」 HTMLをCanvasを使って画像に変換するjQueryサンプル
サイトのテーマを変更する機能を提供する「jquery Theme Switcher」:phpspot開発日誌
jquery Theme Switcher by AM UI サイトのテーマを変更する機能を提供する「jquery Theme Switcher」 テーマ変更のためのUIと仕組みを提供してくれます。サイトカラーをユーザ毎にカスタマイズできる機能を実装する際の参考に。 関連エントリ ページデザインのテーマ変更エンジン「theemey.js」 高品質なMaterialデザインのBootstrapテーマ「Material Kit」 ページのカラーテーマを閲覧者が選べるようにできる「dynamicColorPage」 BootstrapでiOSアプリ風UIを作るBootstrapテーマ「Bootstrap iOS7」
タイムゾーンを指定してアナログ時計を実装できる「jClocksGMT」:phpspot開発日誌
GitHub - mcmastermind/jClocksGMT: jQuery based analog and digital clock(s) based on GMT offsets. Requires jQuery Rotate plugin. タイムゾーンを指定してアナログ時計を実装できる「jClocksGMT」 次のような色々な種類のアナログ時計を実装できます。単にローカルタイムを出すだけではなく、GMTのオフセットを指定して時計表示できるため、海外では今何時、というのを表示するのにも適しています。 関連エントリ アナログ時計のUIで時刻を入力できるjQueryプラグイン「ClockPicker」 リアルなアナログ時計が実装できるjQueryプラグイン「FlipClock.js」
Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」:phpspot開発日誌
GitHub - hellsan631/material-avatar: Simple material design avatars using canvas Canvasを使ったMaterialアバター実装jQueryプラグイン「material-avatar」。 次のような四角or円形＋文字でマテリアルデザインっぽい画像を作れます。 WEBサービスなどで、画像を使わなくても個人のアバターとして使うことが出来そうですね。 関連エントリ Rebound.jsとCanvasを使った超カッコイイローディングアニメーション実装デモ Canvasを使って画像の明るさ、コントラスト、セピア等の細かい調整が出来る「CamanJS」
ズーム、回転、スライド等の機能が詰まった画像ビューワ機能実装「Viewer.js」:phpspot開発日誌
ズーム、回転、スライド等の機能が詰まった画像ビューワ機能実装「Viewer.js」 2016年02月16日-
モバイルアプリ向けのランディングページテンプレート・「Takeoff」
Takeoffはモバイルアプリ向けのランディングページのテンプレートです。よく配布されているような、いわゆるWebページのテンプレは使わないのですけど、こちらはスタイルを初期化すれば使いやすそうだったので備忘録として。スクロール連動型のペラサイトになっています。背景とテキスト、モックアップが変化するだけのシンプルなもの。RWDにも対応しています。割と良いのですが、スマフォで下部から上部にスクロールする時と上部から下部にスクロールする時のエフェクトが全く同じなので混同するかも知れません。ここはエフェクト直して使ったほうが良さそう。ライセンスはMITです。 Takeoff
ResponsifyJS - 画像の表示をレスポンシブに変化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブコンテンツの中で最も扱いづらいのは画像と言えます。バイナリファイルであるために画面の大きさに関わらず同じサイズですし、画面幅の変更に対してレスポンシブに変化することができません。 そこで使ってみたいのがResponsifyJSです。画像をレスポンシブにするjQueryプラグインで、単に縮小されてしまう表示とは一味違った演出が見ものです。 ResponsifyJSの使い方 ResponsifyJSを使った例です。これは普通の表示です。 画面幅を変えました。写真は小さくなりましたが、メインとおぼしき部分の大きさはほとんど変わっていません。 実際にブラウザのウィンドウを動かしてみると、画面幅に応じて画像の内容が若干動いているのが分かるはずです。 ResponsifyJSは画像
タグによってアイテムをフィルタする仕組みを提供するjQueryプラグイン「Tagsort」:phpspot開発日誌
Tagsort jQuery Plugin - Will Haering タグによってアイテムをフィルタする仕組みを提供するjQueryプラグイン「Tagsort」 divのattrにtagを設定しておけば、簡単にアイテムのフィルタリングを可能にするUIが組めます。 クライアントに一括で吐き出して、クライアント側でフィルタする、という効率的な方法を実施したい場合に使えそうです 関連エントリ アバター専用のpickerを実装できるjQueryプラグイン「Tapatar」 サイトのロゴ等をプログレスバーにすることができるjQueryプラグイン「LoadGo」 背景色にブラーをかけて今っぽくするjQueryプラグイン「Background Blur」 背景色をなめらかに変更できるjQueryプラグイン「Spectrum」
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」:phpspot開発日誌
jQuery Mask Plugin - A jQuery Plugin to make masks on form fields and html elements. マスクを設定して入力に制限をかけられる「jQuery Mask Plugin」 日付、電話番号等の細かなマスクを設定してValidation以前に入力を制限することが可能です。 <input type="text" name="field-name" data-mask="00/00/0000" data-mask-selectonfocus="true" /> のようにしてマスク指定が可能で、非常に簡単に扱える他、JSコードでの非常に細かなフィルタにも対応 関連エントリ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「Formplate
[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu
![[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2](https://cdn-ak-scissors.b.st-hatena.com/image/square/df5d3a30b733e55f7a58d3fb89e38ff656272054/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031901-00.png)
selectボックスを置換えてオシャレかつ使いやすくできるjQueryプラグイン「Selectable」:phpspot開発日誌
jQuery Selectable - elohr selectボックスを置換えてオシャレかつ使いやすくできるjQueryプラグイン「Selectable」 selectというとその場で開閉するデザインですが、次のようなデザインの選択用のウィジェットに置き換え可能。 項目を検索できたり、項目がウィジェット内にならんでおり、便利に使えます 関連エントリ selectボックスにアイコンを付けて分かりやすくできるjQueryプラグイン「wSelect」 項目の多いselectをインクリメンタル検索形式に変換できるjQueryプラグイン「flexselect」 BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」
webサイトに魅力的な動きを演出可能なjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」
webサイトに魅力的な動きを演出可能なjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」 シンプルなwebサイトももちろん魅力的ですが、独特な動きを取り入れることでもっと見栄えの良いサイトに仕上げることができるのではないでしょうか？今回はそんな時に利用したいjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」を紹介したいと思います。 Textillate.js ちょっとしたさりげない動きから、メインとなる部分に取り入れられる演出まで、いろいろなタイプのjQueryプラグインが紹介されています。 詳しくは以下 Salvattore — A jQu
JavaScriptで記事本文の読了予測時間を自動で表示するjQueryプラグインを自作した - 移転→hapilaki.net
ブログの記事本文を読むのにかかる目安時間を表示すると読者に親切かも。JavaScriptで作ったので、PHPを使えないサーバーを利用しているウェブサイトやブログに組み込めるよ。このjQueryプラグインを「読了予測時間」と命名。 読了予測時間のデモ画像 読了予測時間が表示されるページ 各記事ページで読了予測時間が表示される。下図で黄色の枠で囲った部分が読了予測時間。下図をタッチで別タブで拡大表示可能。 記事ページとは、はてなブログでいえばURLに/entry/が入っているページ。たとえば次のURL。 http://www.hapilaki.net/entry/jquery-plugin-dokuryo-yosoku-jikan 読了予測時間が表示されないページ 記事ページ以外の記事一覧ページやカテゴリページでは読了予測時間が表示されない。需要があるならアップデートして表示されるようにするか
エレメントを立体的に回転させられるjQueryプラグイン「Vortex」:phpspot開発日誌
jQuery Vortex エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 製品画像などを動きをつけて回転させるなどの用途に使えそうです。 スピードの調整ができたり、奥行きなんかもパラメータで自由に調整できるので、平面的に回転させることもできるっぽい 関連エントリ スプライトアニメーション作成用jQueryプラグイン「Phantascope」 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」 CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 クールでアニメーションするグラフを描画できるHTML5チャートライブラリ「Chart.js」
JavaScript製の顔認識ライブラリがすごい | DECONCEPTER
JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識した顔のデフォルメ（Face deformation）の4つがあります。 デフォルメとマスキングが特に面白いのでお試しあれ。 ちなみにおっぱいを顔として認識してもらおうとしたら怒られました。
コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」:phpspot開発日誌
imagefill.js | Project Page コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 HTMLの指定した位置に画像をフィルさせたい場合に使えます。 次のように、画像を特定サイズのブロックに適度に拡大させておさめられます。 それ用の画像を作る必要はもうなく、動的にフィットさせられるというのは便利でレスポンシブWEBデザインにも使えます 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
[JS]レスポンシブにも対応した使いやすいカルーセルを探す時はこのスクリプトがオススメ！ -slick | コリス
画像やコンテンツを配置したパネルを次々に水平・垂直にスライドして表示するカルーセルのスクリプトを紹介します。 自由度の高いカルーセルってなかなか無いのですが、「ラスト カルーセル」とサブタイトルがついてるくらい探し回って最後にたどり着くのはこれという出来です。 slick slick -GitHub slickの特徴 slickのデモ slickの使い方 slickの特徴 「the last carousel」とあるだけあって、カルーセルとしての機能は全て備えています。 レスポンシブ対応 CSS3はサポートブラウザ時に動作 オートプレイ対応 ナビゲーションはドット・アローの選択が可能 矢印キーでのキーボード操作に対応 ドラッグ・スワイプ操作に対応 無限ループ対応 slickのデモ デモでは、さまざまなカルーセルの動きを試せます。
モバイル対応。写真を大きく表示·jQuery.fullPhotoDialog MOONGIFT
jQuery.fullPhotoDialogはjQuery/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 モバイルファーストなんて言葉が叫ばれていますが、まだまだ技術界隈ではデスクトップをメインターゲットにしているように見えます。なので類似したライブラリでもモバイル対応とするだけで付加価値になるのです。今回は写真を拡大表示するjQuery.fullPhotoDialogを紹介します。 デモです。テキストは気にしないでください。 ボタンをクリックすると画像を大きく表示しました。 モバイル対応とあってレスポンシブです。 jQuery.fullPhotoDialogはとてもシンプルな写真ダイアログで、中央に大きく写真を表示して右上にタイトル、左上に閉じるための×ボタン、下にキャプションが出せるようになっています。意外と多そうでなかったりするので覚えておくと良
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
