コピペでCCS 画像をだんだん拡大させるスライド
｜
目次
CSSだけで作る画像をだんだん拡大させるスライドです。
以前紹介したtransformにnth-childで順番をつけ、animation-delayで画像の表示時間ずらすことでスライド効果を持たせています。
また１つめは、@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
スポンサードリンク
コメントを書き込む