ホームページの画面サイズはちょっと前までは、4:3の四角いモニターに対応した横800pxが普通でした。
しかしパソコンの普及にともないワイドサイズ(16:9)の モニターが最近では当たり前になり、800サイズの
ホームページでは物足りなくなってしまいました。
画面サイズを指定しないで、どんなサイズのモニターで見ても画面一杯に表示するフルスクリーンサンプルの紹介です。
どのサンプルもネットで人気のあるものばかりです。トップページは、ホームページの顔ですから
上手に使って、インパクトのある表現で、見る人を引き付ける事も大切ですね。

Full Page Image Gallery with jQuery
サムネールをクリックするとイメージが全画面表示されます。
縦サイズを思い切り使ったJqueryのライブラリーです。大変迫力がありますね。

デモサイトはこちら
Vivid photo
サムネールを画面下部に配置 マウスオーバーで表示されます。
クリックすると画面一杯に画像表示されます。ナビゲーションにもJqueryのプラ
グインが使ってあります。

デモサイトはこちら
Bubbleriffic Image Gallery with jQuery
サムネールが全画面にバブルのマスクをして表示されます。
サムネイルをクリックするとズームしながら画像が表示されます。
ちょっと地味なサムネイルからインパクトのある表現をします

デモサイトはこちら
Animated Content Menu with jQuery
トップバーメニューで選んだ画像が全画面に表示され、画像説明文が開きます。
いち押しの商品など、どぉーんとPRしたい時に効果を発揮します。
追加で、通常ナビゲーションは、ボトムに固定で表示しました。

デモサイトはこちら
Supersized - Full Screen Background Slideshow
フルサイズ画面で定番のスーパーサイズスライドショーにナビゲーションをつけました。
スライドショーのエフェクトにはスライダーもありますが、トップぺーなのでおとなしく
フェードを使用。スライドショーメニュー△を押せばサムネイルが表示されます。

デモサイトはこちら
SIDEWAYS jQuery fullscreen image gallery
このフルスクリーンの動きはすごい!どう使うか迷ってしまうほど。
サイドにもメニューを設定できるので、いろんな使い方が考えられます。
ただChromeで、1枚目の写真がクリックで動かないのが何故?

デモサイトはこちら
Fullscreen Background Image Slideshow with CSS3
これもインパクトのある表現です。特にmenu2〜3についてはズームを使いイメージに
動きをもたせてあります。タイトルもかなりかっこいいですね。
残念なことは、IEではまったく動作しません。

デモサイトはこちら
Fullscreen Gallery with Thumbnail Flip
マウスホイールプラグインとフリッププラグインをうまく組み合わせてあります。
マウスホイールをクルクル回して下さい、なかなか見ごたえのあるフルスクリーンですね。

デモサイトはこちら
FullscreenSlideshowAudio
HTML5になって、新たに<audio>タグが使えるようになりました。音が出るトップページは
考え物ですが、このページはかっこいいですね。
古いブラウザーは、残念ですが動作しません。

デモサイトはこちら
Fullscreen Slit Slider with CSS3
どんな発想からこんなにも面白いページ切り替えが生まれるのだろう?
使い方が難しい反面、うまく使えれば非常に効果の出るページ表現ですね。
これも残念ですが、IEではうまく動作しません。

デモサイトはこちら