• かちびと.net

    JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Sliderのご紹介。JS不要でCSSのみでコンテンツスライダーを実装します。iPhoneやiPadにも使えます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider

スポンサーリンク

使えそうだったので参考にしました。
JavaScriptを使わず、CSSのみで動作
させるレスポンシブWebデザイン対応
のコンテンツスライダーのサンプル
です。軽量化にも繋がりそうですね。

CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。

CSS3 Responsive Slider


ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。

以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。

Sample ※responsivepxで簡単に確認出来ます。

jsfiddle

iPhoneのキャプチャ


ナビゲーションのサイズはモバイルの際は大きくしないとですね。

CSS

まず、スライドの作成。

#slide1:checked ~ #slides .inner { margin-left:0; }
#slide2:checked ~ #slides .inner { margin-left:-100%; }
#slide3:checked ~ #slides .inner { margin-left:-200%; }
#slide4:checked ~ #slides .inner { margin-left:-300%; }

:checked擬似クラスを使ってナビゲーションをクリックした際(radioが:checkedになったら)にボックスを移動させます。増やしたいときは100%加算すれば良いです。

スライドのアニメーションエフェクト

スライドのアニメーションエフェクトはwebkit-transition-timing-functionプロパティを使用します。

#slides .inner {
    -webkit-transform: translateZ(0);
    -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
    -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

いわゆるイージングですね。値でタイミングを指定します。

タイミングはcubic-bezier関数(3次ベジェ曲線)で指定します。→ cubic-bezier(x1, y1, x2, y2)

P1とかP2とかってやつです。値に関しては以下をご参照下さい。

タイミングの指定例)

  • ease / cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear / cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in / cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out / cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out / cubic-bezier(0.42, 0, 0.58, 1.0)

プロパティはiOS 2+に対応していますのでiPhoneやiPadでも動作可能です。

参照:Safari Developer Library Safari CSS Reference: CSS Property Functions
3次ベジェ関数に関する記述はVisual Effects Timing Functionsっていう部分です。

テキストの処理

スライダーの中にあるテキストコンテンツは:nth-child()と:checkedの両擬似クラスで処理します。

#slide1:checked ~ #slides article:nth-child(1) .info,
#slide2:checked ~ #slides article:nth-child(2) .info,
#slide3:checked ~ #slides article:nth-child(3) .info,
#slide4:checked ~ #slides article:nth-child(4) .info {
    opacity: 1;
    -webkit-transition: all 1s ease-out 0.6s;
}

モバイル時にはテキストコンテンツを非表示(opacity: 0 ;)にします。でも、ここはそんなに拘った処理をする必要ない気もしますね・・

Media Queries

その他もろもろ処理をして、レスポンシブWebデザイン用にMedia Queriesを使う、という流れ。

@media only screen and (max-width: 850px) and (min-width: 450px) {
    #slider #controls {
        margin: -25% 0 0 15%;
        width: 70%;
        height: 50px;
    }
    #slider #controls label {
        -moz-transform: scale(0.8);
    }
    #slider #slides {
        padding: 1% 0;
        -webkit-border-radius: 0px;
    }
    #slider #active {
        margin: 22% 0 0;
    }
}

ちょっと大雑把ですけど、こんな形で実装してるみたいです。分かったような分からんようなwもう少し勉強しないとですな・・

動作の検証も不十分ですし暇が出来次第、再チェックしてみます。一応備忘録という事で記事にしておきました。以下で動作確認出来ます。

CSS3 Responsive Slider

URL :
TRB :

Comments & Trackbacks (2)

Ads

Posts

Contact

Services