jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々 - かちびと.net
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン:phpspot開発日誌
Full Screen Background/Slideshow | jQuery Plugins 迫力あるフルスクリーンの背景スライドショーが実装できるjQueryプラグイン。 ブラウザのサイズに応じて画像のサイズも切り替わるというフルスクリーンのスライドショーが実現可能です。 大きめの解像度の写真を迫力そのままに出したいみたいなシチュエーションで使えるかもしれません。 フッターにサムネイルつきのナビゲーションもついてます。 実装は、各種表示用のオプションに加え、画像のデータを配列で渡してあげるだけという簡単仕様です。 関連エントリ これは新しい、回転させて切り替えるスライドショー実装jQueryプラグイン 次の画像が何なのかが分かりやすいフルスクリーンのスライドショー実装jQueryプラグイン「SuperSized」
カーソルを合わせた際に背景画像をアニメーションさせるメニュー実装jQueryデモ:phpspot開発日誌
horizontal navigation menu with jQuery | jQuery Plugins カーソルを合わせた際に背景画像をアニメーションさせるメニュー実装jQueryデモ。 ちょっと説明がわかりづらいのでデモを見てもらうのが早いですが、メニューの背景がアニメーションしながら切り替わります。 更にメニューの背景がブラシで描かれたような形になっていて、全体の背景にも影響せずにアニメーションするところが技ありな感じです。 メニューは四角だという固定概念を取り除いて、よりクリエイティブなメニューを作るときの参考にできそうなテクニックとなっています。 なんとなく出来そうにないと思っていたこともできるようになっていく進化の過程はなかなか面白いですね 関連エントリ Googleスタイルのシンプルなドロップダウンメニュー実装jQueryプラグイン 通知件数表示付きのメニュー実装jQu
オシャレで繋ぎ目のないバックグラウンド画像集:phpspot開発日誌
Free Abstract Backgrounds: Seamless Patterns | CreativeFan オシャレで繋ぎ目のないバックグラウンド画像集 次のようなお洒落な背景画像が多数まとまっていましたのでご紹介です。 ちょっと変えるだけでオシャレなサイトに変わるかもしれません 関連エントリ 背景画像に更にドットパターンを合成して超カッコよくできるjQueryプラグイン「Vegas Background」 CSS3な背景パターンのギャラリーサイト「CSS3 Patterns Gallery」 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」
Youtube動画を透過(opacity)できるjQueryプラグイン・YTPLAYER
あまり見かけないタイプのライブラリだった のでメモ。Youtubeの動画を透過させる事 が出来るjQueryプラグインです。インター フェースもクールにされて全画面に配置した りオート再生させたりも可能でIE6や7でも 一応は動作してくれます。 僕はちょっと知らないんですけど、Youtubeって普通は透過出来ない、で合ってますよね？普通に出来るならちょっと恥ずかしい記事ですけどｗ 透過だけでなく、オート&リピート再生、ミュート設定も出来て、見た目もスッキリさせてくれています。以前はYoutube動画を背景にするjQueryプラグインをご紹介しましたが、今回は透過が出来るプラグイン。いろいろ出来るんですね・・ CPUの問題は否めないとして、これはちょっと素敵なので覚えておきたいです。透過のみに関してはIE6や7にも対応していますが、Operaは透過出来ませんでした。バージョンにもよるんですか
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」:phpspot開発日誌
背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 2011年04月25日- jQuery Backstretch by Scott Robbin 背景画像を自動リサイズしてうまくフィットさせられるjQueryプラグイン「Backstretch」 大きな写真等を背景にしていると、ブラウザ幅によって折り返されたりしてかっこ悪くなってしまいますが、このプラグインを使えばブラウザ幅に応じて自動伸縮してくれます。 使い方はプラグインを読み込んだ後、次のように１行書くだけで実装できます。 <script type="text/javascript"> $.backstretch("http://farm3.static.flickr.com/2443/3843020508_5325eaf761.jpg"); </script> 背景に大きな画像を指定し
自動でリピート再生するYoutube動画を背景全体に指定出来るjQueryプラグイン・jquery-tubular - かちびと.net
Webサイトの背景をリピート再生するYoutube の動画にしてしまおう、というjQueryプラグイン ・jquery-tubularのご紹介です。なかなか斬新 では無いかなと思います。ユニークなサイトを 作る際に参考にしたいですね。導入も極めて 簡単なのでぜひチャレンジしてみてください。 jQuery使うといろいろ出来るんですねぇ。スキルの低い僕にとっては、こうしてソースを提供してくれるのがとてもありがたいです。ライセンスはMITとのことですので、商用でもOKですね。 [note]かなり適当ですけどWordPressのテーマにしたのでご興味有りましたら遊んでみてください。[/note] このように背景全体にYoutubeの動画を使うことが出来るプラグインです。ユニークでインパクトもありますね。導入も非常に簡単です。 サンプル作った 面白かったので暇を見て適当にデモサイトを作ってみました。
ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン:phpspot開発日誌
ブロック要素の背景だけアニメーションさせて注意をひけるjQueryプラグイン。 ブロック要素があって、背景だけをアニメーションさせるという効果を簡単に作成できるようです。 要素中のテキストは動かないので、ページ全体のブロック要素の背景をパッとアニメーションで切り替えるのも面白い効果が得られるかもしれませんね。 ちょっと分かりづらいと思うのでデモを見てください。 関連エントリ 伸縮する全画面背景を設定できるjQueryプラグイン「Supersized」 ブロック内の背景画像をスクロールアニメーションするjQueryサンプルプログラム 背景画像をクールにかえつつナビゲーションを行うjQueryでのメニュー実装例
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
