*

背景に画像をフルスクリーンさせる方法。 maximageを使用。

公開日: : css3, html5, jquery

今回は、背景画像をフルスクリーンにし、なおかつ、スライダーする方法について、調べてみました。

調べてみて色々とありましたが、
今回は、maxImage Scaling Pluginを使用してみました。

このプラグインは、背景がフルスクリーンでなおかつ、スライダーになっているので、
デザイン重視のサイトに適していると思います。

まずは、こちらを見てください。
デモ01

背景の画像がフルスクリーンでスライダーしています。

画像の切り替えの秒数も変更できるので、秒数を変更するだけでも、だいぶイメージが変わると思います。

以下にソースを記載いたします。
今回の、スタイルシートは
style.css
を使用します。

scriptは、
jquery-1.4.4.min.js
jquery.maximage.js
の2つのファイルを使用します。
以上3つのファイルをhead内に書き込みます。
以下がindex.htmlのファイルです。

index.htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<title>背景に画像をフルスクリーンで表示させる方法。</title>
<meta charset="UTF-8" />

<link rel="stylesheet" media="screen" type="text/css" href="css/style.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="js/jquery.maximage.js" type="text/javascript"></script>

</head>

<body>
<img src="images/01.jpg" alt="" class="bgmaximage" />
<img src="images/02.jpg" alt="" class="bgmaximage" />
<img src="images/03.jpg" alt="" class="bgmaximage" />
<img src="images/04.jpg" alt="" class="bgmaximage" />
<img src="images/05.jpg" alt="" class="bgmaximage" />

<div id="box01" >
背景に画像をフルスクリーンで表示させるスライダーです。<br>このように背景をスライダーさせて、コンテンツを書くことが可能です。<br>また、スライダーの切り替えの秒数も変更できます。
</div>



<script type="text/javascript">
$(function(){
  jQuery('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 5,//画像を切り替えるまでの秒数
    overflow: 'auto',//スクロールバーの表示有無'true=スクロールバー表示''auto=自動''hidden=スクロールバーを隠す'
    verticalAlign:'center',//画像のどこを基準にして表示するか'top=画像の上辺を基準''center=画像のセンターを基準''bottom=画像の下辺を基準'
  });
});
</script>
</body>

</html>

cssファイル(style.css)

body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	font-size:12px;
	width: 100%;
	color:#000000;
}

img.bgmaximage{
	position:fixed !important;
	display:none;
}

#maincontent {
	position: absolute;
	top: 0px;
	left: 0;
	z-index: 50;
	width: 100%;
	height: 100%;
}

#box01 {
	width:1000px;
	margin:100px auto;
	height: 100%;
	background-color:rgba(255,255,255,0.5);
}

これで、
jquery.maximage.jsファイルと画像を指定してあげれば完了です。

参考にしたサイトがありますので、こちらも参考にしてみてください。
背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」

今回使用した、ファイルをUPしときましたので、
よかったら参考にしてください。
ダウンロード

——————————————————————-
補足
index.htmlファイルに記載されている

<script type="text/javascript">
$(function(){
  jQuery('img.bgmaximage').maxImage({
    isBackground: true,
    slideShow: true,
    slideShowTitle: false,
    slideDelay: 5,//画像を切り替えるまでの秒数
    overflow: 'auto',//スクロールバーの表示有無'true=スクロールバー表示''auto=自動''hidden=スクロールバーを隠す'
    verticalAlign:'center',//画像のどこを基準にして表示するか'top=画像の上辺を基準''center=画像のセンターを基準''bottom=画像の下辺を基準'
  });
});
</script>

この部分で秒数などの設定ができます。

この部分を変更するだけで、
色々なバリエーションができて、またイメージを変わると思います。


関連記事

no image

-jQuery-自動で画像のフェードイン・フェードアウトをする方法

今回は、自動で画像を切り替える方法について調べてみました。 (フェイドイン・フェイドアウトのみ)

記事を読む

no image

jquryで問い合わせフォームのデザインを作ってみた。

今回は、jquryで問い合わせフォームを作ってみました。   問い合わせフォー

記事を読む

no image

スクロールしても固定されるコンテンツの作成方法。(“jquery”box-fixed.jsを使用。)

今回は、スクロールしても一部分が固定されるという事をしてみました。 まずは、デモを見てください。

記事を読む

no image

カスタマイズができるスライドショーを設置する方法。diapoを使用。

今回は、スライドショーを設置してみました。 ホームページにスライドショーを設置するのは、当たり

記事を読む

no image

-jQuery-スクロールしたらあとからついてくるコンテンツの作成方法

今回は、スクロールしてもあとからついてくるコンテンツを作成してみました。 スクロールしたら

記事を読む

no image

画像を順番に表示する方法。画像のプリローダー。imgBoxを使用。

今回は、ページ表示後に画像を順番に表示するという事を調べてみました。 ページ表示後に画像が

記事を読む

no image

animationでboxを動かしてみた。

今回は、animationを使って、boxを動かしてみました。 マウスを乗せたときに指定したb

記事を読む

no image

ページトップへスクロールする方法。

今回は、スクロールしたら、top(一番上)にいく方法を調べてみました。 コンテンツが、縦長にな

記事を読む

no image

本日からblogを書きます。

初めまして。   私は、WEB会社に勤めており、ホームページ作成の仕事をしてお

記事を読む

no image

簡単popupの設置方法。Pop Easyを設置してみました。

今回は、ポップアップ(popup)の設置に取り組んでみました。   ポップアッ

記事を読む

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PAGE TOP ↑