Javascriptで扱えるカッコイイグラフのまとめ - Qiita
結論:Highchart ccchart(canvasChart)と悩みましたが、Highchartを選んだ理由は、下記の通りです。 1.円グラフや棒グラフを組み合わせた複合的なグラフのサンプルを載せている 2.複合グラフのアニメーションがかっこいい 商用ライセンスなので、無料にこだわる方は、ccchart(canvasChart)がおすすめです。 Highchart 表現力、完成度の点でいちばんだと思います。商用なのでお金さえあればこれがイチオシ。 ccchart(canvasChart) 私のイチオシは canvasChart です ライセンスは PUBLIC DOMAIN! raphael.js qiitaのプロフィールの円グラフで使われているjQueryプラグイン 美しめなグラフを作成することができる。 raphael.jsのプラグインのelycharts.js http://el
サジェスト等、多機能なタグ入力UI実装jQueryプラグイン「jquery-tagger」:phpspot開発日誌
GitHub - Fivium/jquery-tagger: jQuery plugin to turn a HTML select into an auto-suggesting, tagging widget サジェスト等、多機能なタグ入力UI実装jQueryプラグイン「jquery-tagger」 JSONやAjaxからアイテムをサジェストして表示可能。単一or複数選択等、調整も可能。 関連エントリ タグの修正で簡単にUIを変更できるAudioPlayer実装jQueryプラグイン「snd」 selectタグの機能を大幅に向上させる「selectivity」 タグによってアイテムをフィルタする仕組みを提供するjQueryプラグイン「Tagsort」
チャートを手軽に作成、embedも出来るWebサービス・「BEAM」
BEAMはチャートを手軽に作成出来るWebサービスです。円グラフや棒、線グラフが用意されており、数値やラベルはその場に表示してくれる簡易的なスプレッドシートに記入すれば反映されるようになっています。embedも可能です。 タイトルやサブタイトルはテキストをクリックすれば編集出来るようになっています。pngでもダウンロード出来ますが日本語には対応していないようです。embedは下記のように問題なく表示されます。 embedの場合は、下部に表示されているラベルをクリックすればその項目を非表示にする事が出来ます。 クレジットは表示されますが手軽に作れるのは大きなメリットですね。embedやダウンロード機能はログインが必要になります。一応モバイルからも作成出来るようになっています。贅沢言えば、色の変更が出来ると嬉しかったですね。 BEAM
業務で使えるJavaScriptライブラリ「グラフ/チャート編」
d3.js オープンソース・ソフトウェア（BSD）。データの可視化ライブラリです。HTML/SVG/CSSを使ってアニメーションもサポートしたグラフ/チャートを表示します。jQueryと同じような使い勝手で高度なチャートを描けるのが特徴です。 以下はサンプルのコードで、指定されたSVGタグの色を変更します。 d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee"; }); SVGによる表現は多彩なので、単純なグラフやチャートと言った枠を越えた表現が実現できます。 使いこなすのはそうそう簡単ではありませんが、SVGを素のまま使うのに比べると大幅に手間は軽減されるでしょう。その上でjQueryライクにプログラマブルにSVGを扱うと言った目的に最適な選択になるはずです。 three.js オ
Icon Animations Powered by mo.js | Codrops
Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li
参考にしたい！アニメーションの動きが気持ちいいスクリプト | Swwwim
最近のWebサイトでは、様々なアニメーションを付けることが当たり前になってきました。リンクやボタンのホバー時、ページの遷移、スクロールなどに使われていることが多いですね。 制作しているWebサイトにアニメーションを取り入れたい時に、是非参考にしたいスクリプトをご紹介します。 メニュー mmenu DEMO SOURCE Facebookなどのスマートフォンのアプリによく使わている横からスライドしてくるメニュー。最近ではPCサイトでも使われているのをよく見かけます。 Off-Canvas Menu Effects DEMO SOURCE Off-Canvasを利用したメニューエフェクト。綺麗な曲線をなどアニメーションがとっても綺麗なスクリプトです。 スクロール JQUERY FULL CONTENT DEMO SOURCE 縦、横にコンテンツをスクロールできるようになります。 MIDNIGH
すごく役立った！サイト制作でさりげなく使われているCSSテクニックまとめ
作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層 ドロップダウン ５．amazon風 メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント
スクロールバーのデザインや動きを変更したい時に便利なスクリプト 8 - NxWorld
スクリプトといってもほぼjQueryプラグインになりますが、ブラウザやOSによってデザインが異なるスクロールバーデザインを統一させたい時などに便利なスクリプトのまとめです。 Chromeや古いIEなどのようにブラウザによってはCSSだけでスクロールバーのデザインを変更できたりはしますが、記述がバラバラだったりしますし、ひと通りのブラウザでとなるとやはりこういったもので対応するのが無難だと思います。 また、スクリプトによっては慣性スクロールを実装したり複数の領域を同時にスクロールできるようにするといったデザイン以外の部分でもカスタマイズできるものもあります。 jQuery custom content scroller スクロールバーのデザインや動きをカスタマイズすることができるjQueryプラグインで、スクロール量・方向・イージング・マウスオン時に出現など様々なオプションがあります。 また
Google Maps 入門
Google マップはグーグルが提供している地図サービスです。この Google マップをカスタマイズして独自のマーカーを表示させたり、指定した区間のルート検索を行ったりすることができるように色々な API が提供されています。ここでは Google マップで提供されている API の中でもウェブサイトで利用者が操作可能な地図をカスタマイズして表示することができる Google Maps JavaScript API の使い方の解説します。 ※ Google マップを利用者として使う場合の使い方については「Googleマップの使い方」を参照されて下さい。 なお JavaScript の基本的な使い方については「JavaScript入門」を参照されてください。
Googleマップでマーカーに情報ウィンドウを表示させる｜Gimmick log
//マウスオーバーで情報ウィンドウを表示させる function map_canvas() { //マーカーの情報 var data = new Array(); data.push({ lat: '35.681382', //緯度 lng: '139.7660843', //経度 content: '東京駅<br />迷子にならないように！' //情報ウィンドウの内容 }); data.push({ lat: '35.678187', lng: '139.76817', content: '<p style="color:#d50000">八重洲ブックセンター</p>' }); //初期位置に、上記配列の最初の緯度経度を格納 var latlng = new google.maps.LatLng(data[0].lat, data[0].lng); var opts = { zoom:
画像をチラ見せするカルーセルのjQueryプラグイン「peep.carousel」を作った - 初めてのシステムと日記
カルーセルのjQueryプラグインは多数ありますが、 ヤフオクのスマフォ版のように、前や次に画像がある場合にチラ見せをするようなプラグインがない、 という相談を受けたので初めてjQueryプラグインを作成しました。 peep.carousel ■GitHub https://github.com/bossato/peep.carousel ■デモ http://bossato.github.io/peep.carousel/ ※デモはブラウザサイズ720pxあたりに最適化するようオプションを指定しています ■対応内容 レスポンシブ CSS3 3d Transitions マウススライドによるカルーセルのスライド 表示件数の指定(オプション) 前、次にカルーセル候補がある場合のチラ見せ(オプション) 上記チラ見せさせる領域比率(オプション） ページング表示(オプション) ■検証端末 Chro
[JS]一味違ったアイデアでレスポンシブ対応のテーブルを実装するスクリプト -Responsive tables
サイズが変更されても、ハイライト表示はできます。 Responsive tablesの使い方 Step 1: スタイルシート スタイルシートをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/rwd-table.min.css"> </head> Step 2: スクリプト スクリプトを</body>の上あたりに記述します。 <body> ... <script type="text/javascript" src="js/rwd-table.js"></script> <script> $(function() { $('.table-complex').responsiveTable({ adddisplayallbtn: true, addfocusbtn: true, fixednavbar: '#n
Sticky Table Headers & Columns - ヘッダー、見出しを固定表示するHTMLテーブルライブラリ MOONGIFT
業務システムではテーブルがよく使われますが、大量のデータを表示するとカラムが見えなくなっていったりきたりする操作が発生します。それはユーザにとってストレスで改善要望を出されること請け合いな訳ですが、丁度自分たちのシステムにあったものを探すのは大変です。 さらに業務システムがスマートフォンからも使いたいなんて言われたらどうしたら良いでしょう。そこで紹介したいのがSticky Table Headers & Columns、横に長いテーブルにも対応したヘッダー追従テーブルライブラリです。 デモです。こういった感じのテーブルがあったとします。 スクロールしてもヘッダーがついてきて常に一番上に固定されます。 続いて左側のカラムも固定されるパターン。これも顧客名やIDを常に出しておくとデータの確認がしやすくなります。 幅が広いテーブルでも右側にスクロールできるので問題ありません。 Sticky Ta
スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」:phpspot開発日誌
Box Loader スクロールイン時のボックス要素の表示アニメーションを設定できる「Box Loader」 最近流行りのスクロール時のアニメーション効果を簡単実装できて便利そうです 関連エントリ ページスクロールに応じて要素を様々にCSSアニメーションしつつ表示できる「Story Box」 スクロールを上に移動でバー表示ができるjQueryプラグイン「scroll-up-bar」 固定要素をスクロール位置によって切り替えられる「Midnight.js」 ブロック要素の下部をスクロールに応じ曲げてカッコよくするサンプル「Curved Cut」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
範囲指定のUI実装jQueryプラグイン「range-picker」:phpspot開発日誌
Loading...
http://straydogstudio.github.io/film_roll/
jQuery MORE CLICK
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
ゴーストボタンと相性が良さそうなホバーエフェクト 10＋ - NxWorld
