jQuery

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

投稿日:

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

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

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

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

ページコンテンツ

jQueryを動かすために STEP1

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

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

ファイルをダウンロード

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

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

HTMLを設置します STEP4

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

CSSを記述します STEP5

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

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

まとめ

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

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

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

しん

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

-jQuery

© 2024 Sedori Plan