CSSプロパティのclip-pathとbackground-positionを利用した三角形ローディングの作り方～animejsを添えて～

こんにちわ。nap5です。

CSSプロパティのclip-pathとbackground-positionを利用した三角形ローディングの作り方を紹介したいと思います。

animejsライブラリは以下になります。

anime.js

デモで使用した画像は以下からダウンロードしました。
アカウント登録すれば、フリーでダウンロードできます。

Round Icons - 45,000 Premium Icon Packed in One Bundle Flat Line Glyph

デモサイトです。

Vite App

デモコードです。

mystifying-antonelli-y7t2dn - CodeSandbox

デモコードではparse-unitライブラリを使っていますが、特に使っていません。gutterを指定するとclipPathのオフセット位置を制御できます。

clipPathのpolygonの引数とbackground positionの引数は似ているので、組み合わせるとこういう動きが実現できるよというサンプルでした。

メンバーシップ制度を始めました。掲示板の方が、アクティブにポストしているので、よかったら、覗いてみてください。

Nap5の部屋｜nap5

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

https://www.udemy.com/course/count-down-up-using-javascript-animation-api/

Web標準のJavascript Animation APIを使ったインタラクティブなカウントアップダウンの作り方

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。