特定の要素を全画面(フルスクリーン)にするFullscreen API
Updated 2013.10.30 / Published 2013.10.30 HTML5のFullscreen APIは、YouTubeなど動画画面の右下にある全画面表示ボタンを押すと動画部分のみが画面いっぱいに表示されるように、特定の要素を全画面（フルスクリーン）で提供できる機能です。IEもIE11から対応しており、いよいよ本格的に使える環境が整ってきました。 Fullscreen APIの実装状況 IEIE11よりmsのベンダー識別子付きで先攻実装 ChromeChrome15よりwebkitのベンダー識別子付きで先攻実装 FirefoxFirefox10よりmozのベンダー識別子付きで先攻実装 SafariSafari5.1よりwebkitのベンダー識別子付きで先攻実装 OperaOpera12.1よりサポート Opera15よりwebkitのベンダー識別子付きで先攻実装 iO
Webデザインレシピ » Blog Archive » Perfect Full Page Background Image with CSS
CSS のみで画面いっぱいに背景画像 スクリプトを使わずに、CSSのみで画面いっぱいに背景画像を表示しています。 実際の画像のサイズは 800 x 533 ピクセルですが、画面いっぱいに拡大表示されていると思います。 拡大しているので、当然画像はぼやけて表示されますが、元画像のサイズを大きくすれば軽減されます。画像の縦横比は維持されるので、ディスプレイの大きさによって変形する事はありません。 背景画像に position: fixed を指定すると、画像はページの中央に固定表示されるので、コンテンツが縦に長くなって、縦スクロールしても固定されたままになります。 position: absolute を指定すれば、スクロールと共に背景も一緒にスクロールしますが、その場合は画像の下端に注意する必要があります。 動作確認済みブラウザ Firefox 3.6 Safari 5 Chrome 5 O
Perfect Full Page Background Image | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put som
[JS]背景画像をブラウザの枠いっぱいに広げて表示するスクリプト -fullscreenr
背景画像のアスペクト比を維持しつつ、ブラウザの枠いっぱいに広げて表示するスクリプトを紹介します。 デモではオプションで、ドットの画像をオーバーレイさせています。 スクリプトがオフ時の表示 fullscreenrの実装 fullscreenrはjQueryのプラグインのため、実装にはjquery.jsが必要です。 HTML 当スクリプト（jquery.fullscreenr.js）とjquery.jsを外部ファイルとして記述します。 <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.fullscreenr.js" type="text/javascript"></script> JavaScript head内に下記のスクリプトを記述します。 <script
jQueryで背景に動画をフルスクリーンで表示する方法｜BLACKFLAG
海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介してみます。 動画を流す手法はHTML5の＜video＞タグとかも考えましたが 今回は動画再生はFlashで流すパターンにしています。 まずは動作のサンプルから。 下記リンクよりサンプル画面を表示してみてください。（別枠で表示されます） jQueryで背景に動画をフルスクリーンで表示するサンプルを別枠で表示 ※サンプルでの動画ファイルは容量を軽減する為に少々粗いものになっています。 ブラウザ枠をリサイ
HTML5 Videoで全画面（フルスクリーン）動画再生
リッチコンテンツという言葉が以前から存在するように、最近はテキストや画像だけでなく、動画や動画のストリーミング配信を用いたコンテンツが多いですね。 只、一概に言えませんが、動画コンテンツはファイルサイズやトラフィックの問題から、外部サービス（YoutubeやUSTREAM）を使うケースが大半かと思います。 そういった背景もあり、HTML5で追加されたVideo要素にはこれまで注目していませんでした。 （仕様が標準化段階であり、ブラウザ毎に異なる動画形式でファイルを用意する煩雑さも要因の一つ） さて、冒頭からVideo要素のネガティブな面ばかり取り上げましたが、メリットも勿論存在します。 今回はそんなVideo要素を中心にご紹介します。 Video要素とは 既にご存知かと思いますので誤解を恐れず簡単に説明すると、 ブラウザ単体で（Flash PlayerやQuickTimeなどプラグインを必
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - akv2/MaxImage: The first jQuery plugin to use jQuery Cycle plugin as a fullscreen background slideshow.
Aaron Vanderzwan | Full-Stack Wordpress Developer with 17 years experience
http://www.aaronvanderzwan.com/maximage/index.php