文字をベーコンのように曲げて表示できるjQueryプラグイン「Bacon!」
twitter facebook hatena google pocket 朝食ではカリッと焼きあがったベーコンが必要という方もいるかもしれません。 そんなベーコン好きにはたまらないプラグイン「It's Bacon! A jQuery plugin that allows you to wrap text around a bezier curve or a line.」はベーコンの形みたいに、文字を曲げて表示することが可能です。 sponsors 使用方法 hudsonfoo/jQuery-Bacon ? GitHubからファイル一式をダウンロード。 <link rel="stylesheet" href="bacon.jquery.css"> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <scri
1行お知らせバー"ティッカー"を表示できるJavaScript「jQuery WebTicker」｜skuare.net
twitter facebook hatena google pocket トップなどに省スペースで最新情報を次々に表示させているサイトがあります。 この、いわゆるティッカーをjQuery WebTickerならお手軽に表示させられます。 sponsors 使用方法 jQuery WebTickerからjquery.webticker.jsをダウンロード。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.webticker.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#id名").webTicker({ t
Facebookページを作るにあたって役立ちそうなURL34個
twitter facebook hatena google pocket Facebookページを作るにあたって役立ちそうなURL34個のメモ。 sponsors #1 基本 Facebookって何？って言われた時 1）今日から始めるFacebook（基礎編）：Facebookって何ができるの？ 便利な8つのポイント (1/2) - ねとらぼ 2）facebook navi #2 ビジネス・マーケティング系 海外を含めた企業のFacebook導入や成功事例。 3）【完全版】Facebookビジネス活用セミナー資料 4）やっちゃっていませんか？Facebookの規約違反 5）最低限知っておくべき！企業がこぞってFacebookを使う10個の理由、まとめ 6）Facebookページ運用中の115社に聞いた!「ファン獲得単価」等の25個の運用状況に関するリサーチ結果を大公開！/『Faceboo
画像を背景にフルスクリーンで表示する「jQuery Fullscreen Slideshow with zoom/slide animation」
twitter facebook hatena google pocket フルスクリーンで画像を背景に表示させるとインパクトが出せます。 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsは、これを可能にし、またズームなどのエフェクトを全自動で付けてくれます。 sponsors 使用方法 jQuery Fullscreen Slideshow with zoom/slide animation | jQuery Pluginsからファイルをダウンロード。 下記を記述すれば完成です。 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.
見出しを自動で付けてスムーススクロールさせるJavaScript「OnePage jQuery Plugin」
twitter facebook hatena google pocket 昨今ミニマムな1ページのデザインが増えています。 その際にJavaScriptを使用し、セクションごとにスムーススクロールさせるケースが多いです。 それを簡単に実現するのが「OnePage jQuery Plugin」です。 sponsors 使用方法 OnePage jQuery PluginからOnePage.jQuery.Plugin.1.2.jsをjQueryからjquery.js、jQuery Easing Pluginからjquery.easing.1.3.jsをダウンロードします。 <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="jquery.easing.1.3.js" type="tex
リンクにマウスオーバーでQRコードを表示させるjQueryプラグイン「QR Tooltips for jQuery」
twitter facebook hatena google pocket スマートフォン時代に、これいいかもしれません。 マウスオーバーでリンクが読み込めるQRコードを表示させられるjQueryプラグイン「QR Tooltips for jQuery」です。 sponsors 使用方法 QR Tooltips for jQueryからファイル一式をダウンロードします。 <link href="qrtip-1.0-jquery.css" rel="stylesheet" /> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script src="qrtip-1.0-jquery.js" type="text/javascript"></script> <script> $(function () {
[メモ]リニューアル。主にhtml5とiPhoneについて｜skuare.net
twitter facebook hatena google pocket 気が向いたので、html5を使ってリニューアルをしてました。 いつしたのかも覚えてませんが、備忘録的に、つらつらと・・・。 sponsors ▼PC [html5] ▼PC[CSSSprite] ▼iPhone[jQtouch] ▼iPhone[htaccess] PC[html5] まずはPC側。 ソーシャル系を右上に、フッターを充実っていう今ありそうな感じにしました。 また、なるべくシンプルにし、コンテンツをみやすくしたデザインです。 マークアップは、勉強がてらhtml5で記述。 head内は下記みたいにすっきりできますね。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> で、ie様向けにjsを入れました。 いわゆるhtml5.jsで
![[メモ]リニューアル。主にhtml5とiPhoneについて｜skuare.net](https://cdn-ak-scissors.b.st-hatena.com/image/square/0db85dfec72998cb2824b135a0ba87c83e67fcc6/height=288;version=1;width=512/http%3A%2F%2Fwww.skuare.net%2Fassets_c%2F2010%2F06%2Frw_iphone1-thumb-263x499-447.jpg)
自動でページネーションを付与できるJavaScript「JQuery Pagination Plugin 」
twitter facebook hatena google pocket ページが長くなる時に分割表示できるとユーザーフレンドリーになります。 また同時にページネーションとかページングと呼ばれるものを付るとより一層好ましいです。 これらすべてを自動で行ってくれる「Jquery Paginator」を紹介します。 sponsors 使用方法 Plugins | jQuery Pluginsからpaginator.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="paginator.js"></script> <script type='text/javascript'> $(function() { itemsPer
画像を背景に100%で表示させるJavaScript「fullscreenr」
twitter facebook hatena google pocket 画面いっぱい背景画像を使いたいことはありませんか？ JavaScriptライブラリのjQueryプラグイン「fullscreenr」を使用することで、導入することが可能です。 sponsors 使用方法 fullscreenrからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.fullscreenr.js"></script> <script type="text/javascript"> var FullscreenrOptions = { width: 1024, //元画像の幅 height: 683, //元画
複数のselect要素を連動させるJavaScript「Dependent Select」
twitter facebook hatena google pocket フォームなどで段階的に選択内容を絞り込ませられるとユーザビリティが向上しそうです。 jQueryプラグインDependent Selectでは複数のselect要素を連動させることが可能です。 sponsors 使用方法 Dependent Selectからjquery.dependent.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.dependent.js"></script> <script type="text/javascript"> $(document).ready(func
お手軽に要素を切り替えるJavaScript「Quovolver | a simple jQuery plugin for revolving quotes」
twitter facebook hatena google pocket 要素を一定時間で切り替えるサイトが多く見られるようになりました。 自分もそんな風にしたいという方は、まず「Quovolver | a simple jQuery plugin for revolving quotes」でお手軽に導入してみてはいかがでしょうか。 sponsors 使用方法 Quovolver | a simple jQuery plugin for revolving quotesからjquery.quovolver.jsを、jQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.quov
JavaScriptでCaptchaぽいのを作る「jQuery Real Person」
twitter facebook hatena google pocket フォームを送信する時に、スパムを防ぐためCaptchaという認証方式をとることがあります。 本格的に作るとなると非常に面倒だったり、画像が変形しすぎたりします。 今回はJavaScriptライブラリのjQueryプラグインjQuery Real Personを使用して、お手軽に導入してみます。 sponsors 使用方法 jQueryからjquery.jsを、jQuery Real Personからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.realperson.js"></script> <link rel="s
こいつは凄い！フルスクリーン縦型画像ギャラリー「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
wysiwygエディターをjQueryプラグインで簡単導入「jQRTE」
twitter facebook hatena google pocket フォームなどユーザーに入力をさせる部分にwysiwygが利用できるとユーザーの表現が広がります。 これにともない、コンテンツもリッチになるかもしれません。 敷居が高いと思われるwysiwygエディターもjQueryプラグイン「jQRTE」を利用するとあっという間に導入できます。 sponsors 使用方法 jQRTEからファイル一式をダウンロードします。 一式をアップロードし、index.phpにアクセスすると利用できます。 というように説明も楽・・・。 手を抜きすぎた感が否めないので日本語バージョンを作成しました。 jajp.zip 上記ファイルを/locale/配下にアップロードしてください。 またindex.phpの2行目を以下のように変更ください。 $language="jajp"; wysiwygエディタ
ALTでキャプションをふわりと表示：jQueryプラグイン「jCaption」
twitter facebook hatena google pocket 画像にキャプションをつけることは多いと思います。 でも、みんなと同じような見せ方は嫌だという方には、こんな方法もあります。 jQueryプラグイン「jCaption」はaltに記述したものを画像の上にふわりと乗せて表示できます。 sponsors 使用方法 jCaptionからjcaption.min.jsを、jQueryからjquery.jsをダウロードします。 <style> amp-img {border:none;} div.caption {margin: 0;padding:0;position: relative;} div.caption p {position: absolute;margin: 0; padding: 2px;font-size: .9em;bottom: 0;left: 0;b
画像のキャプションをクールに表示するJavaScript「jQuery Captify Plugin」｜skuare.net
twitter facebook hatena google pocket 画像に説明をつけるキャプションは重要ですが、配置場所は大抵決まっています。 しかし、デザイン性を重視すると画像に乗せたいなど出てくるでしょう。 今回紹介するjQuery Captify Pluginはそれを簡単かつクールに表示可能です。 sponsors 使用方法 jQuery Captify Pluginからcaptify.tiny.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="captify.tiny.js"></script> <script type="text/javascript">
JavaScriptライブラリ「jQuery」でカレンダーを表示する「dynDateTime」
twitter facebook hatena google pocket 過去2度jQueryベースのカレンダーを紹介しました。 ・jQueryベースのカレンダー作成javascript「jCalendar」 ・JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」 今回は第3弾となるdynDateTimeです。 sponsors 使用方法 dynDateTimeからjquery.dynDateTime.js、calendar-win2k-cold-1.cssをダウンロードします。 またjQueryからjqueryy.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jqu
jQueryで星型投票を実現させる「Sexy Vote jQuery plugin」
twitter facebook hatena google pocket ユーザーを巻き込むため、投票を導入するケースがあるでしょう。 そのとき、視覚的に見せられるとより効果的です。 Sexy Vote jQuery pluginは星型の投票システムをjQueryで実現させてくれます。 sponsors 使用方法 Sexy Vote jQuery pluginからjquery.sexy-vote.jsとactive_star.gif、passive_star.gifを、jQueryからjquery.jsをダウンロードします。 あとは下記の通りに記述すれば完成です。 <script type="text/javascript" src="/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="/jquery.s
mootools 110 Plugins：skuare.net
JavaScriptライブラリのmootoolsのプラグインを利用して出来るサンプルです。 Ajaxライブラリの一つmootoolsは、必要十分なメソッドに抑え、軽く、早いのが特徴です。 ここでは、画像関連、メニュー関連、フォーム関連、テキスト関連、その他、日本語未解説の分類でAjaxライブラリmootoolsを紹介しています。 Image(19) Menu(13) Form(8) Text(9) Other(18) W/O_JP(45)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
