In this tutorial we are going to create a gallery with a smooth diagonal fade effect, powered by css3 transitions. It will scan a folder with photos on the server and display them in a grid that spans the entire browser window. Adding new photos is as easy as copying two files (a regular image and a thumbnail, preferably 150x150 px) to the gallery folder. CSS3 capable browsers will show a smoothly
Slickhover.js is a lightweight useful jQuery plugin that produces a slick and smooth hover effect that fades out images and shows a custom icon when a user hovers over an image. All you have to do is call it on an image and slickhover does the rest!
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
jQuery POP'n SocialButtonはカスタマイズされたFacebook、Twitter、はてなブックマークの共有アイコンを表示します。 WebサイトにTwitterやFacebook、そして日本であればはてなブックマークのソーシャル用アイコンが設置されているのは当たり前になってきました。しかし単に設置するだけではもはや目立ちません。今回はその一歩先をいくjQuery POP'n SocialButtonを紹介します。 各ボタンの右下に共有数が表示されます。 吹き出し風に数値を出すこともできます。 jQuery POP'n SocialButtonはマウスオーバーでアイコンがちょっとだけ上に持ち上がったり、アイコンをクリックするとシェアするためのウィンドウ、数値をクリックするとコメント一覧ページに遷移するようになっています（Facebookはどちらも数値クリックはありません）
CalDavZAPはjQuery/JavaScriptで構築されたCalDAV対応のフロントエンドです。 CalDAVというのはGoogleカレンダーやiCloudのカレンダーでも実装されているカレンダー用のプロトコルです。そんなCalDAVをWebベースで扱うソフトウェアがCalDavZAPです。 ログインします。 最初の表示は今日の予定表示になっています。 カレンダーを選択すると予定が表示されました。 月表示です。 予定の詳細です。 編集モードです。 検索すると対象外の予定が薄くなります。 新規予定の作成です。 カレンダーで期間を選択して予定作成も可能です。 ドラッグで予定を移動させられます。 Todoも登録できます。 CalDavZAPはjQuery/JavaScriptで作られており、サーバサイドを必要としていません。バックグラウンドでデータ同期を行う仕組みであったり、イベントやT
ちょっと話題としては乗り遅れた感が漂いますが、先月末に jQuery 1.9 の正式版、および jQuery 2.0 のベータ版がリリースされました。 jQuery 1.9 final, jQuery 2.0 beta, Migrate final released ： Official jQuery Blog これに際して公開された、jQuery 1.9 への移行ガイド 「jQuery Core 1.9 Upgrade Guide」 を翻訳してみたので下記に公開してみます。 jQuery 1.9 / 2.0 とは？ jQuery 2.0 は IE 6/7/8 への対応をやめることで、より軽量で高速、そして安定化を目指した jQuery のメジャーバージョンアップ版ですが、jQuery 1.9 は 2.0 と 完全な互換性を持ちつつも、レガシーブラウザへの対応が可能なバージョンで、IE 8
スライド内に複数の要素を配置し、それぞれ異なるタイミングで異なるアニメーションを設定できるスライダーを実装するjQueryのプラグインを紹介します。 デモ：Animation Basic それぞれ対角にアニメーションでスライドします。 Fraction Sliderの使い方 実装は非常にシンプルです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" href="fractionslider.css"> <script src="jquery-1.9.0.min.js" type="text/javascript"></script> <script src="jquery.fractionslider.js" type="text/javascript" ></script>
リッチなWebアプリケーションに対するニーズの増加に伴い、JavaScriptで十分なパフォーマンスを担保することが難しくなってきています。とりわけ、スマートフォンのような非力なデバイスでは一層シビアなチューニングが求められるでしょう。本セッションでは、もっともポピュラーなJavaScriptライブラリである「jQuery」を中心とした、いくつかのパフォーマンス解決のためのヒントについてご紹介させていただきます。 http://frontrend.github.com/events/04/#pocotan001
CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 2013年02月18日- Textillate.js CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」。 実に様々なテキストアニメーションが実現できてページにアニメーションエフェクトを付けたい際に便利。 CSS3非対応ブラウザは動作しませんが、そもそもスマホ等向けのサイトであれば活用できそう アニメーションの種類が実に様々。 Chromeなどで見るとアニメーションの滑らかさも素晴らしい。 関連エントリ 面白いテキストアニメーションが簡単に実現できるjQueryプラグイン「Textualizer」 テキストを部分的にカッコよくアニメーションさせつつ切替え可能にするjQueryプラグイン「dynamo.js」 テキストを燃え上がら
Columnizer jQuery Plugin テキストを新聞風のレイアウトにできるjQueryプラグイン「Columnizer」。 <div>内にある、<h1>や<p>で構成されただけの文書を初期化すると、新聞風のレイアウトにしてくれます。 マークアップ例 初期化したレイアウト。カラムの幅なんかはclass名指定によって選べるようです。 ちょっと変わったUIにしたい、とか新聞っぽさを出したい時に使えそう 関連エントリ 画像レイアウト関連で便利なjQueryプラグイン等まとめ アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」 ブロック要素の高さを簡単に揃えられるjQueryプラグイン「equalize.js」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 アイテムをタイル状に並べる新しいjQueryプラグイ
2013年02月14日10:48 カテゴリprogramming jQueryを用いた美しいajax処理 こんにちは、Research Panel Asia の関口(@takkyuuplayer)です。 jQueryを用いた非同期処理の待ち合わせについて書きたいと思います。 昨今WebにリッチなUIが求められていますが、その際によく遭遇するのが次のような処理です。 「処理A(非同期)が終わってからその結果を元に処理Bを行いたい。」 jQuery.getなんかでデータを取ってくる際には必須ですね。このような非同期処理の待ち合わせはjQuery.Deferredを使うと簡単に実現可能です。 jQuery.Deferred ex1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title></titl
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
※この記事は古い記事です。新しく追記、変更した記事は こちら 。 jQuery Migrate plugin の README と warnings を読んで、適当にまとめました。 誤訳、情報が古い、使ってない等々のリスクがありますので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思いたい） 箇条書きにすると以下のような感じ： jQuery Migrate plugin について 開発版と製品版の違い 使い方 jQuery Migrate plugin のプロパティ 警告メッセージの種類 JQMIGRATE: Logging is active JQMIGRATE: jQuery.attrFn is deprecated JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8 JQM
決済サービスを展開する米「Stripe」は2013年2月7日、ポピュラーなJavaScript用ライブラリ (プログラム郡がパッケージされたもの)「jQuery」と連携して仕様できる決済ライブラリ「jQuery.payment」をリリースしたと発表した。 「Stripe」は、面倒で時間のかかる決済機能の導入について、どこよりも簡単に実装できるAPIを提供する企業。大手決済サービスを展開する米PayPal 創業者や、大手有力VCから投資を受けるなど注目をあびている。 今回リリースされた「jQuery.payment」を使えば、数行のJavaScriptコードだけで決済機能を導入することができるようになる。 冒頭のスナップショットは、実際に「jQuery.payment」を使ってドネーションを受けられるようにしたサイト。決済者は面倒なユーザー登録作業などをする必要なく、この画面から利用すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く