CSSの背景画像でスライドショーを実装する【jQuery】[webの話] | おむすび

CSSの背景画像でスライドショーを実装する【jQuery】[webの話] | おむすび

CSSの背景画像でスライドショーを実装する【jQuery】

webの話

どうもおむすび17号です。

今回はCSSの背景画像スライドショーの実装を簡単に紹介。

簡単に実装出来るのでやってみてください。

 

まずCSS背景画像のスライドショーのメリットから

 

 

その1 背景画像なので上オブジェクトを置くのが容易

 

CSSの背景画像なので何を置いてもどことも干渉せず簡単にオブジェクトを配置出来ます。ずっと文字が出っぱなし〜とかも出来ますし、例えば違うスライドショーを上に設置して文字は文字でスライドショーを行う事だって可能です。

 

 

その2 背景画像を描画領域を決める事が出来る

 

例えば高さを300pxで幅100%にしたとしてブラウザサイズを広げていけば通常のライドショーなら両端に余白が出現します。しかしCSS背景ならではの「background-size」を利用して縦横比は保持して、背景領域を完全に覆う事が可能です。レスポンシブサイトにも向いています。

 

 

その3 工夫次第でスライドショーバナーなどにもなる

 

クライアントに対して動きの要望や、おっと言わせる対応など工夫さえすれば、様々な事に応用出来ます。

 

 

 

それでは実装方法です。

 

下記よりJSをダウンロードしてください。

bgswitcher

 

JSは下記のように記述します。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bgswitcher.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.slider').bgSwitcher({
        images: ['xxx.jpg', 'xxx.jpg', 'xxx.jpg'],
        interval: 5000,
        effect: "fade"
    });
});
</script>

 

CSSは下記のように記述します。

 

/* SLIDER */

.slider {
    height: 340px;
    width: 100%;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 45px;
}

.slider {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}

*+html .slider {
    background-position: center top;
    background-repeat: repeat-x;
}

 

現在は高さ340pxにしています。

背景サイズもcoverになっていますのでブラウザサイズを伸ばしていくと背景画像は拡大していきます。

 

HTMLはシンプルにこれだけ

 

<div class="slider"></div>

 

とてもシンプルで簡単に実装出来ます。

使い方によっては様々な事に応用出来るので是非使ってみてください!

 

ではでは

 

 

 



大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。


更新日:2016-08-23

コメントを投稿する
投稿名
コメント内容
画像認証 CAPTCHA Image
[ 認証画像を変える ]

関連記事

たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!
SEOはシンプルに考えるべき!絶対外せない重要な事3つ!
PHPでTwitterをAPIでツイートする(2016年8月版)
CSS Nite in OSAKA In-house SEO Meetup 参加予定
スマホ投稿にも使えるWYSIWYGエディッタsummernote
情報量が多いページから一瞬で知りたい情報を見つける方法

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの



ブログ

CSSの背景画像でスライドショーを実装する【jQuery】

webの話

どうもおむすび17号です。

今回はCSSの背景画像スライドショーの実装を簡単に紹介。

簡単に実装出来るのでやってみてください。

 

まずCSS背景画像のスライドショーのメリットから

 

 

その1 背景画像なので上オブジェクトを置くのが容易

 

CSSの背景画像なので何を置いてもどことも干渉せず簡単にオブジェクトを配置出来ます。ずっと文字が出っぱなし〜とかも出来ますし、例えば違うスライドショーを上に設置して文字は文字でスライドショーを行う事だって可能です。

 

 

その2 背景画像を描画領域を決める事が出来る

 

例えば高さを300pxで幅100%にしたとしてブラウザサイズを広げていけば通常のライドショーなら両端に余白が出現します。しかしCSS背景ならではの「background-size」を利用して縦横比は保持して、背景領域を完全に覆う事が可能です。レスポンシブサイトにも向いています。

 

 

その3 工夫次第でスライドショーバナーなどにもなる

 

クライアントに対して動きの要望や、おっと言わせる対応など工夫さえすれば、様々な事に応用出来ます。

 

 

 

それでは実装方法です。

 

下記よりJSをダウンロードしてください。

bgswitcher

 

JSは下記のように記述します。

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bgswitcher.js" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function($) {
    $('.slider').bgSwitcher({
        images: ['xxx.jpg', 'xxx.jpg', 'xxx.jpg'],
        interval: 5000,
        effect: "fade"
    });
});
</script>

 

CSSは下記のように記述します。

 

/* SLIDER */

.slider {
    height: 340px;
    width: 100%;
    background-color: #FFF;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-bottom: 45px;
}

.slider {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}

*+html .slider {
    background-position: center top;
    background-repeat: repeat-x;
}

 

現在は高さ340pxにしています。

背景サイズもcoverになっていますのでブラウザサイズを伸ばしていくと背景画像は拡大していきます。

 

HTMLはシンプルにこれだけ

 

<div class="slider"></div>

 

とてもシンプルで簡単に実装出来ます。

使い方によっては様々な事に応用出来るので是非使ってみてください!

 

ではでは

 

 

 



大卒後めでたくIT大手起業に就職するも業績不振により半年で解雇。 24歳でIT会社を起業するも失敗。その後おとなしく制作会社で5年働き18号を巻き込んでおむすびを始めました。利用する人が少しでも幸せになるwebサービスを生み出していきます。


更新日:2016-08-23
コメントを投稿する
投稿名
コメント
内容
画像認証 CAPTCHA Image

[ 認証画像を変える ]


関連記事

アドワーズの仕様変更でキーワードプランナーが悲しいことに…
作業時間3分!WEBクリップアイコンを実装だ!
アナリティクスを登録する際に絶対しておきたい3つのこと
あなたのアナリティクス 正確なデータとれていないかも
AJAXで簡単にドラッグ&ドロップで順番を変更する方法
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!

人気記事

分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
l.instagram.com / referral ってなんだろう
CSSの背景画像でスライドショーを実装【jQuery】
結婚式の二次会やパーティーで使える◎可愛いスピードビンゴ作りました!
雨の野外フェスで用意しておきたいもの

ブログ