アニメーションやグラフ等、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プラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景にひと手間加えたい時に便利なスクリプト ... 続きを読む

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

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

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

高機能ファイルアップロード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 ... 続きを読む

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に似た仕組... 続きを読む

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

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

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

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

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

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

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

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

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

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

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

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

魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 | DesignDevelop

2014/08/24 150 users jQuery DesignDevelop ツール 14種

webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動き... 続きを読む

郵便番号を入力すると住所を自動補完してくれるjQueryプラグイン・jquery.jpostal.js - かちびと.net

2014/08/20 149 users net 住所 備忘録 郵便番号 ライブラリ

郵便番号から住所を自動補完してくれるライブラリのご紹介。他にもいくつかありますけど使いやすかったので備忘録として。 よくあるやつ。メンテも不要との事なので助かります。 jquery.jpostal.js ライブラリはgooglecode.comにホストされているものを直接読み込みます。 $('#postcode1').jpostal({ postcode : [ '#postcode1', '#p... 続きを読む

私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど） | OZPAの表4

2014/08/06 611 users jQuery シンプ モーダルウインドウ OZPA 必須

こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプ... 続きを読む

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法 | BlackFlag

2014/05/27 212 users jQuery BlackFlag skrollr 画面遷 方法

以前、iPhone5sのプロダクトページがリリースした頃に 『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して 1ページをフルスクリーン表示にして、画面全体をスクロールさせることで 1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラ... 続きを読む

複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌

2014/01/31 104 users jQuery クロスドメイン Demo 時系列 RSS

複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 2014年01月31日- Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッ... 続きを読む

パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 | DesignDevelop

2014/01/02 203 users オブジェクト DesignDevelop 手前 エントリー

2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設... 続きを読む

フォーム周りで活躍してくれるjQueryプラグイン 50 | NxWorld

2013/12/28 173 users バリデーション ユーザビリティ NxWorld CSS3 向上

少し古いのもありますが、今年見かけたものを中心にフォーム周りでいつか使う機会がありそうだと思ったjQueryプラグインのまとめです。バリデーションや各フォームエレメントのデザイン変更といったオーソドックスなものから、上手く使えばユーザビリティの向上に繋がりそうなもの、面白い動きを実装できるものまで様々なタイプがあります。中にはCSS3を併用したり、そのままでは日本語に対応していないというものも幾つ... 続きを読む

スクロールに合わせて次々とコンテンツを読み込むjQueryプラグインのまとめ | DesignDevelop

2013/12/04 115 users DesignDevelop スクロール コンテンツ まとめ

ページ遷移を可能な限り少なくして、シームレスに気持ちよく情報を見せようといったWebサイトを、最近よく見かけるようになりました。しかしそのようなサイトを構築したいと思っても、経験が無ければハードルは高いもの。そこで今回は、そのような機能を手軽に実装できるjQueryのプラグインをまとめたエントリー「12 jQuery Infinite Scroll Plugins and Tutorials」を紹... 続きを読む

グリッドレイアウト採用時に便利なjQueryプラグイン 20 | NxWorld

2013/11/11 139 users NxWorld グリッドレイアウト Pinterest 箇所

有名どころだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。基本的な動きは同じよ... 続きを読む

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌

2013/11/08 163 users WallPaper projects エレメント 必携 背景

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 2013年11月08日- Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラ... 続きを読む

ASCII.jp：パララックスをサクッと作れるskrollr｜こうめの“これから使える”jQueryプラグイン

2013/10/30 130 users パララックス jQuery skrollr jQuery本体

今回紹介するプラグイン skrollr 「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロード... 続きを読む

簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag

2013/10/08 179 users BlackFlag skrollr fullPage.js

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として パララックス（少々今さら感も感じますが・・・）効果に加えて最近では コンテンツ全体をフルスクリーン表示にして、 スクロールすることで1コンテンツ分が自動でスクロールされ 次画面へ遷移するさせる技法がよく見られます。 そんなＷｅｂページ内でスクロール効果を使った動作を実装する際に役立ちそうな JSスクリプト＆jQ... 続きを読む

ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」 | DesignDevelop

2013/09/13 110 users DesignDevelop ユーザーフレンドリー ユーザー

ユーザーフレンドリーにするための40の新しいjQueryプラグイン「40 Fresh jQuery Plugins To Make Your Website User Friendly」 Webデザインやコーディングの経験を積んでくると、「ユーザーにやさしいWebサイト」といったことを意識するようになると思いますが、今回はそんなユーザーフレンドリーなサイトにするためのjQueryプラグインをまとめ... 続きを読む

ヌルヌルの秘訣はCSS！Googleスマホ版で採用されている使い心地のよいスライドメニューを再現した『jSlideMenu』｜ウェビメモ

2013/08/27 194 users キータ ウェビメモ Qiita PageSlide 秘訣

以前『スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました 』という記事を書きましたが、今回は『Qiita [キータ] – プログラマの技術情報共有サービス 』にてGoogleでも採用されているCSS3のアニメーションを使ったスライドメニューというものを発見したのでご紹介します。 jQueryプラグイン『jSlideMenu』 な... 続きを読む