高機能過ぎるjQueryスライドショー「Camera slideshow」という記事でご紹介したスライドショー「Camera slideshow」をフルスクリーンで背景にする方法をご紹介します。
サンプルを作ってみました。ご覧下さい。
→「Camera slideshow」をフルスクリーンで背景にするサンプル
フルスクリーン用のスタイルを追加してあげる必要がありますが、比較的簡単に導入できると思います。良い感じのフルスクリーンスライドショーになります。どうぞお試し下さい。
Categoryフルスクリーン
メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。
本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。
参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト
このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10）
今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。
サンプルページを作ってみました
→ YouTube動画を簡単に背景にするjQuery「jquery.mb.YTPlayer」サンプル
過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。
背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。
この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。
以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家のサイトの運営が再開されていないようです。
「maxImage Scaling Plugin」と同じように背景に画像をウィンドウズサイズに調節してフルスクリーン表示させることができるのが、このjQueryプラグイン「Backstretch」です。
少し、手を加えることで背景でスライドショーとして画像を流すことも出来ます。
サンプルを３パターン作ってみました。
簡単に設定できるのと、背景画像を最後に表示させることでメインのコンテンツが表示されるまで待つ必要がないのが特徴です。
設定の方法は続きをどうぞ。
→「ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」」の続きを読む
サイトの背景で画像をフルスクリーンで表示させて、かつその画像を自動的にスライドショーとして流したいという時に使えるのがこのjQuery「jmaxImage Scaling Plugin」
jQueryを使用して、好きな画像ををサイトの背景でフルスクリーンで流すことができます。
ということで、サンプル作ってみました。こんな感じになります。
→ 「maxImage Scaling Plugin」サンプルページ
→「背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑