右から左に流れるスライドショーを使いたいのですが
jQuelyが苦手で、実装しても思い通りにいかず途方に暮れていたところ
CSSで簡単に出来るサイトを2つ見つけたので早速メモしました
jQuelyが苦手で、実装しても思い通りにいかず途方に暮れていたところ
CSSで簡単に出来るサイトを2つ見つけたので早速メモしました
とにかく単純に複数画像をループでスライドさせたいときはオススメです
1つめ
HTML
<div class="wrap">
<div class="sliding"></div>
</div>
CSS
.wrap {
margin: 60px 0;
height: 260px;
overflow: hidden;
}
.sliding {
background: url("slidphoto_03.png") repeat-x;
height: 500px;
width: 3384px;
animation: slide 60s linear infinite;
}
@keyframes slide{
0%{
transform: translate3d(0, 0, 0);
}
100%{
transform: translate3d(-1692px, 0, 0);
}
}
動作
動作
背景画像が動いているように見えるが、実は クラスsliding 全体が動いていて、それを クラスwrap で必要部分だけマウントしてしまう方法です
カスタムのポイント
クラスwrap
画面の表示サイズを設定
クラスsliding
height 背景画像の高さ
Width 背景画像の幅の2倍 ※画像のサイズによってうまく動かないことがあるので注意が必要です
animation 60s を好きな秒数に変える ※画像の幅左から右までの表示スピード
Keyframe 100%{ transform: translate3d(-背景画像の横幅px, 0, 0); } ※背景画像の横幅に"-"を付けて設定
2つめ
HTML
<div class="slider"></div>
CSS
.slider {
width: 100%;
height: 100px;
background: url(img.jpg) repeat-x;
background-position: 0 0;
-webkit-animation: bgslider 20s linear infinite;
animation: bgslider 20s linear infinite;
}
@-webkit-keyframes bgslider {
from {
background-position: 0 0;
}
to {
background-position: -1956px 0;
}
}
@keyframes bgslider {
from {
background-position: 0 0;
}
to {
background-position: -1956px 0;
}
}
動作
こちらはdivの背景を右から左へスライドさせる方法で、このdiv内のレイアウトは背景以外動かない設定になっています
カスタムのポイント
animation 20s を好きな秒数に変える ※画像の幅左から右までの表示スピード
to { background-position: -背景画像の横幅px 0; } ※背景画像の横幅に"-"を付けて設定
注意
-webkit- はSafariで動くようにする為の記述で
Safariで動作確認ができれば この記述も必要なくなります
-webkit- はSafariで動くようにする為の記述で
Safariで動作確認ができれば この記述も必要なくなります
コメント