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="http://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サイトの各端末表示確認が出来るサービス「Sizzy」
PHPでTwitterをAPIでツイートする(2016年8月版)
他社サイトのアクセス数などが分かるサービス
サイト内のどのボタンを押したか計測する方法
「ブログを書こう」って言う業者おおすぎ
たった3分で実装出来るJqueryで簡単スマホ用メニュー実装!

人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!



ブログ

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

webの話




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

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

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

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

 

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

 

 

 

それでは実装方法です。

 

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

bgswitcher

 

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

 

<script src="http://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

[ 認証画像を変える ]


関連記事

SEOの時代は終わり?店舗型に向いていると思うweb集客
スマホ投稿にも使えるWYSIWYGエディッタsummernote
「ブログを書こう」って言う業者おおすぎ
KPI・KSF・KGIをすっごく簡単に解説
情報量が多いページから一瞬で知りたい情報を見つける方法
アドワーズ代行詐欺?怪しい営業があったのでgoogleに聞いてみた!


人気記事

CSSの背景画像でスライドショーを実装【jQuery】
分かりやすい地図をデザインする為に押さえておきたい4つのポイント
夏っぽい色のバナーデザイン
市立吹田サッカースタジアム観戦の感想
TBSラジオクラウドの保存方法
(direct) / (none) が急に増えた!

ブログ