1. TOP
  2. CSS
  3. コピペでCCS 画像をだんだん拡大させるスライド

コピペでCCS 画像をだんだん拡大させるスライド

目次

おはこんばんちわハクロンです。

CSSだけで作る画像をだんだん拡大させるスライドです。
以前紹介したtransformにnth-childで順番をつけ、animation-delayで画像の表示時間ずらすことでスライド効果を持たせています。
また1つめは、@keyframesでscaleを指定することで拡大させてます。

※基本プログラム説明はPC対応までしかしていませんので、スマホだとおかしくなる場合があります。

ソースが長くなるため書いていませんが@keyframesもブラウザによっては @-webkit-keyframes @-moz-keyframes ImgAnime というようにベンダープレフィックスで対応してください。
ベンダープレフィックスの対応はこちら参照

CSSだけで作る拡大していく画像スライド

HTML

<div class="ZoomSlide">
            <div class="SImg">Image 01</div>
            <div class="SImg">Image 02</div>
            <div class="SImg">Image 03</div>
            <div class="SImg">Image 04</div>
</div>


CSS

.ZoomSlide{
width:650px;
height:350px;
z-index: 0;
}


.ZoomSlide .SImg{
    width: 600px;
    height: 350px;
    position: absolute;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: ImgAnime 20s linear infinite 0s;
    -moz-animation: ImgAnime 20s linear infinite 0s;
    -o-animation: ImgAnime 20s linear infinite 0s;
    -ms-animation: ImgAnime 20s linear infinite 0s;
    animation: ImgAnime 20s linear infinite 0s;
}


.ZoomSlide .SImg:nth-child(1) {
background-image: url(..images/IMG01.jpg) }

.ZoomSlide .SImg:nth-child(2){
    background-image: url(..images/IMG02.jpg);
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}
.ZoomSlide .SImg:nth-child(3){
    background-image: url(..images/IMG03.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.ZoomSlide .SImg:nth-child(4){
    background-image: url(..images/IMG04.jpg);
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}

@keyframes ImgAnime { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	10% {
	    opacity: 1;
	    transform: scale(1.05);
	    animation-timing-function: ease-out;
	}
	15% {
	    opacity: 1;
	    transform: scale(1.07);
	}
	20% {
	    opacity: 1;
	    transform: scale(1.1);
	}
	25% {
	    opacity: 0;
	    transform: scale(1.1);
	}
	100% { opacity: 0 }
}




結果はこうなります。




Image 01
Image 02
Image 03
Image 04

スポンサードリンク

CSSだけで作るふわっとなる画像スライド

上で書いたscaleで拡大している部分を消せば普通のふわっとなるスライドになります。

HTML

<div class="ZoomSlide2">
            <div class="SImg2">Image 01</div>
            <div class="SImg2">Image 02</div>
            <div class="SImg2">Image 03</div>
            <div class="SImg2">Image 04</div>
</div>


CSS

.ZoomSlide2{
width:650px;
height:350px;
z-index: 0;
}


.ZoomSlide2 .SImg2{
    width: 600px;
    height: 350px;
    position: absolute;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
  -webkit-backface-visibility: hidden;
    -webkit-animation: ImgAnime2 20s linear infinite 0s;
    -moz-animation: ImgAnime2 20s linear infinite 0s;
    -o-animation: ImgAnime2 20s linear infinite 0s;
    -ms-animation: ImgAnime2 20s linear infinite 0s;
    animation: ImgAnime2 20s linear infinite 0s;
}



.ZoomSlide2 .SImg2:nth-child(1) {
background-image: url(..images/IMG01.jpg) }

.ZoomSlide2 .SImg2:nth-child(2){
    background-image: url(..images/IMG02.jpg);
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}
.ZoomSlide2 .SImg2:nth-child(3){
    background-image: url(..images/IMG03.jpg);
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.ZoomSlide2 .SImg2:nth-child(4){
    background-image: url(..images/IMG04.jpg);
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -o-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}

@keyframes ImgAnime2 { 
	0% {
	    opacity: 0;
	    animation-timing-function: ease-in;
	}
	10% {
	    opacity: 1;
	    animation-timing-function: ease-out;
	}
	15% {
	    opacity: 1;
	}
	20% {
	    opacity: 1;
	}
	25% {
	    opacity: 0;
	}
	100% { opacity: 0 }
}





結果はこうなります。



Image 01
Image 02
Image 03
Image 04




「パソコン」を
yahooで探す     
    
「パソコンバッグ」を


スポンサードリンク


コメントを書き込む

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。

CAPTCHA