div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
高機能過ぎるjQueryスライドショー「Camera slideshow」
ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」
シンプルなサムネイル画像つきスライダーjQueryプラグイン「AD Gallery」
ルーレット風なものが作れるjQueryプラグイン「Roulette.js 」
クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
レスポンシブでふわっと表示されるドロップダウンメニューを実装する「Responsive Multi-Level Menu」
超絶簡単にワンページスクロールサイトが作れるjQueryプラグイン『Smint』
クリックするとメニューが上から現れる『Top Drawer – A smooth dropdown menu for responsive web design』
ページの背景に画像をフルスクリーンで表示させ、画像の切り替えも可能なjQueryプラグイン「Backstretch」
今やレスポンシブデザインにするのは当然の選択肢になりました。
YouTubeの動画をウェブサイトに埋め込むこともあると思いますが、動画もレスポンシブで表示させたいですよね。
YouTubeの埋め込み動画を簡単にレスポンシブにしてくれるのが、「SuperEmbed.js」です。
読み込ませておくだけで、動画の幅を画面やウィンドウの大きさに合わせてレスポンシブ化してくれます。
サンプルをご覧ください。
対応している動画は、YouTube, Vimeo, Kickstarter, CollegeHumor, Hulu, Flickr, Vine, VideoPress, DailyMotion, Twitch.tv, Vid.meなど。
jQueryなしで単体で動作します。サイズも1.4 KBだけなのでサイトが重くなることもありません。
メルセデス・ベンツ日本公式サイトでオリジナルアニメが公開されていますね。テレビでもCMに使われていたので、ご存知の方も多いと思います。
本編ムービーが公開されている公式サイトでは背景にテレビCMに使われた動画が流れるインパクトのあるサイトになっています。
参考：NEXT A-Class │ メルセデス・ベンツ日本公式サイト
このサイトを一部再現してみたいと思います。（注意：現在リニューアルされています。2016/10）
今回紹介するこのjQueryのコンポーネントを使用すると、ページの背景としてYouTubeムービーを設定することができます。
サンプルページを作ってみました
過去にも『背景にフルスクリーンで動画を流す「jquery-tubular」』で、背景にYouTube動画を流すことが出来るjQueryを紹介しました。今回の「jquery.mb.YTPlayer」は「jquery-tubular」と違ってHTMLのBODYで要素として設定しています。
背景動画を透過させることが出来たり、ループさせたりと細かな設定が可能です。
この「jquery.mb.YTPlayer」は、ページの背景に動画を流すだけではなく、好きなYouTube動画をサイトで紹介することが出来るクロムレスプレイヤーにもなりますが、今回はページの背景で動画を流す方法を説明したいと思います。
お洒落なホームページにはよく別窓でかっこよく画像を表示するLightBoxが使われています。しかし普通のLightBoxだと画像に限られてしまいます。
ところがこの「mediaboxAdvanced」は、画像だけでなく動画やYouTubeなどの動画サイト・Twitter・facebookなどのソーシャルビデオ、Flashメディア・Google Map・HTMLなど、ほとんどのオンラインメディアに対応して、LightBox風に表示してくれます。
サンプルを用意しました。
では、この「mediaboxAdvanced」の使い方は続きをどうぞ。
→「画像、動画、Googleマップ… あらゆるメディアをLightBox（ライトボックス）風に表示させる「mediaboxAdvanced」」の続きを読む
© 2024 ぱんにゃっとTutorial
Theme by Anders Norén — Up ↑
