背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
jQueryでIE8でCSSの「background-size:cover」プロパティを擬似的に再現する実験｜BLACKFLAG
CSSでエリアの幅や高さに合わせて背景画像をフィットさせることができる「background-size:cover」。 とても便利なプロパティなのですがIE8以下のIEブラウザには対応していません。 IE8以下で「background-size:cover」を実装させるjQueryプラグインもいくつかありますが 実際に使ってみた際に理想通りに動作しないこともあったので jQueryを使ってIE8以下で「background-size:cover」を実現させる方法を 実験的に試してみたサンプルをご紹介してみます。 まずは動作サンプルから。 ※IE8以下のブラウザと見比べてご確認ください。 「jQueryでIE8でCSSの「background-size:cover」を擬似的に再現する方法」サンプルを別枠で表示 サンプル画面内に設置した画像表示エリアには背景画像を敷き、 「background
要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌
Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。 ブラウザサイズによってはせっかくカッコよく設定した背景画像が台無しになることがこれまでもありましたが、このプラグインでもうそういったことはなくなりそう。 デモページ 関連エントリ レスポンシブ対応のサイト構造作成用の軽量CSSフレームワーク「Layers CSS」 レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 クロス環境で動作するレスポンシブスライダー実装jQueryプラグイン「FerroSlider」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carou
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
[JS]背景画像やスライドショーをブラウザいっぱいに表示するスクリプト -Vegas
写真画像をブラウザいっぱいに表示し、ウェブページにフル表示の背景画像やスライドショーを設置するjQueryのプラグインを紹介します。 ドットベースのオーバーレイ用の画像が数多く用意されているので、画像にスタイリッシュなエフェクトを加えることも簡単にできます。 デモページ サムネイルをクリックすると、写真画像が変更されます。 Vegasの実装 外部スクリプト 「jquery.js」と当スクリプトを外部ファイルとして指定します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="/vegas/jquery.vegas.js"></script> スタイルシート スタイルシートもあらかじめ用意されており、外部ファイルとして指定します。 <link rel="st
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブラウザサイズに合わせて背景画像などをフィットさせるjQueryフルスクリーンプラグインいろいろ