Designやフロントエンドのことなど。2019anime.jsのmorfingを使用して流体シェイプがうにょにょ動くアニメーションのサンプルを作成してみました。下記の記事を参考にさせていただきました。2019年流行の流体シェイプでポートフォリオサイトを作ってみる。CodePen.作り方イラストレーターで流体シェイプを作るイラストレーターで流体シェイプを作り、レイヤーに名前をつけます。以下の点に注意してください。アンカーポイントの数が変わらないようにする同じ点からスタートし、同じ方向に描くようにする一つ形を描いたらコピー&ペーストしてアンカーポイントの移動で形を変えるようにするといいと思います。レイヤーに名前をつけると、SVGコードのid名になります。「保存」SVGオプションの「SVGコード」からSVGコードをコピーします。SVGコードは以下のような感じになります。dコードの途中で不要な改行が入っているとJavaScriptで指定する際にエラーになることあるので注意しましょう。c-123.804-100.646-76-214,14-266S232,153,326,98z"/></svg>anime.jsをリンクしてJavaScriptを記述anime.jsのサイトからanime.jsをダウンロードしてHTMLにリンクします。morphingの説明とサンプルはこちらのリンクにあります。下記はサンプルコードに少し解説を加えたものです。id="m01"のみHTMLに残す(m02とm03はjsコードで指定)。CSS用にクラス名を追加。true});以上です。...スクロールに連動したアニメーションを実現するには?アニメーション、したいですよね。まとめ自分がよく使うload系のイベントをまとめておきます。コメントをキャンセルメールアドレスが公開されることはありません。*ウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。