ページを最後まで見たらメッセージを表示するJavaScript「End of Page Slide Out Box with jQuery」
twitter facebook hatena google pocket 最近のサイトはフッターに多くの情報を載せて回遊率の向上を図っています。 これをJavaScriptを利用して、もっと印象的にさせられます。 via：End of Page Slide Out Box with jQuery | Codrops sponsors 使用方法 jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(window).scroll(function(){ //idがlastの高さを取得 var distanceTop = $('#
もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」
もうFLASHはいらない！？画像切替えJavaScript「jQuery "Feature Carousel" plug-in 」 FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。 でもそれFLASHじゃなくてもよくない？ JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。 sponsors 使用方法 jQuery "Feature Carousel" plug-in からファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="featureCarousel.css"> <script type="text/javas
もうFLASHはいらない！？画像切替えJavaScript「jQuery
twitter facebook hatena google pocket FLASHを使用して画像を印象的に切り替える手法がWEBマガジンなどでは多く見られます。 でもそれFLASHじゃなくてもよくない？ JavaScriptライブラリのjQueryを利用した「jQuery "Feature Carousel" plug-in 」なら、いちいちフラッシャーに直させたり、よくわからないxmlを書き換える必要もありません。 sponsors 使用方法 jQuery "Feature Carousel" plug-in からファイル一式をダウンロードします。 <link rel="stylesheet" type="text/css" href="featureCarousel.css"> <script type="text/javascript" src="jquery-1.4.2.min
ユニークなエフェクトがある画像ギャラリーJavaScript「COIN SLIDER」
twitter facebook hatena google pocket 画像ギャラリーのJavaScriptがあふれる中、少しでも特徴感を出したいものです。 Coin Slider: jQuery Image Slider Plugin with Unique Effectsは少し変わった切り替えエフェクトを持つ、プラグインです。 これを利用して、オリジナル感を出してみてはいかがでしょうか。 sponsors 使用方法 Coin Slider: jQuery Image Slider Plugin with Unique Effectsからファイルをダウンロードします。 また、jQueryからjquery.jsをダウンロードします。 <link rel="stylesheet" type="text/css" href="coin-slider-styles.css"> <script
tableのどこを見ているか色付けてくれるJavaScript「Table Highlighter」｜skuare.net
twitter facebook hatena google pocket tableで作られた表組みを見ていると、いまどこを見ているのかわかりにくくなります。 特に縦長の表だとなにがなんだかわかりません。 そこで、いまどこを見ているのか、色を付けて表示してくれるJavaScriptTable Highlighterを紹介します。 sponsors 使用方法 Plugins | jQuery Pluginsからjquery.tablehightlight.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.tablehightlight.js"></scrip
JavaScriptを利用してリアルタイムに翻訳させる「jQuery Translator」
twitter facebook hatena google pocket サイトは国境を超え、さまざまな人が閲覧します。 ただし、英語、フランス語、スペイン語と別にページを用意したらコストが膨大になります。 そこでjQuery Translatorの出番です。 Googleが提供するGoogle AJAX Language APIを簡単に利用して翻訳させることが可能です。 sponsors 使用方法 jQuery Translatorからjquery.translator.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type='text/javascript'> google.load("language
メガメニューを簡単に実現するJavaScript「jQuery Mega Menu」
twitter facebook hatena google pocket グローバルメニューにドロップダウンでサブカテゴリまで表示させることがあります。 でもECサイトなどではサブカテ多すぎて・・・なんて方にメガメニューをお勧めします。 JavaScriptを使用して簡単に導入できるjQuery Mega Menu | GeekTantraを紹介します。 sponsors 使用方法 jQuery Mega Menu | GeekTantraからファイル一式をダウンロードします。 <link rel="stylesheet" href="jquery.megamenu.css" type="text/css" media="screen" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <scrip
メニューのマウスオーバーを効果的にするJavaScript「jQuery Sliding Menu (AKA Lavalamp)」
twitter facebook hatena google pocket 一番目立つメニューを印象的にすることで、サイト内の回遊性向上が期待されるかもしれません。 jQuery Sliding Menu (AKA Lavalamp)を利用するとマウスオーバーを効果的にすることが可能です。 sponsors 使用方法 jQuery Sliding Menu (AKA Lavalamp Menu)からファイル一式をダウンロードします。 また、jQueryをjQuery: The Write Less, Do More, JavaScript Libraryからダウンロードします。 ※1.4が必要となるようです。 <link rel="stylesheet" href="jquery.sliding-menu.css" type="text/css" media="screen" /> <sc
jQueryで要素を動かして印象的にする：via Crafting an Animated Postcard With jQuery
twitter facebook hatena google pocket 昨今Tori's Eyeのように要素をJavaScriptで動かしているサイトを多くみます。 今回はjQueryを使用して要素を動かす方法を紹介します。 via：Crafting an Animated Postcard With jQuery sponsors 使用方法 サンプルのようなアニメーションを作るには以下のようなhtmlを記述します。 使用するファイル一式はCrafting an Animated Postcard With jQueryからダウンロードしてください。 <div id="content"> <div id="sun"><amp-img src="images/sun.gif"/></div> <div id="cloud1"><amp-img src="images/cloud1.png
マウスホイールでもスクロールさせられるJavaScript：via jQuery TOOLS
twitter facebook hatena google pocket 要素をスクロールさせられるJavaScriptは結構ありますが、今回のようにマウスホイールでスクロールさせられるのはなかったのではないでしょうか。 jQuery TOOLS / Scrollable - Scroll your HTML with eye candyは高機能なスクロールJavaScriptです。 sponsors 使用方法 jQuery TOOLSからjquery.tools.jsをダウンロードします。 また、マウスホイールプラグインもダウンロードします。 <script type="text/javascript" src="jquery.tools.js"></script> <script type="text/javascript" src="jquery.mousewheel.js"></
ユーザビリティに優れた画像ギャラリーJavaScript「jquery.showcase」
twitter facebook hatena google pocket 画像ギャラリーは、数多くあふれていますが、発端がLightBoxだったからか、あまりユーザビリティに優れているとはいえません。 jQueryプラグインのjquery.showcaseを使用すると、今何を見ていて、後何枚あるのかを明示することができ、わりとユーザビリティに配慮できます。 sponsors 使用方法 jquery.showcaseからjquery.showcase.1.0.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.showcase.1.0.js"></script> <sc
これはすごい！テキストに影を付け印象的にする「CSS text-shadow Fun」
twitter facebook hatena google pocket CSSのtext-shadowとJavaScriptを利用してテキストの影を非常に印象的にするテクニックです。 ※サポートブラウザはSafari、FF3.5、Operaなどです。 via：CSS text-shadow Fun sponsors 使用方法 まずはテキストを書きます。 <div id="text-shadow-box"> <div class="wall"> <p id="tsb-text">影を付けたいテキスト</p> <div></div> </div> <div id="tsb-spot"></div> </div> 上記を記述したら、CSSを以下のようにします。 <style type="text/css" media="all"> #text-shadow-box { position: r
div要素の幅を伸縮自由にするJavaScript「Ingeny Splitter」
twitter facebook hatena google pocket ページのレイアウト幅をがっちりと決めると、ユーザーに不便させる可能性があります。 jQueryプラグインのIngeny Splitterを使用するとドラッグでページレイアウトを自由にユーザーが調整できるようになります。 sponsors 使用方法 Ingeny Splitterからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.ingeny.splitter.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#
iPhoneライクにスクロールさせるJavaScript「OverScroll」
twitter facebook hatena google pocket iPhoneのスムーズなスクロールをJavaScriptライブラリ「jQuery」で実現しました。 via：OverScroll sponsors 使用方法 OverScrollからjquery.overscroll.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.overscroll.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名").overscroll(); });
floatさせた要素を上手い具合に整列させてくれるJavaScript「jQuery Masonry」
twitter facebook hatena google pocket CSSでfloatさせると要素の高さによっては、想定していたように並ばないことがあります。 そんな時にはjQuery Masonryを使用すれば、まず水平方向に合わせた後、垂直方向にもあわせるので、綺麗に要素を整列できます。 sponsors 使用方法 jQuery Masonryからjquery.masonry.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.masonry.js"></script> <script> $(document).ready(function() { $('要
こいつは凄い！フルスクリーン縦型画像ギャラリー「jQuery Gallery Slider Plugin」
twitter facebook hatena google pocket 画像ギャラリーと言うとなんとなくLightBoxに代表されるような見せ方が思い浮かびます。 でもそんなものに飽ききった皆さんに朗報です。 jQuery Gallery Slider Pluginを使用すると、フルスクリーンで縦型の画像ギャラリーを作成できます。 sponsors 使用方法 jQuery Gallery Slider Pluginからファイル一式をダウンロードします。 またjQueryからjquery.jsをダウンロードします。 <link href="galleryslider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script
フォームの要素にうっすらテキストを表示するJavaScript「jQuery Form Tips」
twitter facebook hatena google pocket ユーザビリティに配慮したフォーム作りのため、入力項目にうっすらテキストを表示してみましょう。 JavaScriptライブラリjQueryのプラグイン「jQuery Form Tips」を使用すると簡単に実現できます。 sponsors 使用方法 jQuery Form Tipsからjquery.formtips.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.formtips.js"></script> <script type="text/javascript"> $(document).
マウスオーバーで画像を拡大させるJavaScript「MagicalHover」
twitter facebook hatena google pocket 画像の拡大と言えばLightBox・・・と言わずに、こんなJavaScriptはいかがでしょう？ インラインで拡大画像を見せられるMagicalHoverです。 sponsors 使用方法 MagicalHoverからファイル一式をダウロードします。 <link rel="stylesheet" type="text/css" href="magicalHover-01beta1.css" media="screen" /> <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="magicalHover-01beta1.pack.js"></script> <script
テーブルの表組みにページネーションをつけるJavaScript「Table Pagination」
twitter facebook hatena google pocket たまに数十列を表示する表組みに出くわすことがあり、辟易することがあります。 そんな時は、所定の件数で次を見るというようなページネーションをつけられるjQueryプラグインTable Paginationを使いましょう。 sponsors 使用方法 Table Paginationからjquery.tablePagination.0.1.jsをjQueryからjquery.jsをダウロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.tablePagination.0.1.js"></script> <script type="text/jav
jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」
twitter facebook hatena google pocket かっちょよくシリーズ第２弾。。。 jQueryを使用してメニューのマウスオーバーを印象的にしてみます。 via：jQuery Background Position sponsors 使用方法 jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。 次にこんな画像を用意します。 次に以下のようにjsを記述します。 <style> ul {list-style:none;margin:0;padding:0;} li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;} li a {background
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
