Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】姫のお辞儀【backgroundプロパティアニメーション】

 

 どうも!LSSです!!

 

わざわざお姫様の画像を描いてまで作ったネタ、

little-strange.hatenablog.com

お姫様の画像にしたのは、「高貴な身分の方の、ちょっとかがんだお辞儀」のような動きになるかな?と思ったからですが、出来上がった動きが「やはりどう見てもスクワット」でしたw

 

画像の作り方によっても違ってくるのかもですが、コードのほうでなんとかもう少し「お辞儀」らしくならないかな?と考えてみました。

 

 

姫のお辞儀

 
 
 

 

 

延々とお辞儀を繰り返す、腰の低いお姫様です^^

 

 

コード

<style>
@keyframes ozga{
0%,30%{height:200px;}
90%,100%{height:100px;}
}
@keyframes ozgb{
0%,30%{top:0px;}
90%,100%{top:100px;}
}
.ozg{
position:relative;
width:280px;
height:400px;
}
.ozg div{
position:relative;
width:100%;
left:0;
background-image:url('画像ファイルのURL');
animation:1.5s infinite alternate;
}
.ozg div:nth-child(1){
background-size:100% 400%;
height:100px;
background-position:0 0;
animation-name:ozgb;
}
.ozg div:nth-child(2){
background-size:100% 200%;
background-position:0 50%;
animation-name:ozga,ozgb;
}
.ozg div:nth-child(3){
background-size:100% 400%;
height:100px;
background-position:0 100%;
animation-name:ozgb;
}
</style>
<div class="ozg">
<div> </div>
<div> </div>
<div> </div>
</div>

 

画像ファイルのURLの箇所は使用したい画像ファイルのURLに差し替えてください。

横280ピクセル、縦400ピクセルのサイズで表示されます。

 

 

マウスホバーで「ごきげんよう

 
 
 

 

 

こちらは、マウスカーソルをのせると、お辞儀を返してくれます^^

 

 

コード

<style>
.ozg2{
position:relative;
width:280px;
height:400px;
}
.ozg2 div{
position:relative;
width:100%;
left:0;
background-image:url('画像ファイルのURL');
top:0;
transition:2s;
}
.ozg2:hover div{
top:100px;
}
.ozg2 div:nth-child(1){
background-size:100% 400%;
height:100px;
background-position:0 0;
}
.ozg2 div:nth-child(2){
background-size:100% 200%;
background-position:0 50%;
height:200px;
}
.ozg2:hover div:nth-child(2){
height:100px;
}
.ozg2 div:nth-child(3){
background-size:100% 400%;
height:100px;
background-position:0 100%;
}
</style>
<div class="ozg2">
<div> </div>
<div> </div>
<div> </div>
</div>

 

こちらも、画像ファイルのURLの箇所は使用したい画像ファイルのURLに差し替えてください。

 

transition:2s;の数値を大きくすると、ゆったりした動きになります。

 

 

ざっくり解説

 
 
 

 

まず、280x400の枠(黒線)を用意しています。

その中に3つの枠を入れ、それぞれ高さを100px200px100pxに設定。

中の3つの枠は「position:relative;」と「top:0;」を指定しているため、縦に隙間なく並んだ状態となります。

 

中央の「高さ200pxの枠」だけを、アニメーションまたはホバーで「高さ100px」に変更すると同時に、3つの枠の表示位置を「top:100px;」(100px下にずらす)という動きを行う事で、あたかも「下詰め」であるかのように動作しているんですね。

(一番下の枠については、中央の枠が縮んだ事によって上に移動してしまうところを、下に移動を指定する事で縦位置を相殺しています。)

 

ちなみに、前回の「スクワット」の時は「上下2分割して、下半分を伸縮」させていたので、今回のは「分割を増やして中央だけを伸縮」に変えた、という事になります。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^