*

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

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

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


関連記事

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

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

記事を読む

no image

htmlの書き方について。

ホームページを作成するのには、flashを除けばほとんどhtmlで書きます。 ホームページがた

記事を読む

no image

テキストの縦位置を設定する。line-height:を使用する。

今回は、テキストの間隔について書きたいと思います。 テキストを書くときテキストの縦位置が気にな

記事を読む

no image

マウスオーバーした時に画像を半透明にする。”opacity”を使用する。

今回は、マウスオーバーをした際に半透明にするという事を調べてみました。 マウスオーバーをし

記事を読む

no image

jqueryを使って画像を回転させる。jQueryRotateを使用

今回は、画像を回転させるという事をやってみました。 調べてみたところ、jqueryを使って簡単

記事を読む

no image

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

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

記事を読む

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

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

記事を読む

-jQuery-メールアドレス入力確認付メールフォーム

今回は、jQueryを使ってメールフォーム(メールアドレス入力確認付)を作成してみました。

記事を読む

no image

背景画像をjqueryを使用して、フルスクリーンで動かす方法。backgroundPositionを使用。

今回は、背景画像をjqueryを使って、動かすという事をしてみました。 背景画像はアメニーショ

記事を読む

no image

本日からblogを書きます。

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

記事を読む

Message

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

PAGE TOP ↑