Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

Sedori Plan

jQuery

背景の画像をフェードイン・フェードアウトさせるjQuery 「BACKSTRETCH」を使って実装する方法(サンプル付き)

投稿日:

画像を大胆に大きく使ってサイトをカッコよく見せる方法があります。

今回は、web初心者向けにwebサイト上で配布しているスクリプトを使って背景の画像がフェードイン・フェードアウトをするjQueryを実装します。

背景の画像をフェードイン・フェードアウトさせるjQuery 「BACKSTRETCH」を使って実装する方法(サンプル付き)

URLhttp://srobbin.com/jquery-plugins/backstretch/

jQueryを動かすために STEP1

head内にいつもおなじみののコードを書いてください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

ファイルをダウンロード STEP2

ファイルをダウンロード

「Download Backstretch Now」がありますのでクリックしてください。
「jquery.backstretch.min.js」が表示されますので、自分のローカルファイルにコピーしてください。

HTMLに実際に動く記述を書きます STEP3

<script type="text/javascript">
$(function(){
$.backstretch(
	["images/022/01.png",
     "images/022/02.png"], 
	{duration: 3000, fade: 1250}
);
});
</script>

HTMLを設置します STEP4

<body>

<div id="content">
<h1>あいうえお</h1>
<h2>あいうえお</h2>
<h3>あいうえお</h3>
<h4>あいうえお</h4>

<ul>
<li>かきくけこ</li>
<li>かきくけこ</li>
<li>かきくけこ</li>
<li>かきくけこ</li>
</ul>

</div>

</body>

特に気をつけることはありませんが、背景画像の上に背景白ベースで半透明のコンテンツを作りたくて記述しています。

CSSを記述します STEP5

#content {
	width: 880px;
	margin: 0 auto;
	padding: 10px 40px 20px 40px;
	background: #FFF;
	background: rgba(255, 255, 255, 0.85);
}

jquery.backstretch.min.jsのjQueryファイルを付けます STEP6

<script src="js/022/jquery.backstretch.min.js"></script>

STEP1でjQueryのコードの下に追加します。

まとめ

[サンプル] 背景画像をフェードイン・フェードアウトさせる

よくわからなかった人もいるかもしれませんが、背景に画像を置いてコンテンツを作るサイトをちょくちょく見ますのでぜひ試してみてください。

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.