jQuery UI の effect を使い、クリックで要素を横に揺らす
jQuery UI の effect プラグインを使い、クリックで、要素を横に揺らす方法。effect() の1つ目の引数に、「shake」を指定する。3つ目の引数で、横に揺れるアニメーション動作の速度を、ミリ秒単位で、調整できる。 実装例（サンプル） 実装例（サンプル）の動作について 実装例（サンプル）のカーキ色のボックスをクリックすると、ボックスが横に揺れる。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascr
Designoob jQueryを使ったアニメーション 10+
Six Revisionsに10 Awesome Techniques and Examples of Animation with jQueryとして 10個のjQueryを使ったアニメーションが紹介されています。 ソースもUPされているので参考にどうぞ。 Puffing Smoke Effect in jQuery 煙突から煙を吐くアニメです。 ゆらゆらとゆれるのが特徴的ですね。 Parallax Scrolling Background 右上のメニューを選択すると 画面が動いて、他のボードに移動します。 ページ全体を使った大胆なアニメーションですね。 これらを使えば、Flash等も使わずに スムーズなアニメーションが作成できますね。
jQueryで背景色をランダムに変える jQuery入門&サンプル集
今回は比較的簡単な背景色をランダムにってのをjQueryでやってみたいと思います。ウィンドウを開くたび、色をこちらで指定して好きな色のみでランダムに背景色を変更できるようにします。 ※デモ追加しました。 ではHTMLソース。 <body> <p></p> </body> ほぼ空ですがpタグのところに文字を入れるのでpタグだけ入れといてください。 ではjQueryのソース。 var bgcolor = ["#fff000","#ff3dab","#0085f5"]; hairetusu = bgcolor.length; //配列数「3」が出力 $('p').append(hairetusu+"パターンのランダム背景です。");//pタグに配列数を出力 var picup = Math.floor(Math.random()*hairetusu); // 1～3を変数picupに入れる va
jQueryのプラグイン「Page Scroller」を商用利用でも無料に変更しました：更新- 3.0.7
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ（3.0.7）して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前： 表示 - 非営利 - 継承 2.1 日本 変更後： 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
Web-ContentsSketch：ウェブを中心にデザイン活動している人の日々の記録 【久しぶりにjQueryに関するプラグインをいろいろ見ていました[その2]。特にColorlistが気に入りました】
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル／サッカーの話題なども。 無事にポータルサイトやコンセプトブックのコンテンツサイトもアップになったので、一安心。 今後も、情報発信、表現で適切なものを適切に使うことを行なっていきたいな、と考えてます(^^ というわけで、ちょこっと追加で、改めていい感じのjQueryプラグインがあったのでご紹介～～。 ●[jQuery]自由自在！マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu | Ys DESIGN 元サイトはこちら ●Color Fading Menu with jQuery | CSS-Tricks マウスオーバーで背景画像が切り替わったり文字の色がフェードで変わるので上品な感じ。 今、よく実装している背景画像配
『背景色変更（グラデーション）』
body{ background:url(画像のＵＲＬ) repeat-x bottom; background-attachment:fixed; } #frame{ background-color:transparent; } #sub_a{ background-color:transparent; } #sub_b{ background-color:transparent; }
Webの技術的な話 | hamnaly（ハンナリィ）ブログ
リストマーカー（CSSのlist-style-typeプロパティ）で迷ったことがありまして あるHTMLコーディングの仕事において、リストマーカー（CSSのlist-style-typeプロパティ）について迷うことがありました。それはホームページの利用規約や個人情報保護方針のような、条文タイプのテキストをHTMLコーディングするときに発生しました。通常、条文タイプのテキストでは番号リスト（HTMLタグ : ol）でマークアップします。条文には番号（順番）があり、これが重要なためです。 番号リストでマークアップされたテキストは、ブラウザによって各条文の先頭に「1.」「2.」のように連番が振られて表示されます。ここで問題が発生しました。原稿には「(1)」「(2)」のように括弧付きの連番がふられています。また条文のなかには「2.(1)(2)を除いて〜」のように条文番号を括弧付きの連番で参照するも
jQueryプラグイン サンプル（画像系）：skuare.net
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via：dcdeiv/jsonslider
IEでもCSS3のプロパティ、エフェクトを表現できるようにするリソース＆スニペット
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
スマートフォンサイトをデザインする7つのポイント (1/3)
Webサイトをデザインするときは、単なる見た目の美しさだけでなく、情報の見やすさや使いやすさなどの「ユーザビリティ」や、高齢者や障がい者の方も快適に使える「アクセシビリティ」に留意する必要があります。さらに、スマートフォンサイトのデザインでは携帯電話端末ならではの特性も考慮しなければなりません。 デザインに必要な環境を整える WebサイトのデザインではいきなりHTMLを書くのではなく、まずPhotoshopやFireworksなどの画像作成ソフトを使って「デザインカンプ」を作成し、画像パーツを切り出してHTML化していくのが一般的です。こうした流れはスマートフォンサイトの場合でも変わりません。 ブラウザー枠を用意しよう PCサイトを制作するときには、デザインカンプを実際のサイトのイメージに近づけるため、Webブラウザーの枠を含む状態でデザインすることがよくあります。そこで、スマートフォンサ
マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
Posted: 2011.05.30 / Category: javascript / Tag: jQuery, Plugin マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」のご紹介です。 最新のはわかりませんがIEだと動かないかもです。 「jquery.parallax.js」のダウンロードとインクルード プラグインを下記URLからダウンロードします。 ここでは現時点で最新版である「0.2」を使用します。 jQuery Parallax | jQuery Plugins ダウンロードしたらjsファイルを読み込みましょう。 jQuery本体も忘れず読み込みます。 html <script type="text/javascript" src="jquery1.5.1.js"></script> <script type="te
制作中のWebサイトにシンプルなグリッドを表示させる制作補助系jQueryプラグイン・Simple Grid
昨日TwitterでもPostしたんですけどやっぱり たまに使いそうなのでメモ。数値を設定する だけで簡単にシンプルなグリッドを重ねる事 が出来るWeb屋さん向けのjQueryプラグイン・ Simple Gridです。いちいち拡張やブックマー クレット使うのも面倒ですしね。 制作中のサイトにこのプラグインを入れるだけでグリッドを表示できるので場合によっては手間が省けるかもしれません。オンオフも簡単に切り替えられるのもメリットです。 こうしてグリッドを重ねられます。微調整で結構時間取られるので楽っちゃ楽かも。 グリッドの調整は簡単で、jQueryとプラグインを読み込んで下記のように設定するだけです。 <script type="text/javascript"> $.simpleGrid({ rowHeight: 20, columnWidth: 30, gridWidth: 960 });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
グラデーション背景 5秒おきに色が変わる｜アメブロ初心者用カスタマイズ だめ奥さまCSS/HTML図書館
いいかおまえら。スマートフォンWeb制作する前に読んどけよ。 - ドブログ[Do-Blog]
ウェブ制作の時間を大幅に短縮する、今時のUIコンポーネントが簡単に実装できる -Chico UI
Webデザイナーが読んでおきたい、最近公開されたWeb系のスライド
FFFFOUND! | portfolio website of graphic designer Ant Baena... (that's me!)
フリーランスのための全国Webサイト制作料金表
