はじめに
こんにちは!@70days_jsです。
以前もSliderを作りましたが、今日は自動で画像が切り替わるタイプのものをcssのみで作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は31日目。(2019/11/18)
よろしくお願いします。
サイトURL
やったこと
自動で画像が切り替わるSliderをcsのみで作りました。主に参考欄1に載せてあるサイトの方法を使わせていただきました。↓
html部分は少しだけなので全部載せます。↓
<body><divclass="wrapper"><divid="photo1"class="image"><imgsrc="day31_image/1.jpg"></div><divid="photo2"class="image"><imgsrc="day31_image/2.jpg"></div><divid="photo3"class="image"><imgsrc="day31_image/3.jpg"></div><divid="photo4"class="image"><imgsrc="day31_image/4.jpg"></div><divid="photo5"class="image"><imgsrc="day31_image/5.jpg"></div><divclass="boxDisplay"></div></div></body>
少ないですね。
imgタグをそれぞれdivで囲んで、それをまたdivでwrapしてるだけです。
次にcss部分です。こちらも少しなので全部載せます。↓
.wrapper{position:relative;margin:100pxauto;max-width:600px;overflow:hidden;}.imageimg{position:absolute;top:0;left:100%;width:100%;animation:imgTrans10sinfinite;}#photo1img{animation-delay:0s;}#photo2img{animation-delay:2s;}#photo3img{animation-delay:4s;}#photo4img{animation-delay:6s;}#photo5img{animation-delay:8s;}@keyframesimgTrans{0%{left:0%;opacity:0;}5%{left:0%;opacity:1;}20%{left:0%;opacity:1;}21%{left:0%;opacity:0;}100%{left:0%;opacity:0;}}.boxDisplay{padding:30%;}
お分かりだと思いますが、animationを使って実装しました。
画像は最初left:100%;なのでボックス外にありますね。
delayで2秒ずつの間隔でleft: 0%;にして表示されるようにしています。
ループの境目でうまくつなぎ合わせるために21%でopacityを0にしています。これは今回画像が5枚だからですね。(10s/5枚=2秒)
ついでに言うと、これ1回目と2回目以降のループでは少し動きが違うんですが、分かりづらいので表示順をgifで見てみましょう。↓
すみません、逆に混乱させてしまったかもしれませんね。1回目は実は画像は全て表示されています。2回目からは消える(ように見える)のですが、ここら辺は秘伝のタレ的な感じなのでやりやすい方法は人それぞれかもしれません。
ちなみにソースに戻りますが、最後の.boxDisplayでpaddingを入れている部分も重要です。
.boxDisplay {
padding: 30%;
}
今回表示するもの(コンテンツ)は画像しかなくて、画像のサイズも直接に値を指定しているわけではありません。
なので、ここでpaddingを入れておかないとボックスが潰れて画像が表示されなくなります。
感想
最近cssの勉強が多いのですが、cssはこの先どうなるのだろうか・・・なんてたまに考えます。
flex boxやgridなんか便利だなとは思うんですが、まだどこか痒いところに手が届かないというか、全体で見たら少し煩雑な気がします。
何だろう、できない言い訳かな。勉強しなきゃな。
最後までお読みいただきありがとうございます。明日も投稿しますのでよろしくお願い致します。
参考
- css_animation2 (http://css.programming.jp/pages/slideshow_slide&fade_responsive.html)
- 写真が画面の端から端へ流れる無限ループするアニメーション|chocolat (https://demos.chocolat5.com/loop-image-animation/)
- 無料の写真素材はフリー素材のぱくたそ (https://www.pakutaso.com/)
大変参考にさせていただきました。ありがとうございます。