※現在リダイレクトにて新サイトへ移行中です
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 アニメーション」などでググってみてください。
- cat:ワードプレス
- tag:CSSアニメーション
- top:parudou
是非ご感想・ご指摘等をください。