のんべえの気まぐれ

日々の出来事やDIY、機械いじりを発信

祝入学!【CSS】パズル来て去る

いつも読んで頂きありがとうございます。

4月に入り入学シーズンを迎え私の次女も専門学校に入学しました。

 

入学式には参加できず

高校の卒業式は保護者も参加出来ましたが専門学校は生徒と保護者を含めた人数分の会

場の確保が出来なかったので保護者の参加はダメになりました。

式後の学校説明や教科書購入も保護者無しで行うことになったので、行かなくてもいい

んじゃね?と思いましたが次女が朝の準備が不安なので来て欲しいと言われたので前日

にアパートに泊まることになりました。入学式当日は同じ高校の子もいるので一緒に行

って入学式式終了後にプリクラを撮って帰ってきましたが、私はその間に次女のアパー

トの部屋の合鍵を作りに行っていました。合鍵については後日記事にします。

 

問題はこれから

無事に入学式も終わりましたが問題はちゃんと学校に行けるかです。起立性調節障害

良くなってはいますが朝起きられるかが心配です。幸い長女が休みを取って泊りに来て

くれるらしいので登校初日は何とかなりそうですが嫁もLINEで起こすと思います。

まあ、頑張ってもらいたいですね。

 

 

 

今回のCSSコード

【CSS小ネタ3種】いろいろ跳ねます。 - Little Strange Softwareの跳ねるボール二次元

版を参考にしていますがコードはちょっと変えています。

今回のは画像を35分割してx軸とy軸で画像が合うように調整しています。

これが結構大変でtwitterでも呟きましたが一つ微調整すると場所にもよりますが全部調

整が必要な時もあるので「やってられね~!」という気持ちになった時もあります。

例としてジグゾーパズルでやってみます。出てくる位置と去る位置が違いますが考え方

は一緒です。

 
CSSコード

<style>
@keyframes kitesaru{
0%{background-position-x:0%;background-position-y:0%;}
30%{background-position-x:35%;background-position-y:50%;}
80%{background-position-x:35%;background-position-y:50%;}
100%{background-position-x:-50%;background-position-y:0%;}
}
.pazuru{
width:300px;
height:200px;
border-radius:15px;
animation:kitesaru 7s linear infinite ;
background-color:#ddffdd;
background-image:url("画像URL");
background-size:70px 70px;
background-repeat:no-repeat;
}
@keyframes kitesaru2{
0%{background-position-x:100%;background-position-y:0%;}
30%{background-position-x:59%;background-position-y:53.8%;}
80%{background-position-x:59%;background-position-y:53.8%;}
100%{background-position-x:-50%;background-position-y:100%;}
}
.pazuru2{
width:300px;
height:200px;
border-radius:15px;
animation:kitesaru2 7s linear infinite ;
background-image:url("画像URL");
background-size:70px 70px;
background-repeat:no-repeat;
}
</style>
<div class="pazuru">
<div class="pazuru2"> </div>
</div>

跳ねるボールとは違い同じタイミングで動かすのでkeyframes内にx軸とy軸を入れても

動くのかなと思いやってみると大丈夫でした。

 

出てくる場所と去っていく場所の設定

0%{background-position-x:○%;background-position-y:○%;}は出てくる場所です。

1番のパズルのbackground-position-x:0%;background-position-y:0%はx軸が0%なの

で左端、y軸は0%なので上からとなります。

2番のパズルはbackground-position-x:100%なので右端から出てきます。

 

100%{background-position-x:-50%;background-position-y:0%;は去っていく場所で

す。出てくる場所と考え方は同じでx軸が-50%なので左端、y軸は0%なので上になりま

す。2番のパズルは下に去っていくようにy軸を100%にしています。

去っていく数値は左に去る場合はx軸はマイナス○○%に、右に去る場合は150%とかに

した方が遠くに去っていく感じになります。

 

止まっている時間の設定

30%{background-position-x:35%;background-position-y:50%;}
80%{background-position-x:35%;background-position-y:50%;}

は止まってる時間です。%の間隔を大きくすると止まってる時間が長くなります。止ま

ってる時間のx軸とy軸の%は同じにしておいてください。

1番のパズルのbackground-position-x:35%;background-position-y:50%はx軸が左か

ら35%、y軸は上から50%の位置となります。

2番のパズルは1番のパズルに合うようにbackground-position-x:59%;background-

position-y:53.8%とx軸は左から59%、y軸は上から53.8%にしています。

このようにx軸とy軸の値を変えることで画像位置の調整ができます。

 

移動のスピードと全体のアニメーションの長さ

止まるまでの移動スピードは0%の次を30%にしていますがこれを10%にすると早く移

動し去る時も同じで100%までの間隔を変えるとスピードが変わります。

例えば100%の前を95%にすると一瞬で去っていきます。

 

animation:kitesaru 7s linear infinite ; 

アニメーションの秒数を変えることで全体の長さが変わります。秒数を変えると移動ス

ピードや止まっている時間も変わります。

 

背景の有無と画像の追加

背景が不要な場合はbackground-colorborder-radiusを削除しても構いませんが残し

てコードを追加する場合は追加するコードにはbackground-colorは必要ないです。

コードを追加する場合はkeyframes名とclass名は必ず変えてください。

◆(例) 画像を追加した時に変更する箇所◆
  • @keyframes kitesaru ⇒ @keyframes kitesaru2
  • .pazuru .pazuru2
  • animation:kitesaru 7s linear infinite ; ⇒ animation:kitesaru2 7s linear infinite;
  • <div class="pazuru"> ⇒ pazuru2

 

画像のサイズ

スマホの画面に合わせるのにwidth:300px;としています。height:200px; は変えても縦

に長くなるだけで問題ありませんが後で変えた場合は画像位置も変わってしまいますの

で再調整が必要になります。

background-size:70px 70px;は画像に合わせて数値を変更してください。

 

画像を追加した場合、出てくる場所や去っていく場所を画像ごとに変えるのも面白いか

もしれません。例えば花びらを合わせて一枚づつ落としていくことも可能です。

落とすタイミングは例として100%の前の%を1枚目を50%、あとは5%刻みで設定する

と順番に落ちていきます。例えばこんな感じで最後の1枚を揺らしながら落とすことも

出来ます。コードの画像位置は使う画像で位置が変わるので調整が必要です。

 

 

 

 

 

 

 

 

 

PVアクセスランキング にほんブログ村