どうも！LSSです！！
【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】では、うっかりbackground-positionの%指定のクセを忘れて難儀してしまいました^^;
が、それはそれで面白い動きだったので、その失敗バージョンを元に何か作れないかな？と思いついたのが今回のネタになります。
自動フォトギャラリー
コード
<style>
@keyframes photoboxa{
0%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}
10%{background-size:90% 90%,10% 10%,10% 10%;background-position:100% 100%,0% 50%,0% 100%;}
23%{background-size:90% 90%,10% 10%,10% 10%;background-position:100% 100%,0% 0%,0% 50%;}
33%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 100%,0% 0%,0% 50%;}
43%{background-size:10% 10%,90% 90%,10% 10%;background-position:0% 100%,100% 100%,0% 50%;}
56%{background-size:10% 10%,90% 90%,10% 10%;background-position:0% 50%,100% 100%,0% 0%;}
66%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 50%,0% 100%,0% 0%;}
76%{background-size:10% 10%,10% 10%,90% 90%;background-position:0% 50%,0% 100%,100% 100%;}
89%{background-size:10% 10%,10% 10%,90% 90%;background-position:0% 0%,0% 50%,100% 100%;}
100%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}}
.photobox{
width:300px;height:300px;
background-color:#000000;
background-image:
url(一枚目の画像URL)
,
url(二枚目の画像URL)
,
url(三枚目の画像URL)
;
animation:photoboxa 15s linear infinite;
background-repeat:no-repeat;
}
</style>
<div class="photobox"> </div>
※上記コードをコピペして、赤太字部分を画像URLにそれぞれ置き換えると使用できます。
ただし、ちょっと難点が…
難点その１ 縦横比
このコードでは、写真の縦横比が考慮されておらず、どんな写真でも縦横が同じ長さの「正方形」になってしまいます。
縦横比は枠自体の幅・高さに比例する事になり、コード中でいうと、
width:300px;height:300px;
の部分。ここで枠のサイズを指定しています。
例えば横３：縦２の写真を３枚、この自動フォトギャラリーで使用する場合、
width:300px;height:200px;
のように書き換える事で、横３：縦２の枠に横３：縦２の比率で画像が表示される事になるので、潰れずに済みます^^
難点その２ 汎用性
時間経過ごとの３枚の画像のサイズ・位置をkeyframesで設定しています。
コード中でいうところの、
@keyframes photoboxa{
0%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}
10%{background-size:90% 90%,10% 10%,10% 10%;background-position:100% 100%,0% 50%,0% 100%;}
23%{background-size:90% 90%,10% 10%,10% 10%;background-position:100% 100%,0% 0%,0% 50%;}
33%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 100%,0% 0%,0% 50%;}
43%{background-size:10% 10%,90% 90%,10% 10%;background-position:0% 100%,100% 100%,0% 50%;}
56%{background-size:10% 10%,90% 90%,10% 10%;background-position:0% 50%,100% 100%,0% 0%;}
66%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 50%,0% 100%,0% 0%;}
76%{background-size:10% 10%,10% 10%,90% 90%;background-position:0% 50%,0% 100%,100% 100%;}
89%{background-size:10% 10%,10% 10%,90% 90%;background-position:0% 0%,0% 50%,100% 100%;}
100%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}}
の部分がそれに当たるのですが、では例えば「写真を４枚にしたい・５枚にしたい」と思った場合、この長くてややこしいコードを作り直す事になり…汎用性には難点があると言わざるを得ません^^;
一応、その「ややこしい」keyframesの内容について説明
0%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}
みたいなのが大量に並んでいます。
ちょっと説明のために色分けすると、
0%{background-size:10% 10%,10% 10%,10% 10%;background-position:0% 0%,0% 50%,0% 100%;}
このうち、最初の0%は「アニメーションの経過時間」をあらわしています。
0%という事は「アニメーション時間として指定した時間のうち0%が経過した時点」つまり開始時点の状態をここで指定している事になります。
background-size:10% 10%,10% 10%,10% 10%;
は「３枚の画像それぞれの大きさ」を指定しています。
３枚分の横サイズ・縦サイズを（枠の大きさに対する）%指定で指定したもの…をカンマ区切りで並べています。
10%…はつまり10分の1で、これが「左に小さく並んでいる時の大きさ」となります。
background-position:0% 0%,0% 50%,0% 100%;
は「３枚の画像それぞれの配置位置」を指定しています。
これも横位置・縦位置を指定したものをカンマ区切りで並べています。
この場合、３枚とも横位置は0%（つまり左端）を指定しており、縦位置は 0%（上端） 50%（上下中央） 100%（下端）を指定しているんですね。
こうして指定した３枚の画像のサイズ・位置を、「アニメーション経過時間」ごとに数値を変えたものをたくさん並べているのが、この長ったらしいコードという事になります。
ちなみに「右下に移動して大きくなった状態」は、「サイズが90% 90%、配置位置が100% 100%」となっています。
まぁ…やはりややこしいので、「３枚限定」と思っておいたほうが良いかもですね^^;
もうちょっと扱いやすいフォトギャラリーはこちら↓
【CSS/JavaScript】多角形フォトギャラリー改訂版 - Little Strange Software
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
