初心者がCSSでアニメーションさせる

14791 ワード
GeoLib JavaScript animation keyframes CSS CSS テキストリンク

超初心者なのですが、ハムスターを愛でるためのWEBアプリケーションを作ろうとしています。お遊びアプリには動きがないとね！！！ということで、WEBページでのアニメーションに触れてみました。ネット上で仕入れたサンプルをベースにとりえあずハムスターを動かすにはどうするのか？これを確認しつつ、アプリケーションで必要となる「現在地」から目標地点までの距離を測る機能を実装します。

出来上がったWEBアプリケーション

netlify上にアップしましたのでご覧ください

画面イメージショット　（実際はグレーのハムスターが右から左に横切ります）

参考）開発予定のプロダクト（note記事に飛びます）

確認したかった機能

  • ハムスターの画像をアニメーションさせる
    • @keyframes　でアニメーションできることがわかった
    • 以下のサイト様の解説を参考にさせていただきました

  • 現在地から目標地点までの距離を計測する
    • 2点間の距離を計測するライブラリ「Geolib」で簡単に計測できることがわかった
    • 以下のサイト様の解説を参考にさせていただきました

ユーザーレビュー

家族ども（嫁・子供）にみてもらいました。コメントは以下の通り

  • ハムスターがかわいい
  • 背景のタッチもかわいい
  • ハムスターがもうちょっと細かく動くといいかも
  • いままで何をやりたいのかわからなかったがモノを見て分かった

ハムちゃんの動きがすこし雑だよな、、とおもっていたところをやっぱり指摘されたのでここは要改善点。いろいろ調べて、もっとかわいらしく動くようにしたいと思う。
４点目は、やはりそうか、、という感じだが、人はモノを見せてもらうまでは、なかなか理解できないものだなと思った。引きつづき「動くもの」を素早く作り、フィードバックが得られるようになりたいと思う。

ソースコード

HTML
index.html
<!DOCTYPE html>
<html lang="ja-jp">

<head>
    <meta charset="UTF-8">
    <title>ハム旅</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="app.js" defer></script>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.min.js"></script>
    <div class="board">
        <H1>はむ旅</H1>

            <div class = "dist"><P><img width = "50" src = "grayham.png">グレハムちゃんちまで</P></div>
            <H3><div id = "kyori"></div></H3>

    </div>

</body>

</html>

CSS
style.css
body {
    margin: 0;
}

.hamu {
    position: absolute;
    left: 110%;
    bottom: 100px;
    width: 200px;
    height: 158px;
    background-image: url(../hammask.png);
    animation: hamuwalk 0.6s 0s infinite steps(9), hamuMove 15s 0s linear;
    transform-origin: 50% 100%;


}

@keyframes hamuwalk {
    100% {
        background-position: -1800px 0;

    }
}


@keyframes hamuMove {
    0 {
        left: 100px;
        bottom: 100px;

    }

    100% {
        left: -300px;
        bottom: 100px;
    }
}

.board {
    height: 1000px;

    position: relative;
    overflow: hidden;
    background: rgb(0, 0, 0);
    background-image: url(../bg.jpg);
    background-size: cover;
    background-position: center bottom;



}

H1 {
    text-align: center;
    font-size: 80px;
    color: rgb(1, 26, 250);
}



H3 {
    text-align: center;
    font-size: 50px;
    color: rgb(0, 0, 0);    


}

.dist {
    text-align: center;
    font-size: 40px;
}

Javascript
app.js
var board = document.querySelector(".board")

function start() {

        var div = document.createElement("div");
        div.classList.add("hamu");
        div.style.transform = "scale(1.2)";
        div.style.animationDuration = "5s";


        board.appendChild(div);


        div.addEventListener("animationend", function () {
            this.parentElement.removeChild(this);
        });


}

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

function successCallback(position) {
    //geolibで距離を計測
      let distance =  geolib.getDistance(
        {latitude: position.coords.latitude, longitude: position.coords.longitude}, //自分
        {latitude: 35.6895014, longitude: 139.6917337}   //都庁               
      );
    console.log(distance);
      document.getElementById( 'kyori' ).innerHTML = '約' + distance / 1000 + 'キロメートル';


}

function errorCallback(error) {
    //エラー時

    }


start();