見出し画像

svgとcssアニメーションだけで作る曲線3D回転アニメーション

先日リニューアルした弊社コーポレートサイト のリニューアルを少し手伝ったときの話…

👨‍💼 「ここの背景、このsvg曲線動かしてカッコイイ感じにしたいね〜」

🙆‍♂️ 「OK!」

🤔「jsでパスを時間経過でうまく変形すればできるかな…? 」

😅「今回の用途に合ったsvg操作系ライブラリが見つからない… 」

🤯「jsでsvgのパスを直接いじろうとしたけど意味不明すぎる…」

🤔「待てよ、これcssでsvg回転させるだけでもええんちゃうか…?」

😉「予想以上にイイ感じにできた!技術ブログネタにしよう!」

ということで…
ほぼsvg曲線とcssアニメーションだけで実装した、弊社サイト背景の曲線アニメーションについて、この記事で解説します。

↓こちらが背景部分だけを抜き出したサンプルコードです。

仕組みをざっくりと説明すると、

1. デザイナーさんがAdobe Illustrator等のソフトで作成した美しい曲線を、svg形式で書き出してhtmlに配置
2. cssアニメーション機能で、曲線一本ずつタイミングを少しずらして、Y軸で回転させる

というシンプルなものです。

重要なのはscssのこの部分

.curvePath {
 $curveCount: 32;
 @for $i from 1 through $curveCount {
   &:nth-child(#{$i}) {
     animation: curveRotate 24s linear $i * -0.1s infinite;
     transform-origin: 1830px - $i * 1.5;
   }
 }
}
@keyframes curveRotate {
 0% {
   transform: none;
 }
 50% {
   transform: rotateY(360deg) scaleX(1.5);
 }
 100% {
   transform: none;
 }
}

・svgの曲線1本に相当する<path>要素に .curvePath クラスを指定
・scssの@for ディレクティブ:nth-child 疑似クラスセレクタで、各曲線のanimation-durationを少しずつずらしたanimationを定義(1本あたり0.1sずらしてます)
・回転軸(transform-origin)も同様に少しずつずらす
・@keyframes は 50%で360度回転 & x方向に1.5倍拡大させる

という仕組みです。

scssの@forは必須です。
もし@for使わずに実装するとしたら、曲線一本ずつ手動で数値指定する必要があり、100倍くらい時間かかるのでやってられないです😩

実際のサイトでは、jsも使ってcss transformを制御して時間経過で横幅を伸縮させたりしてますが、サンプルコードの通りjsを使わなくてもcssアニメーションだけでも工夫次第でこのような面白いアニメーションが実装できますよーという話でした。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。