レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」:phpspot開発日誌
bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area. ? ajaxBlender.com レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 クロスフェードをかけつつ、クールに動く背景画像のスライドショーにレスポンシブな仕組みを取り入れた機能を実現するクールなスライドショー実装が簡単に出来ます 背景をスライドショーするとインパクトは大きいのでキャンペーンサイトなどに使えそうですね 関連エントリ 色をベースにフリーの背景画像や色パターンが検索できる「ColRD」 背景画像を使わず動的に背景模様を描画できるjQueryプラグイン「NoiseGen」 背景画像等に使
フルスクリーン背景がスライドショーになるCSS3サンプル:phpspot開発日誌
Fullscreen Background Image Slideshow with CSS3 | Codrops フルスクリーン背景がスライドショーになるCSS3サンプル。 ページ全体の背景がCSS3によってアニメーションされ切り替わるサンプルとチュートリアルが公開されています。 画像・文字が綺麗にクロスフェードしながら切り替わってなかなかカッコいいものがCSS3をベースに構築されていて勉強になりつつ、そのまま使えそうです デモページ ISDNの時代などはページ全体を背景にすることはタブーでしたが回線の高速化で珍しくなくなりましたね。 今後、よりPCのスペックがあがり回線環境がよくなることで未来はもっともっとリッチになっていきそうですね 関連エントリ CSS3のアニメーションサンプル４７ ピュアCSS3でタイピングアニメーションするデモ CSS3で実装された画像スライドショーサンプル C
[JS]jQueryのプラグイン33+1選 -2011年4月
Slider Kit スライドショー、コンテンツスライダー、タブコンテンツ、カルーセルなどさまざまなスライドコンテンツに対応。
[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン:phpspot開発日誌
ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン。 ブロック要素があって、背景だけをアニメーションさせるという効果を簡単に作成できるようです。 要素中のテキストは動かないので、ページ全体のブロック要素の背景をパッとアニメーションで切り替えるのも面白い効果が得られるかもしれませんね。 ちょっと分かりづらいと思うのでデモを見てください。 関連エントリ 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例
[JS]背景やボーダーの不透明度をアニメーションで変更するスクリプト -Transify
IE6にも対応した、指定したエレメントの背景やボーダーの不透明度をアニメーションで変更するjQueryのプラグインを紹介します。 IE6でのキャプチャ Transifyの特徴 あらゆるエレメントの背景とボーダーの不透明度を変更します。 設置は簡単で、軽量のスクリプト。 主要ブラウザの全てで動作します。 機能するのは、背景のカラー、背景の画像、ボーダーです。 マウスのホバーで、不透明度をアニメーションで変更します。 jQuery1.4.3でテスト済みです（前のバージョンでも動作します）。 [ad#ad-2] Transifyの実装 「jquery.js」と「transify-min.js」を外部ファイルとして指定し、下記のように記述します。 「#selector」は任意のエレメントを指定します。 $('#selector').transify(); デフォルトでの不透明度は60%に設定されて
背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例:phpspot開発日誌
Beautiful Background Image Navigation with jQuery | Codrops 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例。 デモページを見ていただくとそのクールさ加減が分かると思います。Flashを使わずになかなかクールな効果が出てますね。 ちょっとしたプロモーションサイトなんかに導入してみるのもよさそうです。 関連エントリ アニメーションの残像が残るjQueryアニメーションチュートリアル 泡のアニメーションで癒しを演出できるjQueryプラグイン「Bubble Engine」 キャラクターとバックグラウンドをアニメーションさせられるjQueryプラグイン「Spritely」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム jQueryでアニメーションするソート可能なデータグリッ
[JS]背景画像をアニメーションさせるjQueryのプラグイン -jAni
再生や一時停止、停止などコントロールも可能な、背景画像をアニメーションさせるスクリプトをajaxBlenderから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> <script type="text/javascript" src="../jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../jani.js"></script> </textarea>
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム:phpspot開発日誌