*

背景に画像をフルスクリーンさせる方法。 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

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

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

記事を読む

“html”このタグの中になんのタグを入れれるんだっけ?

今回は、このタグの中になんのタグを入れれるんだっけ? という記事を見つけたので、ご紹介したいと思い

記事を読む

no image

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

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

記事を読む

-jQuery-チェックをつけないとボタンが押せなくする方法

今回は、チェックボックスにチェックをつけないとボタンを押せないようにする方法を作成してみました。

記事を読む

-jQuery-送信ボタン1度しか押せないようにする方法

今回は、ボタンを一度クリックしたら、押せないようにする方法をしてみました。 問い合わせ

記事を読む

no image

メニューをプルダウンする方法。globalNaviを使用。

今回は、メニューをプルダウンさせる方法について調べてみました。 メニューをたくさんあると、

記事を読む

no image

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

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

記事を読む

no image

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

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

記事を読む

no image

テキストがアコーディオンのように開く。

今回は、テキストをアコーディオンのように開く方法について調べてみました。 ページが読み込まれた

記事を読む

no image

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

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

記事を読む

Message

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

PAGE TOP ↑