HTMLページでデータを視覚化するためのベクターマップを生成するjQueryのプラグインを紹介します。 jVectorMap デモ [ad#ad-2] デモではマウスホバーで国のエリアがハイライトされ、その国名が表示されるようになっています。 ベクターマップの描画にはFirefox3/4, Safari, Chrome, Opera, IE9でSVG、IE6/7/8でVMLを使用します。 下記は、IE6でのキャプチャです。
長いリストを省スペースに設置するのに便利なリストの一部を非表示にし、隠したアイテムをアニメーションでスライド表示させるjQueryのプラグインを紹介します。 aPartHide デモ [ad#ad-2] 非表示にするアイテムの数は設定が可能で、デモでは七つのアイテムを配置したリスト要素の初期状態では3アイテムだけ表示し、「more」をクリックするとすべてのアイテムが表示されます。 また、全アイテムを表示した状態で、「less」をクリックすると3アイテムのみ表示されます。 aPartHideの実装 HTML リスト要素をdiv要素で内包し、表示・非表示用のdiv要素を配置します。 <div id="box1" class="demo"> <h3>Demo</h3> <ul> <li>Demo list item 1</li> <li>Another list item</li> <li>Th
なかなか良かったのでご紹介。jQuery Mobileを使ったスマフォ向けのHTML ファイルをオンラインで作成出来る シンプルなWebサービス・mobjectifyで す。直感のみで作成することが出来ま す。ユーザー登録も不要なのはいいですね。 jQuery Mobileのサンプルを自作してダウンロード出来ます。いくつか似たようなサービスがあった気がしますけど・・これはこれで覚えておいて損は無さそうです。 [note]因みに当サイトでもjQuery Mobileのサンプルを配布していますので宜しければどうぞ。[/note] jQueryMobileを使ったHTMLファイルをダウンロード出来るのですが、諸事情でモックアップとして使うしか無さそうですが、ユーザー登録も不要で手軽に使えるので。 以下に使い方を少しご紹介。 Pageを作成 Try Nowをクリックしてスタート。まずはPageをク
マウスの動きに応じて重ねた複数の画像 が動きその動きを使って視差効果を与える、 というjQueryプラグイン。ユニークでいいで すね。ソースも軽量です。こういうの実装され てるだけで、ちょっと味のあるデザインに なりますよね。 視差アニメーション用のjQueryプラグインは今までもいくつかありましたけど、今回使用されてるものは割と簡単なコードだったので勉強にもなると思いメモ。 PLAX マウスの動きに合わせて重ねられた画像がそれぞれ別の動きをするので結果的に視差効果が生じる、というもの。よくあるやつですね。Githubの404ページのアニメーションで使われてるスクリプトみたいです。 デモ (function($){ var layers = [], docWidth = $(window).width(), docHeight = $(window).height() $(window).
縦長のwebデザインをがむしゃらに集めています。
ちょっとしたコードの解説 せっかくなので、どういうコードなのかというのを、さらっとみましょう。 jQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tbody tr[data-href]').addClass('clickable') //ata-hrefの属性を持つtrをクリックしたら動作 .click( function() { //data-href属性の値をattr()メソッドで取得し、ページを遷移させる window.location = $(this).attr('data-href'); //もしtr内にa要素があれば、a要素にホバーした時に以下動作させる }).find('a').hover( function() { //a要素の先祖要素trのクリックイベントを解除 $(this).paren
Creating Focal Points in Your Web Design [ad#ad-2] 下記は各ポイントを意訳したものです。 元記事ではさらに多くのサイトが紹介されています。 はじめに タイポグラフィ イラストレーション ボタン ホワイトスペース デコレーション はじめに ウェブサイトのユーザーは、少しでも速くものを見いだすことを望みます。そしてわたし達ウェブデザイナーは、そのようにサイトをデザインするべきです。これを実現する最も重要な方法の一つがフォーカルポイントです。 フォーカルポイントと、はユーザーの注目をガイドするようウェブページ上に目立つセクションのことです。フォーカルポイントは際立っており、他のコンポーネントとは別のものです。ウェブページの最も重要な外見を強調し、ウェブサイトの主となる目的を伝えることが可能です。 タイポグラフィ タイポグラフィはサイズ、カラー、ス
CSS3セレクタを使う上で問題となるのはやはりIEです。HTML5 & CSS3 Supportで確認すると、IE6~8はほとんど対応できていないことが分かります。 そんなIEでもCSS3セレクタを使えるようにするのがSelectivizr.jsです。詳しく紹介されているサイトがあまりなかったのでご紹介。 Selectivizrの設置方法 ここで提供されているselectivizr.jsとJavaScriptライブラリを外部ファイルで読み込むだけで、CSS3セレクタがIE6~8でも利用可能となります。コードも外部ファイルを読み込むだけですのでとてもシンプルです。 <script type="text/javascript" src="[JSライブラリ]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascr
Gmailライクにローカル環境からブラウザに ドラッグ&ドロップで画像をアップロード可能 にするHTML5+jQuery製のアップローダー droparea。今後、こうしてキーボードを使う 頻度が減っていくんですかね・・HTML5の 出現で一気に加速した印象ですね。 jQuery HTML5 UploaderやjQuery File Uploadの後発に当たりますね。 イメージアップローダーです。Gmailライクにドラッグ&ドロップでアップロード出来ます。 コードs = { 'init': m.init, 'start': m.start, 'complete': m.complete, 'instructions': 'drop an image file here', 'over' : 'drop file here!', 'nosupport' : 'No support for t
ちょっとうまい説明が思いつかなかった んですけど、複数並べられた画像など を同時にスライドさせるjQueryプラグイン。 省スペースに多くのコンテンツを表示 させる事が出来るのはちょっといいかも 知れません。 あんまり見かけないタイプのスライダーですね・・省スペースに沢山の情報を表示させたい、という時に使えそうな使わなそうな。たまに似たようなインターフェース見かけますね。 これらの8つのコンテンツ部分が同時にスライドします。オプションで数を減らしたり速度を変えたり。 デモ見たほうが早いですね。説明下手ですみません。 Demo js <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"> </script> <script src="jquery.ea
備忘録。マウスオーバー時に背景の 色をアニメーションしながら変更する、 というのをクロスブラウザ対応で実装 したい。css3を使えば簡単な事ですが、 ご存知のようにIEは非対応。で、色々 探してみたんですが、jQueryUIを使う のが一番良さそうな感じでした。 普通にググったらJquery Color Pluginというプラグインがあったのですが、動作はするけどIEでエラーが出ます。リファレンスを見ても そもそも数値型の値をとらない属性(backgroundColorなど)には、animate関数は対応していません。 (jQuery日本語リファレンス) と書いてあるし、Jquery Color Pluginを直すのも面倒だし、どうしようかなと思ったんですが、jQueryUIを使えば凄く簡単なんですね・・・素人ですみません。 コード <script type="text/javascrip
Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く