parudou
parudou
parudou
更新日:2018/10/15

ワードプレスで関連記事をスライドショーで表示する方法(CSSアニメーション)

あまり効果的ではないことですが、
「こんなことができる」と知っておくのは良いこと。
CSSのみで作成可能です。

↓これを作る方法を説明します。

作成方法

デザインなどは応用しないといけないので、
基本的な構造だけ説明します。

まずはHTML。

<div class="k-slider">
<div class="k-slider-a">

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

<div class="k-slider-k">
<!--ここに表示したい内容-->
</div>

</div>
</div>

次にCSS。

.k-slider {
width: 600px;
height: 70px;
overflow: hidden;
margin: 2em 0px;
}
.k-slider-k{
width: 600px;
height: 70px;
float: left;
position: relative;
}
.k-slider-a {
width: 500%;
position: relative;
left: 0;
-webkit-animation: ks 20s infinite ease;
animation: ks 20s infinite ease;
}

@media screen and (max-width: 640px) {

.k-slider {
width: 300px;
}
.k-slider-k{
width: 300px;
}
.k-slider-a {
-webkit-animation: ksm 20s infinite ease;
animation: ksm 20s infinite ease;
}

}

@keyframes ks {

0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(-600px);
}
30% {
transform: translateX(-600px);
}
40% {
transform: translateX(-1200px);
}
50% {
transform: translateX(-1200px);
}
60% {
transform: translateX(-1800px);
}
70% {
transform: translateX(-1800px);
}
80% {
transform: translateX(-2400px);
}
90% {
transform: translateX(-2400px);
}
100% {
transform: translateX(0);
}
}


@-webkit-keyframes ks {

0% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(0);
}
20% {
-webkit-transform: translateX(-600px);
}
30% {
-webkit-transform: translateX(-600px);
}
40% {
-webkit-transform: translateX(-1200px);
}
50% {
-webkit-transform: translateX(-1200px);
}
60% {
-webkit-transform: translateX(-1800px);
}
70% {
-webkit-transform: translateX(-1800px);
}
80% {
-webkit-transform: translateX(-2400px);
}
90% {
-webkit-transform: translateX(-2400px);
}
100% {
-webkit-transform: translateX(0);
}
}


@keyframes ksm {

0% {
transform: translateX(0);
}
10% {
transform: translateX(0);
}
20% {
transform: translateX(-300px);
}
30% {
transform: translateX(-300px);
}
40% {
transform: translateX(-600px);
}
50% {
transform: translateX(-600px);
}
60% {
transform: translateX(-900px);
}
70% {
transform: translateX(-900px);
}
80% {
transform: translateX(-1200px);
}
90% {
transform: translateX(-1200px);
}
100% {
transform: translateX(0);
}
}


@-webkit-keyframes ksm {

0% {
-webkit-transform: translateX(0);
}
10% {
-webkit-transform: translateX(0);
}
20% {
-webkit-transform: translateX(-300px);
}
30% {
-webkit-transform: translateX(-300px);
}
40% {
-webkit-transform: translateX(-600px);
}
50% {
-webkit-transform: translateX(-600px);
}
60% {
-webkit-transform: translateX(-900px);
}
70% {
-webkit-transform: translateX(-900px);
}
80% {
-webkit-transform: translateX(-1200px);
}
90% {
-webkit-transform: translateX(-1200px);
}
100% {
-webkit-transform: translateX(0);
}
}

これで動きます。

解説

HTMLの部分は、スライドショーとなるブロックを5つ並べています。
ここは特に難しくない。

CSSは次の2つが重要。

animation: ks 20s infinite ease;
@keyframes ks 

「ks」という名前でアニメーションを指定(好きな名前でOK)。
アニメーション一通りの時間は20秒で、繰り返し回数は無限。
「ease」は加速度合です(デフォルト値なので入れなくても良い)。

「@keyframes ks」で「ks」のアニメーションを指定します。
今回はスライドなので、「translateX(-600px)」と横にずらす指定。
「20%」というのは再生時間の20%の時です。
20秒なら「4秒後に600pxずらす」という指定になる。

スマホ表示用に「ksm」も作っていますが、
表示するデザインによってはこれは不要です。

「-webkit-」は「iOS8以下、Android4.4.4以下」の対応です。

・・・と、簡単すぎる解説ですが、
「こんなことができる」とわかればOKです。
具体的には「CSS アニメーション」などでググってみてください。

是非ご感想・ご指摘等をください。

プロフィール

管理人:parudou
単なるWEBサイト作成マニアです。
底辺法人アフィリエイター。
Twitterはこちら

日記はパルどうSEOブログ

閲覧履歴
履歴なし
カテゴリー
Copyright (c) parudou All Rights Reserved.