まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
地図や動画、Googleスプレッドシートとも連携する年表ライブラリ·Timeline MOONGIFT
Timelineは各種Webサービスのコンテンツを載せられる年表表示ライブラリです。 JavaScriptを使って格好いい年表（タイムライン）を表示したいならばTimelineを使ってみましょう。目を引くインパクトある表示が実現します。 上にコンテンツ、下に年表（タイムライン）が表示される仕組みになっています。 YouTube動画も埋め込めます。Vimeoにも対応しています。 Flickr画像です。 Googleマップです。 Twitterも表示できます。 SoundCloudです。 Googleスプレッドシートから取り込む機能もあります。 データです。JSONで定義するだけで使えます。 Timelineでは下に表示されている年表の中から項目を選ぶと上にある詳細に表示されるようになっています。歴史、個人の人生、ソフトウェアの遷移など様々なコンテンツが表示できそうです。時間の単位は拡大、縮小
AnimateImage – attosoft.info
目次 概要 特徴 使い方 ダウンロード API 仕様 記述例 デモ FAQ アニメーション機能を持つほかのスクリプト 画像関連のアニメーション規格 サポートする？ 概要 AnimateImage は複数の画像をアニメーション GIF のように連続表示する JavaScript ライブラリ。 ※ アニメーション機能を実現するスクリプトはいくつかあるが、要求に合ったものがなかなか見つからなかったため自分で作成。 特徴 複数の画像をアニメーション GIF のように連続表示する。連番または任意のファイル名に対応。 Web ブラウザーがサポートするすべての画像形式に対応 PNG, JPEG, GIF, BMP, TIFF, WebP など 透過 PNG 画像によってアニメーション画像の背景を透過できる 256 色を超える高画質の写真やイラストをアニメーションできる アニメーション間隔を指定できる (
[JS]シンプル！軽量！簡単！三拍子揃ったスライドショーのスクリプト -jQuery.TinySlider
jQuery.TinySlider デモ [ad#ad-2] jQuery.TinySliderの実装 HTML スライドで表示されているイメージはdiv要素の背景画像です。 <div id="slider"> <div class="image" style="background-image: url(img/img1.jpg);">Simple</div> <div class="image" style="background-image: url(img/img2.jpg);">Light</div> <div class="image" style="background-image: url(img/img3.jpg);">Easy</div> </div> JavaScript 「jquery.js」と「jquery.slider.js」を外部ファイルとし、下記のスクリプト
JavaScriptを使った縦書きライブラリ·竹取 JS MOONGIFT
竹取 JSはJavaScript製のオープンソース・ソフトウェア。Webの世界（というよりもコンピュータの世界）では横書きが標準になっている。ずっと見続けていると、いつの間にか違和感がなくなっているが日本語は基本的に縦書きだ。 横書き文章をJavaScriptで縦書きに ワードプロセッサなどでは縦書きモードもあるが、それをそのままWebに反映するのは難しい。長音記号やカギ括弧などそのまま縦向きにしても使えない文字もある。そうした点を網羅した縦書き表示ライブラリが竹取 JSだ。 竹取 JSの面白いのは標準の左から右に書かれる文章をJavaScriptを使って縦書きにしている点だ。さらにそれだけでなく、長い文章の場合はスクロールが出るのだが、標準の上から下のスクロールで読み進めることが出来る。 強調は傍点に！ ルビ表示にも対応し、さらに強調表示は傍点になる。下線は左側に表示されたり、リストや画
[JS]シャボン玉のようにふんわりと膨らんだり縮んだりするナビゲーション
マウスのホバーで、ふんわりと膨らんだり縮んだりするアニメーションがかわいらしいナビゲーションを実装するチュートリアルをCodropsから紹介します。 Awesome Bubble Navigation with jQuery デモページ デモでは円状に配置された各カテゴリにマウスをホバーすると、それぞれの配下コンテンツが配置される仕組みになっています。 アニメーションには緩急がつけられており、とても気持ちいいです。 実装方法は、HTML, CSS, JavaScriptのパートごとに丁寧に解説されており、画像を含む全ファイルがダウンロードできます。
画像を自在に差し替える·Transm.js MOONGIFT
Transm.jsはJavaScript製のフリーウェア（ソースコードは公開されている）。Webサイトでヘッダーの画像が定期的に入れ替わったり、写真のスライドショーのように切り替わる表示方式がある。ただ入れ替わるだけでは面白くなく、そこにイフェクトが加わってこそ意味があるだろう。 黒目の部分だけ入れ替わる そんなイフェクトが110種類を越えて利用でき、さらに画像の透過処理を使って一部だけで差し替えもできるライブラリがTransm.jsだ。非商用であればフリー、商用利用のライセンスも用意されているソフトウェアだ。 Transm.jsを知るにはサンプルを見るのが一番早いだろう。フェードアウトしたり、上下左右から新しい画像が出てきたりと様々なイフェクトが可能だ。画像の中央から円形に沿って表示が切り替わる、HTML5を使った効果も多数あるので、対応していないブラウザもある。 Transm.jsの紹
jQueryによる画像に沿ったテキスト回り込みライブラリ·jQSlickWrap MOONGIFT
jQSlickWrapはjQueryベース、JavaScript製のオープンソース・ソフトウェア。Webページの中に画像を差し込んで表示することは多々ある。そんなとき、画像が四角であれば回り込みも綺麗に行われるので申し分ない。だが三角の画像や、人物だけの画像の時に四角く回り込んでいるのはあまり格好が良くないだろう。 画像をスムーズに回り込んでいる イラストやシンボルに限定されるかも知れないが、背景が透明のPNG画像を使えば画像の形に合わせた回り込みができるのがjQSlickWrapだ。jQueryベースのソフトウェアで、背景を柔軟に処理して表示が出来るようになっている。 幾つかのサンプルがあるが、画像の枠線に合わせて透明な背景を無視して回り込みをしてくれる。Web上でこのような表現をするのは困難だったので、まるで雑誌のような仕上がりになるはずだ。さらに透明な背景を指定した色に変更することも
[JS]複数のパネルをウィザード形式に実装するスクリプト -Smart Wizard
複数のパネルを順番に表示するウィザード形式のコンテンツをフレキシブルなスタイルで実装するスクリプト「Smart Wizard」をFivelistから紹介します。 Smart Wizard demo デモでは4つのステップがあるコンテンツが実装されており、各ステップに進む際は「Next」ボタンをクリックして移動することができます（※ステップでは移動しません）。 前のステップに戻る際は「Back」ボタンかステップのナビゲーションで操作ができます。 デモは他にも、ステップが垂直に実装されたタイプもあります。
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
Code Snippets | CSS-Tricks
A collection of code snippets for web developers, including code for HTML, CSS, JavaScript, PHP, WordPress, jQuery, HTAccess, and more!
デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」
TOP > WebDesign > デザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials」 非常に高機能で軽量なjavascriptライブラリとして様々な機能を提供してくれるjQuery。様々なシーンで利用されていますが、今回紹介するのはデザインの邪魔をしないシンプルで小粋なjQueryエフェクト集「21 Simple and Useful jQuery Tutorials You Might Have Missed」です。 Vertical Scroll Menu ｜ Demo ナビゲーションメニューからギャラリーなどジャンル別に全部で21個のエフェクトが紹介されていますが、今回は其の中からいくつかピックアップして紹介したいと思います。 詳しくは以下 ■Four Corners Sliding
フォームで使えるjQueryテクニック集「10+ JQuery tutorials for working with HTML forms」
TOP > WebDesign > フォームで使えるjQueryテクニック集「10+ JQuery tutorials for working with HTML forms」 軽量で高機能なjavascriptライブラリの一つjQuery。様々な所で利用されていますが、今日紹介するのはフォームで使えるjQueryテクニックをまとめた「10+ JQuery tutorials for working with HTML forms」と言うエントリーです。 Submit A Form Without Page Refresh using jQuery ツールチップから、オートコンプリート機能まで、様々な機能をjQueryを用いてフォームに実装できるようになっています。いくつか公開されていますが、今日はその中からいくつか気になったものを紹介したいと思います。 詳しくは以下 ■A jQu
Webサイトをスライド化する·SiteFlow MOONGIFT
通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C
[JS]jQueryのプラグイン33+1選 -2009年8月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 slideView 動きが面白い画像のスライドショー。 Mop Slider コンテンツのスライダー。バージョンアップ。 simpl
stanlemon.net : jgrowl
jGrowl is a jQuery plugin that raises unobtrusive messages within the browser, similar to the way that OS X's Growl Framework works. Example Usage and Samples: // Sample 1 $.jGrowl("Hello world!"); // Sample 2 $.jGrowl("Stick this!", { sticky: true }); // Sample 3 $.jGrowl("A message with a header", { header: 'Important' }); // Sample 4 $.jGrowl("A message that will live a little longer.", { life:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]クロスブラウザ対応、モーダルボックスの軽量スクリプト -SimpleModal
[JS]jQueryのプラグイン33+1選 -2009年10月
[JS]ページの目次を自動生成するスクリプト -Automatically generate TOC
http://qtip1.com//docs/