私が作成している<CSS>イライラ迷路に動きの要素があったら面白いなと思い、
【ルール説明】<CSS>イライラ迷路 - アーシの考える迷路
今回はオブジェクトを動かすCSSを試してみました。
とりあえずできあがったものはこちら
上下左右、斜めに動かしてみました！
知ってしまえば動かし方はそんなに難しくはありません。
まず、下記のようなCSSを用意します。
<style>
@keyframes right{
0%{
transform: translateX(0);
}
100%{
transform: translateX(100px);
}
}
@keyframes left{
0%{
transform: translateX(0);
}
100%{
transform: translateX(-150px);
}
}
@keyframes up{
0%{
transform: translateY(0);
}
100%{
transform: translateY(-150px);
}
}
@keyframes down{
0%{
transform: translateY(0);
}
100%{
transform: translateY(100px);
}
}
@keyframes diagonal{
0%{
transform: translateX(0) translateY(0);
}
100%{
transform: translateX(120px) translateY(80px);
}
}
</style>
赤字の部分が自分が定義した処理の名前です。
緑字の部分がどれだけ動くかを記しています。
今回は、0%のときが初期値の0で、100%のときにどの方向にどれだけ動くかを定義してみました。
次に実際に画面にオブジェクトを配置しているhtmlはこちら
<div id="box">
<div id="back"> </div>
<div id="object01"> </div>
<div id="object02"> </div>
<div id="object03"> </div>
<div id="object04"> </div>
<div class="circle"> </div>
</div>
boxというオブジェクトの中に6つのオブジェクトが入っていることが分かります。
なお、divタグ内をidで定義した場合もclassで定義した場合も、後述のように定義することで動作することが確認できました。
次に、動かない部分（boxとback）のCSSの紹介です。
<style>
#box{
position:relative;
width:400px;
height:300px;
border:solid 3px #FFFFFF;
margin:0px auto;
}
#back{
display:block;
width:400px;
height:300px;
background-color:#000000;
z-index:1;
position:absolute;
}
</style>
htmlと合わせて見ると分かるのですが、boxはposition:relative;で定義されており、文中の相対位置に表示されるよう定義されており、backはposition:absolute;で定義されており、box内の絶対位置に表示されます。
次に今回のメイン、動く部分のCSSの紹介です。
<style>
#object01{
display:block;
position:absolute;
z-index:5;
background-color:#FFFFFF;
top:20px;
left:0px;
width:80px;
height:30px;
animation: right 2s .3s ease-out infinite alternate;
}
#object02{
display:block;
position:absolute;
z-index:5;
background-color:#FFFFFF;
top:80px;
left:300px;
width:80px;
height:20px;
animation: left 3s .8s ease-out infinite alternate;
}
#object03{
display:block;
position:absolute;
z-index:5;
background-color:#FFFFFF;
top:200px;
left:50px;
width:30px;
height:80px;
animation: up 1s .5s ease-out infinite alternate;
}
#object04{
display:block;
position:absolute;
z-index:5;
background-color:#FFFFFF;
top:80px;
left:350px;
width:20px;
height:80px;
animation: down 4s .3s ease-out infinite alternate;
}
.circle{
position: absolute;
top: 100px;
left: 100px;
width: 50px;
height: 50px;
z-index:2;
background-color: #4694d1;
border-radius: 100px;
animation: diagonal 2s .5s ease-out infinite alternate;
}
.circle:hover{
display:block;
width:400px;
height:300px;
background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/a/arshii/20201028/20201028063138.png);
z-index:7;
}
</style>
各オブジェクトの情報を詳細に定義していきます。
プログラミングに触れたことがない方には単純なオブジェクトをつくるためにこんなに書く必要があるのかと思うかもしれませんが、必要です。
肝心な移動をすることを定義している箇所は赤字部分で、最初に定義したどのように動くかを呼び出すかとともに、何秒かけて100%の動きになるかと、何秒かけて0%の場所まで戻るかも合わせて定義しています。
また、今回参考にさせていただいたサイトのおかげで偶然ですが、
丸を作る（厳密には角を丸める）方法も知ることができました。
border-radius:で定義することができ、そのオブジェクトにカーソルを合わせた際に表示される別サイズのオブジェクトにも角を丸める情報が引き継がれます。
今回は<CSS>イライラ迷路をベースとしているので、カーソルを合わせると「ゴールおめでとう」が表示される仕掛けになっていました。
カーソルを合わせることによって表示内容を変えられるhoverについては過去記事を見てみてください。
今回は、CSSでオブジェクトを動かす方法を見ていきました。
学べば学ぶほど、できることが増えてくるので楽しいですね。
