More than 1 year has passed since last update.

anime.js でさらにかっこいいサイトを作る [アニメーション]

Posted at 2022-08-18

最近、こんなのを見つけました。

anime.jsというのはhtmlの要素にアニメーションを付ける軽量なjavascriptのファイルです。
では今回はこのanime.jsを使いこなしていきましょう。

html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <!-- 要素 -->
        <!-- 以下はanime.js -->
        <script src='https://codepen.io/juliangarnier/pen/REyzrR/75efae7724dbc3c055e918057fc4aca5.js'></script><script  src="./script.js"></script>
    </body>
</html>

javascript

anime({ //アニメを実行
    // ここにふるまい,対象の要素を入力しよう
});

anime関数の引数

targets

どの要素を対象にするか。

translateX

anime実行時、右にどんくらい動かすか

translateY

anime実行時、下にどんくらい動かすか

rotate

anime実行時、何度回転するか

loop

繰り返すか

duration

アニメーションの時間(ミリ秒)

delay

開始までの時間(ミリ秒)

endDelay

終了した後の時間(ミリ秒)

elasticity

弾性

easing

イージング(動きの加減速)

サンプル

クリックしたら1秒後右下に移動

See the Pen Untitled by caleb7023 (@caleb7023) on CodePen.

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

anime.js で さらに かっこいい サイト を 作る [アニメーション]