CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
CSSだけで動く「ズームインとズームアウトをフェードしながら交互に繰り返すCSSスライダー」です。
エンジニア速報は Twitter の@commteで配信しています。
作成したデモはこちら。交互にズームインとズームアウトを繰り返し表示しています。CSSでみたい人は「VIEW COMPILED」を押してください。
2019/01/29 追記:IEでカクつく場合は、以下をliに追加するか、@keyframesにwidth幅をpxで指定してください。
transform: rotate(0.0001deg);
参考にさせていただいたのは、cssだけで作るスライダー – PeonyQueenで作成されているスライダー。
上記のスライダーがとてもよく出来ていてCSSのアニメーションで時間差をつけてスライドを切り替え、フェードインを繰り返すようになっています。CSSなので読み込みや動作も早く扱いやすいです。
こちらを参考に、htmlのimg記述をなくし、フェードインとフェードアウトを繰り返すようにカスタマイズさせていただきました。
5枚の画像を切替えるバージョンです。htmlの記述はこれだけ。
html
<div class="slider_css"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
SCSS
@mixin bp { @media only screen and (max-width: 768px) { @content; } } .slider_css { height: 550px; margin: 0 auto; position: relative; overflow: hidden; ul { margin: 0; padding: 0; list-style: none; li { background-size: cover; width: 100%; height: 550px; position: absolute; top: 0; left: 0; animation-iteration-count: infinite; animation-duration: 40s; @for $value from 1 through 5 { &:nth-child(#{$value}) { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg"); @if $value % 2 == 0 { //偶数 animation-name: slider-zoomout; } @else { //奇数 animation-name: slider-zoomin; } @if $value != 1 { //最初以外は透過 opacity: 0; } animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する } } img { width: 130%; } } } @include bp { height: 400px; ul { li { background-size: contain; background-repeat: no-repeat; } } } } // 5~8秒の間だけ透過解除 @keyframes slider-zoomin { 0% { opacity: 0; transform: scale(1.0); } 12.5% { opacity: 1; } 20% { opacity: 1; } 27.5% { opacity: 0; } 100% { opacity: 0; transform: scale(1.3); } } @keyframes slider-zoomout { 0% { opacity: 0; transform: scale(1.3); } 12.5% { opacity: 1; } 20% { opacity: 1; } 27.5% { opacity: 0; } 100% { opacity: 0; transform: scale(1.0); } }
画像はCSS背景に設定し、偶数と奇数の画像によって、ズームインとズームアウトのアニメーションを割り当てます。
ズームインだけ適用したい場合は、animation-nameの箇所を、どちらもslider-zoominにしてください。ズームアウトの場合はslider-zoomoutですね。
1枚8秒(5枚の画像×8秒)で計算するので、アニメーション周期(animation-duration)は40秒で設定します。
1枚目以外は透過させ、表示から開始させるので-3秒からスタートし8秒づつ加算してアニメーション開始時間をずらします(animation-delay)。
◯枚目 | 1 | 2 | 3 | 4 | 5 | 6 |
---|---|---|---|---|---|---|
開始時間 | -3 | 5 | 13 | 21 | 29 | 37 |
※1枚目は-3秒から開始し、2枚目は8秒後の5秒から開始するという意味。
アニメーションは40秒間のうち5~8秒の間だけ透過解除したいので12.5%(5×100/40=12.5)と20%(8×100/40=20)にopacity:1を設定。秒数をdurationで割ります。
分かりにくいので表を作りました。以下の表だと、5枚の時は12.5~20%、4枚の時は15.63~25%にopacity:1を指定すればよいということになります。
1枚8秒で設定した時の計算表
枚数 | duration | 5秒 | 8秒 |
---|---|---|---|
3 | 24s | 20.83% | 33.33% |
4 | 32s | 15.63% | 25.00% |
5 | 40s | 12.50% | 20.00% |
6 | 48s | 10.42% | 16.67% |
※アニメーション周期や画像枚数を変更する場合は、このあたりを再計算する必要が出てきますが、仕組みが分かれば比較的使いやすいのではないでしょうか。以上、軽量・高速・簡単記述のCSSスライダーでした。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- デベロッパーにおすすめのATOM開発系ダークテーマ
- CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
- それとなく今風にできる、グローバルナビゲーションのコード集
Leave a Comment