アニメーションやグラフ等、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プラグインで... 続きを読む

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

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

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

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

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

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

フェード表示やタイピング風など、テキスト表示に動きをつけられる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:... 続きを読む

高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応*ホームページを作る人のネタ帳

2015/09/18 278 users プログレスバー インターフェ オーディオ プログレスバー付き

高機能ファイルアップロードjQueryプラグイン｜ドラッグ＆ドロップ、プログレスバー、オーディオ、ビデオ、各種ファイルサポート対応 2015/09/18 ツイート スポンサーリンク ドラッグ＆ドロップ対応、プログレスバー付き、各種ファイル以外にも、オーディオとビデオのサポートと、非常に優れた高機能ファイルアップローダーを実装出来る、jQueryプラグインのご紹介です。 高機能で美しい インターフェ... 続きを読む

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag

2015/07/21 170 users BASIC CSS BlackFlag レイアウト 表組み

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic ... 続きを読む

jQueryを使うなら知っておきたいjQueryプラグインの作り方 | コーディングの代行・外注はクロノドライブ

2015/07/01 70 users jQuery コーディング 外注 クロノドライブ ライブラリ

現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めし... 続きを読む

JavaScript - React.jsではなくRiot.jsを採用した話、運用中サービス『GAMY』でリニューアル - Qiita

2015/06/16 216 users jQuery Qiita React.js Riot.js

今回、ゲーム攻略コミュニティ『GAMY』というサービスでRiot.jsを採用しました。 知る限りでRiot.jsで実装されたサイトの中でも最大規模のサービスだと思います。 これまではjQueryとjQueryプラグインを使っていましたが、デザインのリニューアルを機に、全部書き換えることにしました。 ドキュメントも兼ねてアウトプットしていきます。 Riot.jsは今流行りのReact.jsに似た仕組... 続きを読む

簡単にコンテンツスライダーを実装できるjQueryプラグイン「bxSlider」の実装サンプル | NxWorld

2015/06/11 94 users NxWorld bxSlider カルーセル スライダー 実装

スライダーやカルーセルを実装できるjQueryプラグインは多数ありますが、それらの中でも豊富なオプションと実装の手軽さで見かけたことや実際に使用した人も多いと思う「bxSlider」の実装サンプルです。もっと高機能なプラグインも探せばいくらでも出てきますし、bxSliderにこだわる必要はもちろんないんですが、個人的に手軽に使えるという理由で今でも使わせてもらう機会が割と多いので、公式には載ってい... 続きを読む

レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 | NxWorld

2015/06/09 102 users エフェクト 見栄え Lightbox系 単体 デバイス

レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめです。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 ※対応ブラウザ・デバイスに関しては、基本的に各配布先で記... 続きを読む

Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」:phpspot開発日誌

2015/05/25 60 users Smoke プログレスバー Bootstrap パネル 通知

Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 2015年05月25日- Smoke Bootstrapにモダンな機能を追加してくれるjQueryプラグイン「Smoke」 フォームのバリデートや通知、モダンなプログレスバー、フルスクリーン機能、パネル等の機能を追加できます。 より今っぽいサイトを作るのに役立ちそうなプラグインなのでBootstrapを使う人は知... 続きを読む

GoogleのAPIで住所入力を超絶楽にするデモ＆サンプル:phpspot開発日誌

2015/05/19 64 users API phpspot開発日誌 一部分 Google クール

Google Address Autocomplete API GoogleのAPIで住所入力を超絶楽にするデモ＆サンプル。 Googleが提供元ということで日本語にも対応しています。 郵便番号からも、住所の一部分からも検索できるので、とにかく便利。 関連エントリ クールでモダンなコンタクトフォームのデモ＆サンプルスクリプト フォーム要素をフラットかつ全デバイスで統一させるjQueryプラグイン「... 続きを読む

JSを書かずにGoogle Mapに吹き出しやオリジナルマーカーを設置できるjQueryプラグイン「AxGmap」 | objc-Lovers

2015/03/11 99 users jQuery GitHub 前身 Google Maps 開発

JSを書かずにGoogle Mapに吹き出しやオリジナルマーカーを設置できるjQueryプラグイン「AxGmap」 2015年3月11日 Google Maps  JavaScript  jQuery  Web技術 ツイート ノウリスの前身となるチームで開発・配布していたjQueryプラグイン「AxGmap」を再編集し、GitHubで公開しました。 ＞＞[GitHub] Nouris-Inc/jq... 続きを読む

Web制作に使える！オシャレなサイトに見せるためのCSSやjQueryプラグインまとめ | コムテブログ

2015/03/02 386 users CSS インタラクティブ jQueryプラグインまとめ

今風のサイトの動きやエフェクトを実現するために知っておくと助かるjQueryプラグインをまとめました。トレンドをおさえた最近のものや定番化しているものまで。ちょっとした動きを取り入れてオシャレなサイトを構築したい時に。 もくじ インタラクティブ １．クリック時のエフェクト ２．フォームクリック時のエフェクト ３．テキストに１１種の動きを出すエフェクト ４．分離するエフェクト フルスクリーンの見栄え... 続きを読む

jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう！ | Neganin(ネガニン)

2015/02/25 92 users Neganin header jQuery lib ネガニン

2. ダウンロード 「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。 「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。 jQuery Waypoints <header id="header"> <h1>Waypoints</h1... 続きを読む

横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵 | OZPAの表4

2015/02/23 168 users レスポンシブ OZPA プラグイン 要素 全て

高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plu... 続きを読む

年表などでよく使用されるタイムラインコンテンツ作成時に便利なプラグインやチュートリアル 15 | NxWorld

2015/02/16 94 users スライダー チュートリアル CSS NxWorld 見た目

年表・沿革・コメント一覧といったコンテンツで用いられているタイムラインデザインを作成する際に便利なプラグインやチュートリアルのまとめです。レスポンシブ対応したものやCSSだけで実装したものなど全15種類で、見た目もよく見かける縦型（垂直）タイプだけでなく横型（水平）で見せるタイプもあります。 jQuery Timelinr 縦型・横型の両タイプが用意されているjQueryプラグインで、スライダーの... 続きを読む

ファイルアップ用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」:phpspot開発日誌

2015/02/04 60 users phpspot開発日誌 ファイルアップロード用 クリック

Dropper Demo ファイルアップロード用のDropゾーンを簡単に作れるjQueryプラグイン「Dropper」 クリックやD&... 続きを読む

jQueryプラグイン「pjax」でスムーズにページ遷移するサイトの作り方 | Neganin(ネガニン)

2015/01/14 358 users pushState pjax Neganin Ajax URL

「pjax」とは「Ajax」と「pushState」を組み合わせたもので、非同期通信をしながらURLを変更することができる「jQueryプラグイン」です。 各ページの差分だけ読み込み、描画するので、転送量削減ができ時間短縮を図れますし、ページ遷移時のエフェクトも追加できたり、カスタマイズ性に優れています。検索エンジンからのマイナス点もない非常に優秀なプラグインです。 「Ajax」と「pushSta... 続きを読む

ASCII.jp：画像の色から背景色を決定！jquery.adaptive-backgrounds.js｜こうめの“これから使える”jQueryプラグイン

2015/01/08 59 users iTunes ASCII.jp 背景色 手法 背景

今回紹介するプラグイン jquery.adaptive-backgrounds.js 「jquery.adaptive-backgrounds.js」は、指定した画像のドミナントカラーを抽出し、親要素の背景色として適用するjQueryプラグインです。 ドミナントカラーとは配色全体の印象を支配する色のことで、主調色とも呼ばれます。ドミナントカラーを背景に使う手法で有名なのはiTunesですね。下記の... 続きを読む

webサイトに魅力的な動きを演出可能なjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」 | DesignDevelop

2014/11/08 63 users 見栄え DesignDevelop 演出 Webサイト

シンプルなwebサイトももちろん魅力的ですが、独特な動きを取り入れることでもっと見栄えの良いサイトに仕上げることができるのではないでしょうか？今回はそんな時に利用したいjQueryプラグイン「A Cool Collection Of jQuery Plugins To Make Your Website More User Friendly」を紹介したいと思います。 Textillate.js ち... 続きを読む