どうも！LSSです！！
今回は、先日の記事、
の改変で、「左右に とことこ歩きまわる」ように見えるサンプルに挑戦してみました。
事の発端
冒頭に書いた、以前の記事
を見て、だるころ9216さん(id:darucoro9216kun)が予想外のアレンジをしてくださいました！
↑の記事の終盤、「歩くスナフキン」です！
なるほど、「はためく」で揺れる様子を歩いているように見立てて、マーキータグで左右移動しているようです。
こりゃすごい！！と感激し、コメント欄に
「もうちょっと工夫すると、右端で画像反転もできそう^^」
と書いてきたのですが、さてその「もうちょっと工夫」が、やってみると結構難航しました^^;
さらに作ってる途中で別バージョンも思いついてしまい、そっちもやろうとすると更に難しい壁があったり…。
が、なんとか２パターンできましたので、お披露目してみます！！
とことこ歩く
コード
<style><!--
@keyframes asbm{
0%{transform:perspective(250px) rotateY(-10deg) rotateX(15deg);}
100%{transform:perspective(250px) rotateY(10deg) rotateX(-15deg);}
}
@keyframes wlk{
0%{left:0px;transform:rotateY(0deg);}
50%{left:calc(100% - 150px);transform:rotateY(0deg);}
51%{left:calc(100% - 150px);transform:rotateY(180deg);}
100%{left:0px;transform:rotateY(180deg);}
}
.waku0{
display:inline-block;
position: relative;
width: 150px;
height: 200px;
animation: wlk 10s linear 0s infinite normal;
}
.waku1{
display:inline-block;
position:absolute;
transform-origin: 0% 50% 0px;
animation:asbm 0.8s linear 0s infinite alternate;
}
--></style>
<div class="waku0">
<div class="waku1">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200826/20200826212945.png" alt="f:id:little_strange:20200826212945p:plain" title="f:id:little_strange:20200826212945p:plain" class="hatena-fotolife" itemprop="image" />
</div>
</div>
注意点
オレンジ色の部分は「幅150ピクセル・高さ200ピクセルで作った画像を、はてなブログの機能でアップロード・貼り付けした時に生成されるタグ」です。
コピぺ利用の際は画像を別途用意して、オレンジ色の部分は置き換えてください。
別バージョン
コード
<style><!--
@keyframes asbm0{
0%{transform:perspective(250px) rotateY(-10deg) rotateX(15deg);}
100%{transform:perspective(250px) rotateY(10deg) rotateX(-15deg);}
}
@keyframes wlkg{
0%{transform:perspective(1000px) rotateY(0deg);}
100%{transform:perspective(1000px) rotateY(360deg);}
}
@keyframes hntn0{
0%{transform:rotateY(0deg);}
25%{transform:rotateY(0deg);}
26%{transform:rotateY(180deg);}
75%{transform:rotateY(180deg);}
76%{transform:rotateY(0deg);}
100%{transform:rotateY(0deg);}
}
@keyframes hntn1{
0%{transform:rotateY(180deg);}
25%{transform:rotateY(180deg);}
26%{transform:rotateY(0deg);}
75%{transform:rotateY(0deg);}
76%{transform:rotateY(180deg);}
100%{transform:rotateY(180deg);}
}
.wakua{
position: relative;
height: 200px;
animation: wlkg 15s linear 0s infinite normal;
}
.wakub{
width:150px;
height:200px;
transform-origin: 0% 50% 0px;
animation:asbm0 0.8s linear 0s infinite alternate;
}
.wakuc0{
position:absolute;
backface-visibility:hidden;
animation:hntn0 15s linear 0s infinite normal;
}
.wakuc1{
position:absolute;
backface-visibility:hidden;
animation:hntn1 15s linear 0s infinite normal;
}
--></style>
<div class="wakua">
<div class="wakub">
<div class="wakuc0">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200826/20200826003835.png" alt="f:id:little_strange:20200826003835p:plain" title="f:id:little_strange:20200826003835p:plain" class="hatena-fotolife" itemprop="image" />
</div>
<div class="wakuc1">
<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20200826/20200826005506.png" alt="f:id:little_strange:20200826005506p:plain" title="f:id:little_strange:20200826005506p:plain" class="hatena-fotolife" itemprop="image" />
</div>
</div>
</div>
つまづきの記録
何が難航したかというと、
「画像を左右反転させるには transform を使う事になるけど、そもそも足踏みに既にtransformを使っている」
という点^^;。
同一の要素に対して、transform:rotateY(角度); を当てると、片方が無効になるんですね。
…当たり前の話ですが^^;
解決策として使えたのは「要素を二重にする（<div>タグを二重にする）」事で、内側の<div>に足踏みのアニメを、外側の<div>に左右移動と反転のアニメを当てる事で解決しました^^
左右移動の方法として、１つめのパターンでは left の値を変化させる事で表現していますが、その前にそちらも rotateY を使う案があり、それを試していた時に「別バージョン」を思いついたのです。
（でもそれをすると、足踏み・左右移動・反転と３重に rotateY を使う事になるので、１つめパターンでは没にしました。）
没にしたrotateYによる左右移動案でしたが、それはそれで動きが面白く、また、
でやったような「表裏貼り合わせ」を使うのが妥当そうで、それを実現させたかったのですが…最終的に「左右移動」と「表裏入れ替え」を別々のアニメーションで設定する、という力技に頼ってしまいました^^;;;
（タイミングが合ってるからいいか…という妥協。足踏みを挟むのがやはりネック。）
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
