背景の画像をフェードイン・フェードアウトさせる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のコードの下に追加します。

まとめ

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

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

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

4 件のコメント

  • はじめまして。
    jQuery超初心者ですが、こちらで紹介されている内容が、やりたいことと近いため、参考にさせていただきたいと思っております。

    そこで一つおうかがいしたいのですが、
    背景画像をループさせず、最後の画像で停止させるにはどのようにしたらよいでしょうか?

    ご回答よろしくお願いいたします。

  • はじめまして!
    java自体かなり初心者です!
    上記のプログラムを打っても、なぜか日付がでてきます;
    どうしたらいいか教えてください!

    • キオカさん、はじめまして。

      日付の箇所はないのですがソースを見せていただければ何か回答が出来ます。

  • コメントを残す

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

    *