セレクトボックスをモーダルウィンドウで選択できるjQueryプラグインを作成 | キノコログ

2019/11/28 11 users モーダルウインドウ セレクトボックス 作成

WEB屋さんなら、タイトルである程度察してもらえるこの問題。 昨今のWEBサイトは、スマートフォンからのアクセスがほとんどのため、デザインや操作性はスマートフォンでストレスなく使えることが最重要課題となっている。 特に、ユーザー... 僕の作ったサイトでは、iOSのユーザーが70%を超えるほど多く、かつプロフィー... 続きを読む

JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」:phpspot開発日誌

2018/07/12 20 users GitHub ファンシー グラデーション ＦＬＡSＨ時代 背景

GitHub - tipsy/bubbly-bg: Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) JS＆Canvasで背景を水玉バブルアニメーションにする「bubbly-bg」 背景をファンシーかつポップに。Flash時代を思い出します 関連エントリ CSS3のグラデーションで背景アニメーションできるjQueryプラグイン「Gradientify... 続きを読む

複数選択、検索が可能なselectボックス実装「multi.js」:phpspot開発日誌

2018/07/05 22 users phpspot開発日誌 Demo 複数選択 検索 デフォルト

Demo ? multi.js 複数選択、検索が可能なselectボックス実装「multi.js」 複数のアイテムを選択するような場合にわかりやすく使いやすいUIが提供可能です 関連エントリ Selectボックスをポップアップ形式に変更できる「PopSelect」 デフォルトのselectボックスをかっこいいドロップダウンに変更するjQueryプラグイン 続きを読む

slickのカレントクラスを利用した実装サンプル | NxWorld

2017/08/17 23 users Slick NxWorld カルーセル class CSS

手軽にカルーセルを実装できるjQueryプラグイン「slick」には、現在表示されているスライド（表示の仕方やオプションの指定によって付与の対象となる位置は変わります）に対して .slick-current というclassが付与される作りになっており、これを利用することでCSSを少し追記するだけでもいろいろな見せ方が可能です。 そこで今回は手軽にできて且つ個人的にも利用することが多い実装サンプル... 続きを読む

slickでスライド総数と現在何枚目が表示されているかをカウント表示する方法 | NxWorld

2017/08/08 16 users Slick NxWorld カルーセル カウント カスタマイズ

使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 実装イメージはこのようになっており、 現在のスライド数 / スライド総数 という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという... 続きを読む

ブラウザでExcelデータを吐き出せるjQueryプラグイン「ExportToExcel」:phpspot開発日誌

2017/07/13 38 users GitHub phpspot開発日誌 サーバ 関連エントリ

GitHub - maynard88/ExportToExcel: jQuery Client Side Excel Export Plugin Library ブラウザでExcelデータを吐き出せるjQueryプラグイン「ExportToExcel」 ブラウザ上で吐き出すのでサーバにやさしく使えそうです 関連エントリ ページ内にお手軽にExcelスプレッドシート風UIを入れられる「jExcel」 続きを読む

背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitcher】–[FIT BLOG-フィットブログ]

2017/06/29 22 users フェード 内藤 案件 康太 スライドショー

先日、とある案件で、背景画像をスライドさせて切り替える必要が発生しました。そこでそれを可能にするjQueryプラグインを探していたところ、大変使い勝手の良いjQueryプラグインを発見したのでご紹介させていただきます。jQuery.BgSwitcher「jQuery.BgSwi...内藤 康太　/　2017.06.29 背景画像をスライドショーやフェードで切り替える【jQuery.BgSwitch... 続きを読む

Vertical Timeline - 縦型年表を作成するjQueryプラグイン MOONGIFT

2017/05/16 28 users 年表 時系列 スクロール MOONGIFT デフォルト

情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。 そんな縦型年表を容易に作成できるのがVertical Timelineになります。 Vertical Timelineの使い方 デフォルトの表示です。 日付を表示するデモ。 開始を右側からに。 ... 続きを読む

文章の中央に画像等をドンと綺麗に配置するjQueryプラグイン「pull-quote-center」:phpspot開発日誌

2017/04/20 12 users GitHub center phpspot開発日誌 文章 中央

GitHub - jakedowns/pull-quote-center: A jQuery plugin utility which dynamically inserts a symmetrical pull-quote element clone to enable a hacky float: center 文章の中央に画像等をドンと綺麗に配置するjQueryプラグイン「pull-quot... 続きを読む

【jQuery】背景にパララックス効果を追加するParallaxify | VOYAGER

2016/12/10 28 users ジャイロセンサー Voyager jQuery マウス 要素

Parallaxifyは、ジャイロセンサーやマウスに基づいて要素や背景に視差効果を追加するjQueryプラグイン。 Demos Galaxy iOS 7 MockUp Get things going // Run it on single element $('#my-wrapper').parallaxify(); // or globally $.parallaxify(); $('#my-... 続きを読む

アニメーションやグラフ等、SVGを使ったJavaScript＆jQueryプラグイン11 | Webクリエイターボックス

2016/11/24 105 users SVG アニメーション グラフ CSS ラインアート

今やCSSだけでも多彩なアニメーションを取り入れることができますが、JavaScriptとSVGを使うことで、より美しく自由度のきく表現が可能です。今回はSVGを使った、便利なJavaScriptライブラリーやjQueryプラグインを紹介します。 ラインアート 1. DrawSVG See the Pen Simple usage by Leonardo Santos ( @lcdsantos )... 続きを読む

Googleが推奨する、SEOに最適な無限スクロールをjScrollで実装する – TOACH

2016/02/13 298 users Facebook TOACH 無限スクロール SEO 実装方法

今や少し下火になってきている無限スクロール、昔はホットだった。Facebookが使ってるんだし俺らも使おうぜ！ってな感じで、その実装方法が乱れ飛んだのも今は昔。 で、この技術、SEOに最適な実装方法というのがある。Googleが2014年末に投稿したブログに従えば、ちょっと気をつけて実装しないといけないってことが分かる。 今回はその方法を解説する。まずはjScrollというjQueryプラグインで... 続きを読む

テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」:phpspot開発日誌

2016/01/22 16 users ヘッダー phpspot開発日誌 テーブル elem 固定

jQuery.floatThead テーブルのヘッダーを固定表示することが出来る「jQuery.floatThead」 スクロールしてヘッダが消えるとこの列が何を意味しているのか分からなくなるということがよくありますが、HTMLテーブルでもそれを回避するためにヘッダを固定することが出来るようにするjQueryプラグインです。 のように  $(elem).floatThead() を呼び出すだけで速... 続きを読む

1000以上のjQueryプラグインが探せるサイト「jQuery Cards」 ｜ ライフハッカー［日本版］

2016/01/15 37 users ライフハッカー jQuery GitHub プラグイン UI系

「jQuery Cards」は 1000以上のjQueryプラグインが探せるサイト です。jQueryのプラグインがカテゴリごとに分かれ登録されています。どのように導入するか、ダウンロードできるGitHubのページへのリンクも記載されていました。 以下に使ってみた様子を載せておきます。 まず jQuery Cards へアクセスしましょう。 このようにUI系やフォーム関連などカテゴリごとに分けられ... 続きを読む

背景にひと手間加えたい時に便利なスクリプト 10+ | NxWorld

2016/01/12 166 users パーティクル NxWorld 単体 領域 スクリプト

ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい…」という時に便利そうだと思うスクリプトを幾つかまとめてみました。jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景にひと手間加えたい時に便利なスクリプト ... 続きを読む

世界の天気情報を一発で取得できるjQueryプラグイン「simpleWeather.js」を使ってみた！ : うえぶはっく

2016/01/04 53 users ウェブ 風速 天気情報 一発 地名

世界中の「天気」に関連する情報を、まとめて取得できるjQueryプラグイン「 simpleWeather.js 」が公開されているのでご紹介しようと思います！ 地名や位置情報・WOEIDなどの情報から、目的の地域に関連する「天気」「温湿度」「風速」「フォーキャスト」…など、さまざまな情報が簡単に取得出来るようになるので、自分のWebサービスやアプリなどにも組み込みやすいでしょう。 使い方！ 利用方... 続きを読む

スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8 | NxWorld

2015/12/03 16 users スクロールバー NxWorld CSS スクリプト 古いＩＥ

スクリプトといってもほぼjQueryプラグインになりますが、ブラウザやOSによってデザインが異なるスクロールバーデザインを統一させたい時などに便利なスクリプトのまとめです。Chromeや古いIEなどのようにブラウザによってはCSSだけでスクロールバーのデザインを変更できたりはしますが、記述がバラバラだったりしますし、ひと通りのブラウザでとなるとやはりこういったもので対応するのが無難だと思います。ま... 続きを読む

サイトの仕様をグレードアップさせるjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」 | DesignDevelop

2015/11/30 25 users プラグイン DesignDevelop クリエイティブ性

さまざまなプラグインがフリーで配布されており、取り入れてみることで今までの仕様よりもクリエイティブ性をアップさせることができます。今回はそんなjQueryプラグイン「Top 7 Free jQuery Plugins to Improve Your Web Design」を紹介したいと思います。 Cropper 7種という厳選された数ですが、どれも使ってみたくなるプラグインばかり。気になったものを... 続きを読む

超便利な郵便番号から住所へ変換してくれるJQueryプラグイン | 怪しい物を開発するブログ

2015/11/19 45 users 住所 怪しい物 郵便番号 ユーザビリティ github上

フォーム入力のシステムを作っていると、郵便番号と住所を入れる場面が多々あると思います。郵便番号入れているのに、住所を入れるの面倒くさいです。 郵便番号からある程度住所を補完してくれると非常にユーザビリティが向上します。そんな機能を簡単に実装することができるJQueryプラグインの紹介です。 ■郵便番号→住所へ変換してくれるJQueryプラグイン【jpostal】 GitHub上にプロジェクトが存在... 続きを読む

BootstrapでのPaginationのUIをレスポンシブ化する「rpage」:phpspot開発日誌

2015/11/17 32 users Pagination Bootstrap レスポンシブ化

BootstrapでのPaginationのUIをレスポンシブ化する「rpage」 2015年11月17日- auxiliary/rpage GitHub BootstrapでのPaginationのUIをレスポンシブ化する「rpage」 ページ幅と共に、PaginationのUIを拡大・縮小させられるjQueryプラグインです 意外とこの部分は対応が難しいせいか、レスポンシブ化が進化していないよ... 続きを読む

HTML5動画を背景にできるjQueryプラグイン「vidbg.js」:phpspot開発日誌

2015/11/13 46 users phpspot開発日誌 背景 HTML5動画 動画

blakedotvegas/vidbg GitHub HTML5動画を背景にできるjQueryプラグイン「vidbg.js」 背景に動画をつ... 続きを読む

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 | NxWorld

2015/11/09 66 users フェード 備忘録 NxWorld 回転 選択肢

いずれもテキストがフェードや回転といったアニメーション付きで表示されたり、一文字ずつタイピングされているような見せ方を実装することができるjQueryプラグインです。同じようなプラグインが並んでいる感じですが、軽量なものやオプションが豊富に揃っているもの、日本語にもしっかり対応しているかなどそれぞれ特徴もあるので、こういったものを使いたい時に少しでも選択肢が広がるよう良さそうなものを備忘録兼ねてま... 続きを読む

ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン*ホームページを作る人のネタ帳

2015/10/24 454 users ネタ帳 GoogleMap ホームページ API プラグイン

ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン 2015/10/24 ツイート スポンサーリンク タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMA... 続きを読む

タグによるフィルタリング機能を実装できるjQueryプラグイン*ホームページを作る人のネタ帳

2015/10/17 70 users フィルタ フィルタリング機能 ネタ帳 タグ 動作

タグによるフィルタリング機能を実装できるjQueryプラグイン 2015/10/17 ツイート スポンサーリンク なっかなか熱いプラグインがあったのでご紹介。 いわゆるフィルタリングプラグインの一つですが、面倒な事を考えずに手軽にフィルタリング出来るのがポイント。 タグと表示領域のフィルタが連結している 動作は以下の様な感じです。 ダウンロードは以下から Tagsort jQuery Plugin... 続きを読む

ラジオボタンをスイッチデザインに変換するjQueryプラグイン*ホームページを作る人のネタ帳

2015/10/02 50 users サンプルデモ http ネタ帳 スポンサーリンク ラジオボタン

ラジオボタンをスイッチデザインに変換するjQueryプラグイン 2015/10/02 ツイート スポンサーリンク 味気ないラジオボタンをスイッチデザインに変換してくれるjQueryプラグインです。 それ以上でもそれ以下でも無いのですが・・・。 jQueryプラグインを読み込むだけですぐに変換 jQueryプラグインを読みこめば、ラジオボタンが以下のようになります。 サンプルデモは以下に http:... 続きを読む