jQueryを使用しないCSS3フルスクリーンスライドショーCSS3 Fullscreen Slideshow

投稿日:

  • Image 01

    re·lax·a·tion

  • Image 02

    qui·e·tude

  • Image 03

    bal·ance

  • Image 04

    e·qua·nim·i·ty

  • Image 05

    com·po·sure

  • Image 06

    se·ren·i·ty

CSS3 Fullscreen Slideshow

A CSS-only slideshow for background images

http://tympanus.net/codrops/に掲載されている、jQueryを使用しないCSS3フルスクリーンスライドショーのテストページです。

Demo 1 Demo 2 Demo 3 Demo 4

Download sourceをクリックして、CSS3FullscreenSlideshow.zipをダウンロード。

解凍(展開)したCSS3FullscreenSlideshowフォルダをそのまま任意のフォルダにアップロードします。

背景画像のフルスクリーンだけではなく、部分的に表示することも可能です。

.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: -1; 
}

を、次の例のように、positionプロパティをrelativeにして、要素の高さと幅を任意の値にすることで、この記事のように表示することが出来ます。

.cb-slideshow,
.cb-slideshow:after { 
    position: relative;
    width: 590px;
    height: 392px;
    top: 0px;
    left: 0px;
    z-index: -1; 
}

なお、既存のテーマやテンプレートに組み込む場合、z-indexプロパティを適切に設定することが必要な場合があります。