BigScreenは動画や画像のフルスクリーン表示を手軽に実装できるJavaScriptライブラリです。 HTML5から新しく追加されたAPIとしてフルスクリーンがあります。動画や写真、それ以外のコンテンツにおいても上手に使うとユーザビリティが向上できます。そんなフルスクリーン表示を手軽に実装できるライブラリがBigScreenです。 画像をクリックしました。フルスクリーン表示になりました。 動画のフルスクリーン表示にも対応しています。 サポートするWebブラウザはGoogle Chrome 15以上、Firefox 10以上、Safari 5.1以上となっています。なおSafari 5.0とiOS 4.2以上についてはvideoタグのフルスクリーン表示のみをサポートします。メソッドにはトグルやフルスクリーンがサポートされているかどうか、フルスクリーン表示になった(または終了した)時のコー
BigScreen 画像や動画にフルスクリーンボタンを付けられる「BigScreen」。 画像や動画を単なるズームではなく、フルスクリーンで見れるようにしたいといったニーズがあるとして、このライブラリを使えば簡単にフルスクリーン機能が実現できます。 jQueryに依存していないため、若干クセのある使い方となりますが、自分で1からクロスブラウザで書くのは大変そうなので利用させてもらうと楽かも。 Chrome 15+ 、Firefox 10+ 、Safari 5.1+が対応。 フルスクリーンにするとやっぱり迫力が違いますね 関連エントリ フルスクリーン編集可能なWYSIWYGエディタ実装jQueryプラグイン「Redactor」 コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル
screenfull.js demo コンテンツをフルスクリーン表示にする際に便利なJSライブラリ「screenfull.js」 FullScreen API のクロスブラウザで動作するラッパーライブラリです。 例えば、ページ内に画像や動画があったとしてクリックするとフルスクリーンで楽しめる、的な使い方ができます。 screenfull.request( $('#container')[0] ); のように、screenfull.requrest( element ) でフルスクリーンが開始されます。 フルスクリーン化 フルスクリーンした後のイベントハンドラなんかも設定できるみたい。 関連エントリ フルスクリーン背景がスライドショーになるCSS3サンプル フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプル 1見の価値あり!なフルスクリーンWEBサイトのまとめ
Fullscreen Image Blur Effect with HTML5 | Codrops フルスクリーンでぼかしがカッコいいHTML5ギャラリーを作るサンプルが公開されています。 画像切替の際のぼかしアニメーションがなかなかいい感じです。サンプルをダウンロードできるので写真を置き換えればそれっぽく利用することができそうです FlashかHTML5なんていう話にもなったりしますが、画面のデザインがある程度CSSででき、画像の指定もHTMLでかけちゃうっていうのはデベロッパー側としては嬉しい場面も多そうですね 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 HTML5のブラウザ対応状況がサクッと分かる「HTML5 Please」 HTML5ゲームに使えるローディング表示機能付きプレロード用JSライブラリ「PxLoader」 Flash使って
Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. The images are by Ma
1 pixel|サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 サイバーエージェントでフロントエンドの開発をしております 原(@herablog) です。 スマートフォン版 アメーバピグ新規作成で使用した技術について触れたいと思います。 #ちなみにこの記事ではHTML5を「最新ブラウザ向けのwebアプリケーション作成技術」というかなり広い解釈で使用していますので予めご理解ください。 今までDesktop・Android向けはFlashで作成されていたのですが、今回はiOS, Androidともに対応したいということで、HTML5でできるところまでやってみることにしました。 No Lag作るにあたり
Want to get the most out of Mac OS X native Full Screen app mode? Assign a keyboard shortcut to toggle Full Screen mode with a simple keystroke. This will work to flip in and out of full screen mode of Mac OS in any app that supports the feature, and it only takes a minute or so to setup. Modern versions of MacOS and Mac OS X already have this, but prior versions of Mac OS X can choose whichever k
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く