動きのあるホームページブログ!!

  • TOP
  • ブログ
  • レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!
20160921blog_img

動くホームページブログ!!

レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法!!

レスポンシブ対応の自動フルスクリーン背景スライドの作成方法のご紹介です。
JQueryのHarperBanner(ハーパーバナー)は自動的に特定の速度で背景画像のリストをフェード応答フルスクリーンスライドショーを作成するための超軽量jQueryプラグインです。背景画像は、自動的にビューポートのサイズに合わせてサイズが変更されます。

それの使い方

背景のスライドショーに必要なHTML構造。

<div class="banner">
  <div class="overlay"></div>
  <ul class="slides">
    <li data-background="1.jpg">
      <div class="holder">
        <h1>Slide 1</h1>
        <h2>This is slide 1</h2>
      </div>
    </li>
    <li data-background="2.jpg">
      <div class="holder">
        <h1>Slide 2</h1>
        <h2>This is slide 2</h2>
      </div>
    </li>
    <li data-background="3.jpg">
      <div class="holder">
        <h1>Slide 3</h1>
        <h2>This is slide 3</h2>
      </div>
    </li>
  </ul>
  <ul class="controls"></ul>
</div>

css

.banner ul.slides { background: rgba(0, 0, 0, 0.5); }

.banner ul.slides li, .banner .overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-color: #464646;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.banner ul.slides li .holder, .banner .overlay .holder {
  margin: 10% auto 0 auto;
  padding: 50px;
  width: 70%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: -1px -1px 0 #d4d4d4, 1px -1px 0 #d4d4d4, -1px 1px 0 #d4d4d4, 1px 1px 0 #d4d4d4, 2px 2px 2px #000000;
  -webkit-border-radius: 34px 20px 20px 20px;
  -moz-border-radius: 34px 20px 20px 20px;
  border-radius: 34px 20px 20px 20px;
  text-align: center;
}

.banner ul.slides li h1, .banner .overlay h1 {
  margin: 0 auto;
  color: #000000;
  font-size: 80px;
  text-align: center;
  text-shadow: -1px -1px 0 #d4d4d4, 1px -1px 0 #d4d4d4, -1px 1px 0 #d4d4d4, 1px 1px 0 #d4d4d4, 2px 2px 2px #000000;
  cursor: default;
}

.banner ul.slides li h2, .banner .overlay h2 {
  margin: 0 auto;
  color: #000000;
  font-size: 30px;
  text-align: center;
  text-shadow: -1px -1px 0 #d4d4d4, 1px -1px 0 #d4d4d4, -1px 1px 0 #d4d4d4, 1px 1px 0 #d4d4d4, 2px 2px 2px #000000;
  cursor: default;
}

.banner ul.controls {
  margin-left: -50px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  list-style: none;
  padding-left: 0;
  text-align: center;
}

.banner ul.controls li {
  margin-right: 20px;
  width: 20px;
  height: 20px;
  background: #000000;
  float: left;
  cursor: pointer;
  box-shadow: -1px -1px 0 #d4d4d4, 1px -1px 0 #d4d4d4, -1px 1px 0 #d4d4d4, 1px 1px 0 #d4d4d4, 2px 2px 2px #000000;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
  -webkit-transition: background 0.2s ease-in-out;
  -moz-transition: background 0.2s ease-in-out;
  -o-transition: background 0.2s ease-in-out;
  transition: background 0.2s ease-in-out;
}

.banner ul.controls li:hover, .banner ul.controls li.hover { background: #4D8CC4; }

.banner ul.controls li:last-child { margin-right: 0; }

.passion {
  font-size: 20px;
  vertical-align: middle;
}

HEAD

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/harper-banner.min.js"></script>

関数を呼び出し

$('.banner').harper();

各背景との間の遅延時間をミリ秒単位で設定

$('.banner').harper({
  duration: 10000
});

 

 

デモサイトの確認とファイルのダウンロードは以下になります。

デモサイトはこちらから確認
ファイル一式ダウンロードはこちら

Img要素で画像を出力するプラグインより、軽量で済むので
ページの負荷軽減したい方にオススメのプラグインです。

今回は以上になります。

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  2. 20160707blog

    動くホームページブログ!!

    ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介!!

    ニコ動やニコ生でよく見られる流れるようなコメントができるNicoScr…

  3. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  4. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!

    JQueryの登場で最近よく見受けられる背景動画を用いたWEBサイト。…

  5. 20160204blog

    動くホームページブログ!!

    WEB上で本をめくるような電子カタログプラグインのご紹介!!

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  6. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法
  2. 20160105_blog24_031

    制作ツールブログ!!

    ワードプレスをローカル環境で構築!!1
  3. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン③
  4. 20160721blog_img1

    WEBデザイン

    WEBデザインには欠かせないフォント特集!!
  5. 20160707blog

    動くホームページブログ!!

    ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介!!