おすすめグッズや役立つ情報ブログ

Sedori Plan

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のコードの下に追加します。

まとめ

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

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.