背景にひと手間加えたい時に便利なスクリプト 10+ - NxWorld
ウィンドウいっぱいの背景に画像や動画を配置したり、ランダムなパーティクルやラインを表示させるなど、主に背景周りで使えそうものや「この領域に何かもうひと手間加えたい...」というときに便利そうだと思うスクリプトを幾つかまとめてみました。 jQueryプラグインが多めですが単体で動かすことができるものもあり、実装方法などに関しても容易にできるものが多いと思います。 背景に画像や動画のスライドショーを実装できる「Vegas」 背景にブラウザいっぱいのスライドショーを実装することができるjQueryプラグインで、画像だけでなく動画を埋め込むこともできます。 また、オプションを変更することでスライドの動きにアニメーションを付けたり、用意されているパターンをオーバーレイで表示させたりすることもできます。
背景素材に困った時に！コンテンツをしっかり見せる49種類の背景画像の無料フリー素材 -Hue
PhotoshopやSketchをはじめ、PowerPointなどのさまざまなソフトウェアで、そのまま簡単に利用できる繊細で美しいグラデーションの背景素材を紹介します。 下はごく一部ですが、めちゃくちゃかっこよくないですか？ いざという時に備えておくと便利ですね。 Hue: Free Promo Backdrops and Gradients Hueを使ったサンプル Hue 背景素材: 49種類 Hueのダウンロード Hueを使ったサンプル ダウンロード方法の紹介の前に、背景素材を使ったサンプルから。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。
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
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
背景固定で美しいブラーがかかった半透明のパネルだけがスクロールするスタイルシート | コリス
レスポンシブ対応で背景画像は固定表示、美しいブラーがかかった半透明のパネルだけがスクロールするコンテンツを実装するスタイルシートを紹介します。 最低限の要素にしたデモ 実装は、こんな感じになります。 HTML パネルはarticle要素で実装します。中身はテキストでも画像でもフォームでも何でもOK。 <body> <article> <h1>半透明の美しいパネル</h1> <p>洋酒といえば、誰でも最初に思い浮かべるのがウイスキー。いわば洋酒のシンボル的な存在なのだが、英語表記が［一般に〔米〕では Whiskey,〔英〕では Whisky.］であることはあまり知られていない。米英両国では、このスペルの差で自国産と輸入品を区別しているという。わが和製ウイスキーの“Whisky”という英国式表示は、手本にしたスコッチのフォルムに倣ったものであり、それ以上の意味はないようだ。カナ表記にしても、ご
要素の背景画像を伸縮してくれるレスポンシブ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
Subtle Patterns | Free textures for your next web project
These lovely water-colorful dots will make your designs pop...
ノイズのパターン画像をオンラインで生成出来るWebサービス・Noise Texture Generator
土曜日なので軽い話題でもご紹介。 ノイズっぽいテクスチャの背景を よく見かけると思いますが、そう いったパターン画像をオンライン で生成出来るWebサービスです。 地味に便利かも。 パターン画像は重宝しますし、こうしてパパッと作れるので覚えておくとどこかで役に立つかもしれません。 操作もシンプルなので操作すれば分かると思います。ので、使い方は省きます。 画像はData URI schemeで吐き出されます。DLするなりそのまま利用するなりお好みで処理してください。 ガチのクライアントワークでないならこんなんでもいいんじゃないですかね。楽できるところは楽したいです。 Noise Texture Generator
flashで縦横比そのままに全画面表示（as3） | WebDesigner'smemo ウェブデザインの基本をメモってみました
Coding アニメの他にもイメージ重視のサイトで使いたいフラッシュ。 イメージを大きく左右する動画や写真も大きく使いたいですよね。 そこで、そういったフラッシュサイト制作の準備として、その土台を作ってみました。 やりたいことは、ウインドウサイズに従って、背景が伸縮すること。 しかし、ただの伸縮ではなく、写真の使用を想定していて、縦横の比率を保持します。 調べながらなんとかできたサンプルがこちら。 http://masakey.net/samp/fullsakura/sizefull.html ポイントは背景写真の最小サイズで縮小を止める事と、ウインドウの縦横のサイズ比率が、背景写真の比率に比べ、横長か縦長かで場合分けすること。 下記、flaファイルのソースを抜粋します。フッタと見出しのオブジェクトについては省略。 基本、ステージには背景写真のムービークリップ”img”と、フル
背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」:phpspot開発日誌
blur.js 背景画像を全エレメントにブラーをかけつつ摘要できるjQueryプラグイン「blur.js」。 次のように、全体の背景をベースに、ブロックにブラーがかかった背景画像を設定するプラグインです ぼかしのレベルは制御可能です。 数年後、WEBページってどんな感じになってるんだろうって、こういうのを見るといつも思ってわくわくします 関連エントリ 画像ホバー時に２０種類以上の多彩なエフェクトがかけられるjQueryプラグイン「Adipoli」 時間の入力を楽にすることが出来るjQueryプラグイン スライダーとアコーディオンを組み合わせたカッコいいUI作成jQueryプラグイン「Slidorion」
CSS3のみでフルスクリーンの背景画像を実装する方法
指定要素に背景画像が常にある形でフィット - cover - div { background-image:url(画像URL); background-position:center top; background-repeat:no-repeat; -moz-background-size:cover; background-size:cover; } html { ... filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/wp-content/uploads/2011/01/background-photo.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/w
無料で商用利用可能な背景画像を提供する「背景倉庫」
「使用に当たっての制限や、報告の義務などは一切ありません。個人使用・商業目的使用への制限もありません」「かんばって描いたけど、もう自分には使う当てがないかもしれない、よければ誰かに使ってほしい、汎用性の高そうな背景を扱うサイトです」ということで、いろいろな背景画像を提供しているのが「背景倉庫」です。 背景倉庫 http://da-yama.secret.jp/index.html 各種背景画像はZIPファイルとなっており、中に入っている画像は以下の形式になっています。 ・グレースケール ・600dpi ・PSDファイル 各種画像は現時点では以下のような感じになっています。 ◆建物 ◆遠景 ◆乗り物 ◆マンガパーツ なお、「もし、みなさんのなかに、かんばって描いたけど、使うあてがなく、著作権も問わない、だけど汎用性の高いと思われる背景がありましたら、ぜひこのサイトで公開させてください」とのこ
背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」
twitter facebook hatena google pocket 背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。 さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
YouTube人気急上昇
負け盤面からのまさかの！！？【スーパーマリオメーカー２#472】ゆっくり実況プレイ【Super Mario Maker 2】
[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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
背景デザイン_無料テクスチャ素材50枚まとめPhotoshopVIP |
ブラウザサイズに合わせて背景画像などをフィットさせるjQueryフルスクリーンプラグインいろいろ
Create a Full Page Background Image with CSS3